{% load i18n %}
<section class="layout-demarche layout-demarche--highlighted layout-demarche--serial">
  <div class="layout-flex">
    <div class="layout-left">
      <h2 class="layout-demarche__title">{% trans 'Tracking Code' %}</h2>
    </div>
    <div class="layout-right">
      <div class="layout-demarche__description">

Un code de suivi — indiqué en haut des formulaires — peut être associé à vos
demandes. Il vous facilite les échanges avec les services et permet aussi de
reprendre une démarche interrompue. Pour retrouver une demande disposant d’un
code de suivi, indiquez ce dernier ci-dessous :

      </div>
      <div class="generic-form">
        <form data-wcs-url="{{ url }}" method="post" action="{{ site_base }}{% url 'wcs-tracking-code' %}">
          <input name="cell" value="{{ cell.id }}" type="hidden"/>
          <div class="form-group">
            <div class="form-field">
              <input required aria-label="{% trans "Tracking Code" %}" id="tracking-code" name="code" placeholder="{% trans 'ex: CNPHNTFB' %}"/>
            </div>
            <div class="form-actions">
              <button class="btn-square--filled--core" type="submit"><span class="flexbox"><span class="btn-text">Valider</span><span class="btn-arrow"></span></span></button>
            </div>
          </div>
          <div id="_cell_error_{{ cell.id }}" class="errornotice" style="display: none">
            {% trans "The tracking code could not been found." %}
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<script>
  $(function() {
    $('#_cell_url_{{ cell.id }}').val(window.location);
    if (window.location.search.indexOf('unknown-tracking-code') != -1) {
      $('#_cell_error_{{ cell.id }}').show();
    }
  });
</script>
