{% if not skip_html_head %}
  {% with title=title, description=description, image=image, url=url, type='article', skip_header=skip_header or not config.header, styles=['/css/blog.css', '/css/code.css', '/css/reactions.css'] %}
    {% include 'common-head.html' %}
  {% endwith %}

<main>
  <article class="container h-entry">
    {% if not skip_header %}
      {% if title %}
        <div class="title">
          <h1 class="p-name">
              {% if external_url %}
                <a class="u-url" href="{{ external_url }}">{{ title }}</a>
              {% else %}
                {{ title }}
                <a class="u-url" href="{{ url }}" style="display: none;">{{ url }}</a>
              {% endif %}
          </h1>
        </div>
      {% endif %}

      <div class="raw-md-btn-container">
        <a href="{{ url }}.md" title="Raw Markdown">&#128221;</a>
      </div>

      {% if description %}
      <div class="description">
        <h3 class="p-summary">{{ description }}</h3>
      </div>
      {% endif %}

      {% if published or author or tags %}
      <div class="meta">
        {% if published or author %}
          <div class="meta-row">
            <span class="p-author h-card">
              {% if author_photo %}
                <img class="u-photo" src="{{ author_photo }}" alt="Author photo" loading="lazy">
              {% endif %}
              {% if author_url %}
                <a class="u-url" rel="me" href="{{ author_url }}">
              {% endif %}

              <span class="p-name">
                {{ author }}
              </span>

              {% if author_url %}
                </a>
              {% endif %}
            </span>
          {% endif %}

          {% if published %}
            <div class="published-date">
              <time class="dt-published" datetime="{{ published_datetime.isoformat() }}">{{ published }}</time>
            </div>
          </div>
          {% endif %}
        {% endif %}

        {% if tags %}
        <div class="tags meta-row">
          {% for tag in tags %}
            <a class="tag" href="/tags/{{ tag }}">#{{ tag }}</a>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    {% endif %}

    {% if image %}
    <div class="main-image-container">
      <img class="u-featured main-image" src="{{ image }}" alt=".">
    </div>
    {% endif %}

    <div class="content e-content">
{% endif %}

      {{ content | safe }}

{% if not skip_html_head %}
    </div>

    {% with utils=utils %}
      {% include 'reactions.html' %}
    {% endwith %}

  </article>
</main>

  {% include 'footer.html' %}
  {% include 'common-tail.html' %}
{% endif %}