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

{% 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 %}

      <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>

      <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 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>

      <button type="submit" class="btn-apply">{% trans "Submit registration" %}</button>
    </form>
  </section>
</div>

<script>
  (function () {
    var section = document.getElementById('billing-section');
    if (!section) return;
    var checkbox = section.querySelector('input[name="contact_billing_same_as_general"]');
    var fields = section.querySelector('.billing-fields');
    if (!checkbox || !fields) return;
    var inputs = fields.querySelectorAll('input, textarea');
    function sync() {
      var hide = checkbox.checked;
      fields.style.display = hide ? 'none' : '';
      inputs.forEach(function (input) {
        if (hide) input.removeAttribute('required');
      });
    }
    checkbox.addEventListener('change', sync);
    sync();
  })();
</script>
{% endblock %}