{% extends "passerelle/manage/resource_child_base.html" %}
{% load i18n gadjo %}

{% block breadcrumb %}
  <li class="ariane--list-item">
    <a class="ariane--link" href="{% url 'manage-home' %}">{% trans 'Web Services' %}</a>
  </li>
  <li class="ariane--list-item">
    <a class="ariane--link" href="{{ object.get_absolute_url }}">PDF &mdash; {{ object.title }}</a>
  </li>
  <li class="ariane--list-item">
    <a class="ariane--link" aria-current="page">{% trans "Edit fields mapping" %}</a>
  </li>
{% endblock %}

{% block appbar %}
  <h2>
    {% trans "Edit fields mapping" %}
  </h2>
{% endblock %}

{% block content %}
  <form method="post" enctype="multipart/form-data" class="pdf-fields-mapping-edit-form">
    {% csrf_token %}
    <div class="buttons pdf-fields-mapping-edit-form--buttons">
      <button class="submit-button">{% trans "Save" %}</button>
      <a class="cancel" href="{{ object.get_absolute_url }}">{% trans 'Cancel' %}</a>
    </div>
    {% if form.errors %}
      <div class="errornotice" tabindex="-1" autofocus>
        <p class="pk-notice--title">{% trans "Error" %}</p>
        <p>{% trans "There were errors processing your form." %}</p>
        {% for error in form.non_field_errors %}
          <p>{{ error }}</p>
        {% endfor %}
        {% for field in form %}
          {% if field.is_hidden and field.errors %}
            <p>
              {% for error in field.errors %}
                {% blocktrans with name=field.name %}(Hidden field {{name}}) {{ error }}{% endblocktrans %}
                {% if not forloop.last %}<br>{% endif %}
              {% endfor %}
            </p>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}
    {% for page_number, image_map in pages %}
      <h3>{% blocktrans with number=page_number|add:1 %}Page {{number}}{% endblocktrans %}</h3>
      <div class="pdf-fields-mapping-edit-form--page">
        <div class="pdf-fields-mapping-edit-form--thumbnail">
          <div>
            <map name="map-page-{{ page_number }}">
              {{ image_map|safe }}
            </map>
            <img src="{% url "pdf-page-thumbnail" connector="pdf" slug=object.slug page_number=page_number %}?hash={{ object.pdf_hash }}" usemap="#map-page-{{ page_number }}">
          </div>
        </div>
        <div class="pdf-fields-mapping-edit-form--fields">
          {% for field in form %}
            {% if field.field.page_number == page_number %}
              {% include "gadjo/widget.html" with field=field %}
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endfor %}
    <div class="buttons pdf-fields-mapping-edit-form--buttons">
      <button class="submit-button">{% trans "Save" %}</button>
      <a class="cancel" href="{{ object.get_absolute_url }}">{% trans 'Cancel' %}</a>
    </div>
  </form>
  <script>
    $(document).on('click', 'area', function (event) {
      var $target = $(event.target);
      var href = $target.attr('href');
      $('.pdf-fields-mapping-edit-form--fields').scrollTop = $(href).offsetTop;
      $(href + ' input').focus();
    })
  </script>
{% endblock %}