{% extends "base.html" %}

{% block title %}{{ director_name }} · Lumière{% endblock %}

{% block content %}
  <section class="page-heading" style="display: flex; gap: 32px; align-items: flex-start;">
    <div style="flex: 1;">
      <p class="eyebrow">Director</p>
      <h1 style="margin: 0;">{{ director_name }}</h1>
      {% if director_biography %}
      <p style="margin: 16px 0 0 0; color: var(--muted); line-height: 1.6; font-size: 15px;">{{ director_biography }}</p>
      {% endif %}
    </div>
    {% if director_image %}
    <img src="{{ director_image }}" alt="{{ director_name }}" style="width: 160px; height: auto; border-radius: 8px; flex-shrink: 0;" loading="lazy" />
    {% endif %}
  </section>

  <section class="director-summary" aria-label="Director summary">
    <article class="summary-card">
      <span class="summary-label">Films logged</span>
      <strong>{{ director_summary.total_films_logged }}</strong>
    </article>
    <article class="summary-card">
      <span class="summary-label">Average stars</span>
      <strong>{{ "%.1f"|format(director_summary.average_stars) }}</strong>
    </article>
    <article class="summary-card">
      <span class="summary-label">Common shelf</span>
      <strong>{{ director_summary.most_common_shelf|title }}</strong>
    </article>
  </section>

  <section class="diary-feed" aria-label="{{ director_name }} filmography">
    {% for film in films %}
      {% include "_film_card.html" %}
    {% endfor %}
  </section>
{% endblock %}