{% extends "onboarding/wizard/_shell.html" %}
{% block title %}Contacts — TAMIS{% endblock %}
{% block section_main %}
<div class="tam-section-pane__header">
  <span class="tam-section-pane__chip">3</span>
  <h2 class="tam-h2">Contacts</h2>
</div>
<p class="tam-section-pane__subtitle">Main contact, plus billing.</p>
<form class="tam-form" method="post" action="{% url 'onboarding-wizard-section-submit' section_key=section_key %}"
      data-save-url="{% url 'onboarding-wizard-section-save' section_key=section_key %}">
  {% csrf_token %}
  <div class="tam-subhead">Main contact</div>
  <div class="tam-field-grid tam-field-grid--2col">
    <div class="tam-field">
      <label>Name <span class="tam-required">*</span></label>
      {{ form.contact_general_name }}
      {{ form.contact_general_name.errors }}
    </div>
    <div class="tam-field">
      <label>Role <span class="tam-required">*</span></label>
      {{ form.contact_general_role }}
      {{ form.contact_general_role.errors }}
    </div>
  </div>
  <div class="tam-field">
    <label>Email <span class="tam-required">*</span></label>
    {{ form.contact_general_email }}
    {{ form.contact_general_email.errors }}
  </div>
  <div class="tam-field">
    <label>Phone</label>
    {{ form.contact_general_phone }}
    {{ form.contact_general_phone.errors }}
  </div>
  <label class="tam-checkbox-tile">{{ form.contact_billing_same_as_general }}<span>Billing contact same as main</span></label>
  <div id="billing-fields" hidden>
    <div class="tam-subhead">Billing contact</div>
    <div class="tam-field-grid tam-field-grid--2col">
      <div class="tam-field">
        <label>Name <span class="tam-required">*</span></label>
        {{ form.contact_billing_name }}
        {{ form.contact_billing_name.errors }}
      </div>
      <div class="tam-field">
        <label>Role</label>
        {{ form.contact_billing_role }}
        {{ form.contact_billing_role.errors }}
      </div>
    </div>
    <div class="tam-field">
      <label>Email <span class="tam-required">*</span></label>
      {{ form.contact_billing_email }}
      {{ form.contact_billing_email.errors }}
    </div>
    <div class="tam-field">
      <label>Phone</label>
      {{ form.contact_billing_phone }}
      {{ form.contact_billing_phone.errors }}
    </div>
  </div>
  {% include "onboarding/wizard/_actions.html" %}
</form>
{% endblock %}