{% 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"><span class="required">*</span> {% trans "Contact" %}</legend>
        <div class="form-row">
          <div class="form-field">
            <label for="{{ form.firstname.id_for_label }}">{% trans "First name" %}</label>
            {{ form.firstname }}
            {{ form.firstname.errors }}
          </div>
          <div class="form-field">
            <label for="{{ form.lastname.id_for_label }}">{% trans "Last name" %}</label>
            {{ form.lastname }}
            {{ form.lastname.errors }}
          </div>
        </div>
        <div class="form-field">
          <label for="{{ form.email.id_for_label }}"><span class="required">*</span> {% trans "Email" %}</label>
          {{ form.email }}
          {{ form.email.errors }}
        </div>
        <div class="form-row">
          <div class="form-field">
            <label for="{{ form.phone.id_for_label }}">{% trans "Phone" %}</label>
            {{ form.phone }}
            {{ form.phone.errors }}
          </div>
          <div class="form-field">
            <label for="{{ form.job.id_for_label }}">{% trans "Job" %}</label>
            {{ form.job }}
            {{ form.job.errors }}
          </div>
        </div>
        <div class="form-field">
          <label for="{{ form.title.id_for_label }}">{% trans "Title" %}</label>
          {{ form.title }}
          {{ form.title.errors }}
        </div>
      </fieldset>

      <fieldset class="form-group">
        <legend class="group-label"><span class="required">*</span> {% trans "Organisation" %}</legend>
        <div class="form-field">
          <label for="{{ form.organization_name.id_for_label }}"><span class="required">*</span> {% trans "Organisation name" %}</label>
          {{ form.organization_name }}
          {{ form.organization_name.errors }}
        </div>
        <div class="form-field">
          <label for="{{ form.organization_address.id_for_label }}">{% trans "Address" %}</label>
          {{ form.organization_address }}
          {{ form.organization_address.errors }}
        </div>
        <div class="form-field">
          <label for="{{ form.organization_registration_number.id_for_label }}">{% trans "Registration number" %}</label>
          {{ form.organization_registration_number }}
          {{ form.organization_registration_number.errors }}
        </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"><span class="required">*</span> {% trans "Participant types" %}</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 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>
{% endblock %}