{% extends "wcs/base.html" %}
{% load i18n qommon %}

{% block extra-body-class %}
  {{ block.super }}
  page-formdata-status
{% endblock %}

{% block columns-top %}
  <p id="form-backlink" class="backlink">
    <a href="javascript:window.history.back()">Retour à la page précédente</a>
  </p>
{% endblock %}

{% block content %}
  <div id="rub_service">
    {{session_message|safe}}

    {% with workflow_messages=view.workflow_messages %}
      {% if workflow_messages %}
        {{ workflow_messages|safe }}
      {% endif %}
    {% endwith %}

    <div class="form-top">
      {% include "includes/form-operator.html" %}
      <div class="form-top--title">
        {% if title %}<h1>{{ title }}</h1>{% endif %}
      </div>
      {% if form.tracking_code %}
        <ul class="form-top--metadata">
          <!-- Fin de traitement estimée le ... -->
          {% if form.tracking_code %}
            <li class="form-top--metadata--tracking-code">Code de suivi : {{ form.tracking_code }}</li>
          {% endif %}
        </ul>
      {% endif %}
    </div>

    <div class="pk-tabs">
      <div class="pk-tabs--tab-list" role="tablist" aria-orientation="horizontal">
        <h2><button aria-controls="panel-history" aria-selected="true" id="tab-history" role="tab" tabindex="0">Suivi<span class="tab-title-long"> de la demande</span></button></h2>
        <h2><button aria-controls="panel-summary" aria-selected="false" id="tab-summary" role="tab" tabindex="-1">Résumé<span class="tab-title-long"> de la demande</span></button></h2>
      </div>
      <div class="pk-tabs--container">
        <div aria-labelledby="tab-history" id="panel-history" role="tabpanel" tabindex="0">

          {% include "wcs/front/formdata_history.html" %}
        </div>
        <div aria-labelledby="tab-summary" hidden id="panel-summary" role="tabpanel" tabindex="0">
          <div id="summary-fields">
            {{ view.display_fields|safe }}
          </div> <!-- intro -->
        </div>
      </div>
    </div>
    <script>
      $(function() {
        $('#panel-summary').on('gadjo:tab-selected', function() {
          $('#panel-summary .qommon-map').trigger('qommon:invalidate')
        })
      })
    </script>

  </div>

{% endblock %}