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

{% block body %}
{%- set authors = page.children.published -%}
<div class="container">
  {% include 'partials/breadcrumbs.html.twig' %}
  <header class="editoria-head" style="--ed: var(--c-accent); text-align:center;">
    <span class="editoria-head__badge">Equipe</span>
    <h1 class="editoria-head__title">{{ page.title }}</h1>
    {% if page.content %}<div class="editoria-head__desc" style="margin:0 auto;">{{ page.content|striptags|truncate(240) }}</div>{% endif %}
  </header>

  {% if authors|length %}
  <div class="team-grid">
    {% for a in authors %}
      {%- set photo = a.header.photo ? a.media[a.header.photo] : null -%}
      <article class="team-card">
        <div class="team-card__avatar">
          {% if photo %}<img src="{{ photo.url }}" alt="Foto de {{ a.title }}" width="300" height="300" loading="lazy">{% else %}<span class="avatar-ph" aria-hidden="true"></span>{% endif %}
        </div>
        <h2 class="team-card__name">{{ a.title }}</h2>
        {% if a.header.role %}<p class="team-card__role">{{ a.header.role }}</p>{% endif %}
        <button class="team-card__cta" type="button" data-bio-open="bio-{{ a.slug }}" aria-haspopup="dialog">Ver biografia</button>
      </article>

      <dialog class="bio-modal" id="bio-{{ a.slug }}" aria-labelledby="bio-name-{{ a.slug }}">
        <div class="bio-modal__bar"></div>
        <button class="bio-modal__close" type="button" data-bio-close aria-label="Fechar biografia">&times;</button>
        <div class="bio-modal__head">
          <div class="team-card__avatar">
            {% if photo %}<img src="{{ photo.url }}" alt="" width="300" height="300" loading="lazy">{% else %}<span class="avatar-ph" aria-hidden="true"></span>{% endif %}
          </div>
          <div>
            <h3 class="bio-modal__name" id="bio-name-{{ a.slug }}">{{ a.title }}</h3>
            {% if a.header.role %}<p class="team-card__role" style="min-height:auto;margin:0;">{{ a.header.role }}</p>{% endif %}
          </div>
        </div>
        <div class="bio-modal__body">{{ a.content|raw }}</div>
      </dialog>
    {% endfor %}
  </div>
  {% else %}
    <div class="empty-state">Nenhum autor cadastrado ainda.</div>
  {% endif %}
</div>

<script>
(function () {
  function close(d){ if (d.open) { try { d.close(); } catch (e) { d.removeAttribute('open'); } } }
  document.querySelectorAll('[data-bio-open]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var d = document.getElementById(btn.getAttribute('data-bio-open'));
      if (!d) return;
      if (d.showModal) d.showModal(); else d.setAttribute('open', '');
      document.body.classList.add('no-scroll');
    });
  });
  document.querySelectorAll('.bio-modal').forEach(function (d) {
    var done = function () { document.body.classList.remove('no-scroll'); };
    d.addEventListener('close', done);
    d.querySelector('[data-bio-close]').addEventListener('click', function () { close(d); done(); });
    d.addEventListener('click', function (e) { if (e.target === d) { close(d); done(); } });
  });
})();
</script>
{% endblock %}