{% extends "onboarding/wizard/_shell.html" %}
{% block title %}Supporting documents - TAMIS{% endblock %}
{% block section_main %}
<div class="tam-section-pane__header">
  <span class="tam-section-pane__chip">4</span>
  <h2 class="tam-h2">Supporting documents</h2>
</div>
<p class="tam-section-pane__subtitle">Generic - the list isn't fixed. PDF, PNG, JPEG.</p>
{% if messages %}
  {% for message in messages %}
    <p class="tam-flash tam-flash--{% if message.tags == 'error' %}danger{% else %}warn{% endif %}">{{ message }}</p>
  {% endfor %}
{% endif %}
<ul class="tam-doc-list">
  {% for att in attachments %}
    <li class="tam-doc-item" data-staged-id="{{ att.id }}">
      <div>
        <div class="tam-doc-item__title">{{ att.get_kind_display }}</div>
        <div class="tam-doc-item__file">{{ att.original_filename }}</div>
      </div>
      <div class="tam-doc-item__actions">
        <span class="tam-doc-item__check" aria-label="Staged">&#10003;</span>
        <form method="post" action="{% url 'onboarding-wizard-attachment-unstage' staged_id=att.id %}" class="tam-doc-item__remove-form">
          {% csrf_token %}
          <button type="submit" class="tam-doc-item__remove" aria-label="Remove">&times;</button>
        </form>
      </div>
    </li>
  {% endfor %}
</ul>
<button type="button" class="tam-doc-add" data-action="add-doc" data-target="#tam-doc-add-form">+ Add another document</button>
<form id="tam-doc-add-form" class="tam-doc-add-form" method="post" enctype="multipart/form-data"
      action="{% url 'onboarding-wizard-attachment-stage' %}" hidden>
  {% csrf_token %}
  <div class="tam-field">
    <label>Document type <span class="tam-required">*</span></label>
    <select class="tam-input" name="kind" required>
      <option value="">-</option>
      <option value="k_bis">K-bis / registration extract</option>
      <option value="vat_cert">VAT certificate</option>
      <option value="procirep_proof">PROCIREP membership proof</option>
      <option value="isan_proof">ISAN membership proof</option>
      <option value="other">Other supporting document</option>
    </select>
  </div>
  <div class="tam-field">
    <label>File <span class="tam-required">*</span></label>
    <input class="tam-input" type="file" name="file" required accept=".pdf,.png,.jpg,.jpeg">
  </div>
  <button class="tam-btn tam-btn--secondary" type="submit">Upload</button>
</form>
<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 %}
  {% include "onboarding/wizard/_actions.html" %}
</form>
{% endblock %}