{% extends "base_content_page.html" %}

{% load wagtailimages_tags wagtailcore_tags static i18n %}

{% block page_content %}
   <div class="grid grid-cols-1 md:gap-3 md:grid-cols-6 text-ink">
      <article {% if page.show_toc %}data-content-toc{% endif %} class="{% if page.show_toc %}md:col-span-4{% else %}md:col-span-6{% endif %} prose prose-sm md:prose-lg max-w-none">
         <header class="">
            <h1 class="h1 mb-3">{{ page.title }}</h1>
            <div class="text-lg mb-3">{{ page.intro | richtext }}</div>
            {% if page.image %}
               {% image page.image format-jpeg width-695 as page_image_1x_jpg %}
               {% image page.image format-jpeg width-1390 as page_image_2x_jpg %}
               {% image page.image format-webp width-695 as page_image_1x_webp %}
               {% image page.image format-webp width-1390 as page_image_2x_webp %}
               <picture>
                  <source srcset="{{ page_image_1x_webp.url }} 1x, {{ page_image_2x_webp.url }} 2x" type="image/webp" />
                  <source srcset="{{ page_image_1x_jpg.url }} 1x, {{ page_image_2x_jpg.url }} 2x" type="image/jpeg" />
                  <img src="{{ page_image_1x_webp.url }}"
                       alt="{{ page.image.alternative_text }}"
                       class="aspect-video w-full object-cover"
                       {% if page_image_1x_webp.focal_point %}style="{{ page_image_1x_webp.object_position_style }}"{% endif %} />
               </picture>
            {% endif %}
            <div class="w-full flex flex-auto space-x-2">
               {% for tag in page.tags.all %}<span class="tag">#{{ tag.name }}</span>{% endfor %}
            </div>
            {% if page.publication_date %}
               <time datetime="{{ page.publication_date }}" class="text-base font-bold tracking-tight text-accent-4 text-right">
                  {{ page.publication_date | date:'d M Y' }}
               </time>
               {% if page.revision_date %}
                  , updated:
                  <time datetime="{{ page.revision_date }}" class="text-base font-bold tracking-tight text-accent-4 text-right">
                     {{ page.revision_date | date:'d M Y' }}
                  </time>
               {% endif %}
            {% endif %}
            {% if page.display_authors and page.authors.all %}
               <p class="text-sm text-secondary">
                  {% translate "by" %}
                  {% for author in page.authors.all %}
                     {{ author.person }}
                     {% if not forloop.last %},{% endif %}
                  {% endfor %}
               </p>
            {% endif %}
         </header>
         {% include_block page.body %}
      </article>
      {% if page.show_toc %}
      <nav class="hidden md:block md:col-span-2">
         <div class="is-position-fixed top-4 p-4">
            <h2 class="text-lg font-bold mb-4">{% trans "On this page" %}</h2>
            <div id="toc"></div>
         </div>
      </nav>
      {% endif %}
   </div>
{% endblock page_content %}
{% block extra_js %}
   <script defer src="{% static 'js/code.js' %}"></script>
   {% if page.show_toc %}
   <script defer src="{% static 'js/scrollspy.js' %}"></script>
   {% endif %}
{% endblock %}
