{% extends "onboarding_base.html" %}
{% load i18n static %}

{% block title %}TAMIS — Register{% endblock %}
{% block nav_join %}active{% endblock %}

{% block content %}
<div class="registration-page">
  <aside class="hero-side">
    <h1 class="hero-title">Join the TAMIS<br />post-production network</h1>
    <p class="hero-subtitle">
      A trusted dataspace for broadcasters, producers, and post-production providers to coordinate delivery workflows end-to-end.
    </p>
    <ul class="hero-points">
      <li>Track prestations across the editorial hierarchy</li>
      <li>Centralise deliverables and validation</li>
      <li>Federated identity via the TEMS dataspace</li>
    </ul>
  </aside>

  <section class="form-side">
    <form method="post" enctype="multipart/form-data" class="registration-form" novalidate>
      {% csrf_token %}
      {% if form.non_field_errors %}
        <div class="alert alert-error" role="alert">{{ form.non_field_errors }}</div>
      {% endif %}

      <ol class="form-stepper" aria-hidden="true">
        <li class="step-marker" data-num="1"><span>{% trans "Organisation" %}</span></li>
        <li class="step-marker" data-num="2"><span>{% trans "Contacts" %}</span></li>
        <li class="step-marker" data-num="3"><span>{% trans "Documents" %}</span></li>
        <li class="step-marker" data-num="4"><span>{% trans "Confirm" %}</span></li>
      </ol>

      {# ----- Step 1: Organisation ----- #}
      <div class="form-step" data-step="0">
        <fieldset class="form-group">
          <legend class="group-label">{% trans "Organisation" %}</legend>
          <div class="form-field">
            <label for="{{ form.organization_legal_name.id_for_label }}"><span class="required">*</span> {% trans "Legal name" %}</label>
            {{ form.organization_legal_name }}
            {{ form.organization_legal_name.errors }}
          </div>
          <div class="form-row">
            <div class="form-field">
              <label for="{{ form.organization_registration_number.id_for_label }}"><span class="required">*</span> {% trans "Registration number" %}</label>
              {{ form.organization_registration_number }}
              {{ form.organization_registration_number.errors }}
            </div>
            <div class="form-field">
              <label for="{{ form.organization_registration_scheme.id_for_label }}"><span class="required">*</span> {% trans "Registration scheme" %}</label>
              {{ form.organization_registration_scheme }}
              {{ form.organization_registration_scheme.errors }}
            </div>
          </div>
          <div class="form-row">
            <div class="form-field">
              <label for="{{ form.organization_vat_number.id_for_label }}"><span class="required">*</span> {% trans "VAT number" %}</label>
              {{ form.organization_vat_number }}
              {{ form.organization_vat_number.errors }}
            </div>
            <div class="form-field form-field-narrow">
              <label for="{{ form.organization_vat_country_code.id_for_label }}"><span class="required">*</span> {% trans "VAT country" %}</label>
              {{ form.organization_vat_country_code }}
              {{ form.organization_vat_country_code.errors }}
            </div>
          </div>
          <div class="form-row">
            <div class="form-field">
              <label for="{{ form.organization_legal_form.id_for_label }}"><span class="required">*</span> {% trans "Legal form" %}</label>
              {{ form.organization_legal_form }}
              {{ form.organization_legal_form.errors }}
            </div>
            <div class="form-field">
              <label for="{{ form.organization_website.id_for_label }}"><span class="required">*</span> {% trans "Website" %}</label>
              {{ form.organization_website }}
              {{ form.organization_website.errors }}
            </div>
          </div>
          <div class="form-field">
            <label for="{{ form.organization_logo.id_for_label }}">{% trans "Logo" %}</label>
            {{ form.organization_logo }}
            {{ form.organization_logo.errors }}
          </div>
        </fieldset>

        <fieldset class="form-group">
          <legend class="group-label">{% trans "Legal address" %}</legend>
          <div class="form-field">
            <label for="{{ form.organization_address_street.id_for_label }}"><span class="required">*</span> {% trans "Street address" %}</label>
            {{ form.organization_address_street }}
            {{ form.organization_address_street.errors }}
          </div>
          <div class="form-row">
            <div class="form-field form-field-narrow">
              <label for="{{ form.organization_address_postal_code.id_for_label }}"><span class="required">*</span> {% trans "Postal code" %}</label>
              {{ form.organization_address_postal_code }}
              {{ form.organization_address_postal_code.errors }}
            </div>
            <div class="form-field">
              <label for="{{ form.organization_address_locality.id_for_label }}"><span class="required">*</span> {% trans "Locality" %}</label>
              {{ form.organization_address_locality }}
              {{ form.organization_address_locality.errors }}
            </div>
            <div class="form-field form-field-narrow">
              <label for="{{ form.organization_address_country_code.id_for_label }}"><span class="required">*</span> {% trans "Country" %}</label>
              {{ form.organization_address_country_code }}
              {{ form.organization_address_country_code.errors }}
            </div>
          </div>
        </fieldset>

        <fieldset class="form-group">
          <legend class="group-label"><span class="required">*</span> {% trans "Sectoral qualification" %}</legend>
          <div class="checkbox-grid">
            {% for choice in form.participant_types %}
              <label class="checkbox-label">{{ choice.tag }} <span>{{ choice.choice_label }}</span></label>
            {% endfor %}
          </div>
          {{ form.participant_types.errors }}
        </fieldset>
      </div>

      {# ----- Step 2: Contacts ----- #}
      <div class="form-step" data-step="1">
        <fieldset class="form-group">
          <legend class="group-label">{% trans "Main contact" %}</legend>
          <div class="form-row">
            <div class="form-field">
              <label for="{{ form.contact_general_first_name.id_for_label }}"><span class="required">*</span> {% trans "First name" %}</label>
              {{ form.contact_general_first_name }}
              {{ form.contact_general_first_name.errors }}
            </div>
            <div class="form-field">
              <label for="{{ form.contact_general_last_name.id_for_label }}"><span class="required">*</span> {% trans "Last name" %}</label>
              {{ form.contact_general_last_name }}
              {{ form.contact_general_last_name.errors }}
            </div>
          </div>
          <div class="form-row">
            <div class="form-field">
              <label for="{{ form.contact_general_email.id_for_label }}"><span class="required">*</span> {% trans "Email" %}</label>
              {{ form.contact_general_email }}
              {{ form.contact_general_email.errors }}
            </div>
            <div class="form-field">
              <label for="{{ form.contact_general_phone.id_for_label }}"><span class="required">*</span> {% trans "Phone" %}</label>
              {{ form.contact_general_phone }}
              {{ form.contact_general_phone.errors }}
            </div>
          </div>
          <div class="form-row">
            <div class="form-field">
              <label for="{{ form.contact_general_job_title.id_for_label }}"><span class="required">*</span> {% trans "Job title" %}</label>
              {{ form.contact_general_job_title }}
              {{ form.contact_general_job_title.errors }}
            </div>
            <div class="form-field">
              <label for="{{ form.contact_general_address.id_for_label }}"><span class="required">*</span> {% trans "Address" %}</label>
              {{ form.contact_general_address }}
              {{ form.contact_general_address.errors }}
            </div>
          </div>
        </fieldset>

        <fieldset class="form-group" id="billing-section">
          <legend class="group-label">{% trans "Billing contact" %}</legend>
          <div class="form-field consent">
            <label class="checkbox-label">
              {{ form.contact_billing_same_as_general }}
              <span>{% trans "Same as main contact" %}</span>
            </label>
          </div>
          <div class="billing-fields">
            <div class="form-row">
              <div class="form-field">
                <label for="{{ form.contact_billing_first_name.id_for_label }}">{% trans "First name" %}</label>
                {{ form.contact_billing_first_name }}
                {{ form.contact_billing_first_name.errors }}
              </div>
              <div class="form-field">
                <label for="{{ form.contact_billing_last_name.id_for_label }}">{% trans "Last name" %}</label>
                {{ form.contact_billing_last_name }}
                {{ form.contact_billing_last_name.errors }}
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label for="{{ form.contact_billing_email.id_for_label }}">{% trans "Email" %}</label>
                {{ form.contact_billing_email }}
                {{ form.contact_billing_email.errors }}
              </div>
              <div class="form-field">
                <label for="{{ form.contact_billing_phone.id_for_label }}">{% trans "Phone" %}</label>
                {{ form.contact_billing_phone }}
                {{ form.contact_billing_phone.errors }}
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label for="{{ form.contact_billing_job_title.id_for_label }}">{% trans "Job title" %}</label>
                {{ form.contact_billing_job_title }}
                {{ form.contact_billing_job_title.errors }}
              </div>
              <div class="form-field">
                <label for="{{ form.contact_billing_address.id_for_label }}">{% trans "Address" %}</label>
                {{ form.contact_billing_address }}
                {{ form.contact_billing_address.errors }}
              </div>
            </div>
          </div>
        </fieldset>
      </div>

      {# ----- Step 3: Documents ----- #}
      <div class="form-step" data-step="2">
        <fieldset class="form-group">
          <legend class="group-label">{% trans "Supporting documents" %}</legend>
          <p class="fieldset-help">
            {% trans "Attach K-bis, VAT certificate, membership proofs, or other supporting documents. PDF, PNG, JPEG only — max 8 MB per file, 8 files total." %}
          </p>
          {{ attachment_formset.management_form }}
          {% if attachment_formset.non_form_errors %}
            <div class="alert alert-error">{{ attachment_formset.non_form_errors }}</div>
          {% endif %}
          <div class="attachment-rows">
            {% for sub in attachment_formset %}
              <div class="attachment-row form-row">
                <div class="form-field">
                  <label for="{{ sub.kind.id_for_label }}">{% trans "Document type" %}</label>
                  {{ sub.kind }}
                  {{ sub.kind.errors }}
                </div>
                <div class="form-field">
                  <label for="{{ sub.file.id_for_label }}">{% trans "File" %}</label>
                  {{ sub.file }}
                  {{ sub.file.errors }}
                </div>
              </div>
            {% endfor %}
          </div>
        </fieldset>
      </div>

      {# ----- Step 4: Confirm ----- #}
      <div class="form-step" data-step="3">
        <fieldset class="form-group">
          <legend class="group-label">{% trans "Review and confirm" %}</legend>
          <p class="fieldset-help">
            {% trans "Please review your organisation, contacts and documents above. When you submit, an operator will review your registration and get back to you by email." %}
          </p>
          <div class="form-field consent">
            <label class="checkbox-label">
              {{ form.optin_register }}
              <span><span class="required">*</span> {% trans "I accept the Terms and Conditions" %}</span>
            </label>
            {{ form.optin_register.errors }}
          </div>
        </fieldset>
      </div>

      <div class="step-nav">
        <button type="button" class="btn-step btn-step-back" data-action="prev">← {% trans "Back" %}</button>
        <button type="button" class="btn-step btn-step-next" data-action="next">{% trans "Next" %} →</button>
        <button type="submit" class="btn-apply" data-action="submit">{% trans "Submit registration" %}</button>
      </div>
    </form>
  </section>
</div>

<script src="{% static 'onboarding/onboarding.js' %}" defer></script>
{% endblock %}