{% extends 'base.html' %}

{% block title %}
  {{ section.title }} | {{ config.title }}
{% endblock title %}

{% block content %}
<section class="section">
  <div class="container max-w-7xl mx-auto min-h-screen">
    <div class="flex flex-col items-center flex-start space-y-2 py-8">
      <h1 class="title leading-10 text-3xl text-garage-gray">{{ section.title }}</h1>
      <p class="italic">{{ section.description }}</p>
    </div>
    <div class="content">
      {{ section.content | safe }}
    </div>
    <div class="px-0 md:px-8 xl:px-4 2xl:px-0">
      <div class="space-y-20">
        {% if paginator %}
          {% set pages = paginator.pages %}
        {% else %}
          {% set pages = section.pages %}
        {% endif %}

        {% for page in pages %}
        <article class="border-l-4 border-garage-gray pl-4 max-w-5xl">
          <h2 class="text-garage-gray hover:text-garage-orange text-2xl pb-3">
            <a class="w-full block" href='{{ page.permalink }}'>
              {{ page.title }}
            </a>
          </h2>
          {% if page.description %}
            <p class="w-max italic text-gray-600 py-0.5 px-1.5 bg-gray-100 rounded mb-1">{{ page.description }}</p>
          {% endif %}
          <div class="flex space-x-1 text-sm py-2 bg-garage-orange bg-opacity-10 w-full p-1.5 rounded">
            <div>
              {{ macros::page_publish_metadata(page=page) }}
            </div>
            <div>
              {{ macros::page_content_metadata(page=page) }}
            </div>
          </div>
          <div class="content mt-2">
            <div class="text-gray-700 text-lg not-italic">
              {{ page.summary | safe | striptags }}
            </div>
            <a class="group font-semibold p-4 flex items-center space-x-1 text-garage-orange" href='{{ page.permalink }}'>
              <div class="h-0.5 mt-0.5 w-4 group-hover:w-8 group-hover:bg-garage-gray transition-all bg-garage-orange"></div>
              <span>Read</span>
              <span class="text-garage-orange group-hover:text-garage-gray transition-all">
                <i class="fas fa-arrow-right fa-xs"></i>
              </span>
            </a>
          </div>
          <div>
            <div>
              {% if page.taxonomies.categories %}
                {{ macros::render_categories(categories=page.taxonomies.categories) }}
              {% endif %}
            </div>
            <div>
              {% if page.taxonomies.tags %}
                {{ macros::render_tags(tags=page.taxonomies.tags) }}
              {% endif %}
            </div>
          </div>
        </article>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
{% endblock %}