{% extends "onboarding/base.html" %}
{% block body_class %}is-wizard{% endblock %}
{% block header %}{% endblock %}
{% block footer %}{% endblock %}
{% block main %}
<div class="tam-wizard-shell">
  <aside class="tam-wizard-shell__aside">
    <div class="tam-wizard-shell__brand">
      {% include "onboarding/_logo.html" with logo_size='24px' %}
    </div>
    <div class="tam-wizard-shell__pitch">
      <h2 class="tam-wizard-shell__title">Join the TAMIS network</h2>
      <p class="tam-wizard-shell__tagline">A trusted space to share and trade audiovisual metadata - while keeping control of how it is used.</p>
    </div>
    <ul class="tam-wizard-shell__bullets">
      <li>Track prestations across the editorial hierarchy</li>
      <li>Centralise deliverables and validation</li>
      <li>Federated identity via the TEMS data space</li>
    </ul>
    <div class="tam-wizard-shell__footer">{% block sidebar_footer %}No technical identifiers required at this stage.{% endblock %}</div>
  </aside>
  <main class="tam-wizard-shell__main">
    <nav class="tam-stepper" aria-label="Wizard sections">
      {% for s in sections %}
        <a class="tam-stepper__item{% if s.is_active %} is-active{% endif %}{% if s.status and s.status != 'draft' %} is-done{% endif %}" href="{% url 'onboarding-wizard-section' section_key=s.key %}">
          <span class="tam-stepper__circle">{{ s.index }}</span>
          <span class="tam-stepper__label">{{ s.label }}</span>
        </a>
      {% endfor %}
    </nav>
    {% block pane %}
    <section class="tam-section-pane">
      {% if form_error %}<p class="tam-flash tam-flash--danger">{{ form_error }}</p>{% endif %}
      {% block section_main %}{% endblock %}
    </section>
    {% endblock %}
  </main>
</div>
{% endblock %}