{% extends 'partials/base.html.twig' %}

{% block body %}
{%- set cat = page.parent and page.parent.template == 'category' ? page.parent : null -%}
{%- set hero = page.header.hero_image ? page.media[page.header.hero_image] : null -%}
{%- set author_slug = page.header.taxonomy.author[0] ?? page.header.author ?? null -%}
{%- set author = author_slug ? page.find('/autores/' ~ author_slug) : null -%}
{%- set author_name = author ? author.title : (author_slug ? author_slug|replace({'-': ' '})|title : site.author.name) -%}
{%- set author_photo = author and author.header.photo ? author.media[author.header.photo] : null -%}
{%- set words = page.content|striptags|trim|split(' ')|length -%}
{%- set read_min = max(1, (words / 200)|round(0, 'ceil')) -%}

<article class="article">
  <div class="container">
    {% include 'partials/breadcrumbs.html.twig' %}

    <header class="article__header">
      {% if cat %}{% include 'partials/editoria-badge.html.twig' with {cat: cat} %}{% endif %}
      <h1 class="article__title">{{ page.title }}</h1>
      {% if page.header.summary %}<p class="article__dek">{{ page.header.summary }}</p>{% endif %}

      <div class="article__meta">
        <span class="article__author-mini">
          {% if author_photo %}<img src="{{ author_photo.url }}" alt="{{ author_name }}" width="38" height="38">{% endif %}
          {% if author %}<a href="{{ author.url }}">{{ author_name }}</a>{% else %}<span>{{ author_name }}</span>{% endif %}
        </span>
        <span>·</span>
        <time datetime="{{ page.date|date('c') }}">{{ page.date|date('d \\d\\e M \\d\\e Y') }}</time>
        <span>·</span>
        <span>{{ read_min }} min de leitura</span>
      </div>
    </header>

    <div class="article__layout">
      <div class="article__rail">
        {% include 'partials/social-share.html.twig' with {layout: 'rail'} %}
      </div>

      <div class="article__main">
        {% if hero %}
        <figure class="article__hero">
          {% include 'partials/img.html.twig' with {media: hero, alt: page.header.hero_alt ?: page.title, ratio: 'ratio--16x9'} %}
          {% if page.header.hero_credit %}<figcaption class="article__credit">{{ page.header.hero_credit }}</figcaption>{% endif %}
        </figure>
        {% endif %}

        <div class="article__body">
          {{ content|raw }}
        </div>

        {% set tags = page.header.taxonomy.tag ?? [] %}
        {% if tags %}
        <div class="article__tags">
          {% for tag in tags %}<a class="tag" href="{{ url('/busca') }}?q={{ tag|url_encode }}">#{{ tag }}</a>{% endfor %}
        </div>
        {% endif %}

        {% include 'partials/social-share.html.twig' with {layout: 'bar'} %}

        {% if author %}
        <aside class="article__author-box">
          {% if author_photo %}<img src="{{ author_photo.url }}" alt="{{ author_name }}" width="64" height="64">{% else %}<span class="placeholder" aria-hidden="true"></span>{% endif %}
          <div>
            <span class="article__author-box__label">Autor</span>
            <a class="n" href="{{ author.url }}">{{ author_name }}</a>
            {% if author.header.role %}<div class="r">{{ author.header.role }}</div>{% endif %}
          </div>
        </aside>
        {% endif %}
      </div>
    </div>

    {% include 'partials/related.html.twig' %}
  </div>
</article>
{% endblock %}