{% extends "base_edit.html" %}
{% load static %}

{% block title %}Edit {{ webform.title }}{% endblock %}

{% block extra_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'webform/webform.css' %}">
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script src="{% static 'webform/webform-builder.js' %}" defer></script>
{% endblock %}

{% block content %}
<main class="webform-editor">
  <div class="webform-editor__header">
    <div>
      <h1>{{ webform.title }}</h1>
      {% if back_url %}<p><a href="{{ back_url }}">Back</a></p>{% endif %}
    </div>
    {% if submissions_url %}
    <div class="webform-editor__actions">
      <a class="button" href="{{ submissions_url }}">Submissions</a>
      {% if export_url %}<a class="button" href="{{ export_url }}">Export</a>{% endif %}
    </div>
    {% endif %}
  </div>

  <form method="post" class="webform-editor__form">
    {% csrf_token %}

    <section class="webform-editor__panel webform-editor__panel--settings">
      <h2>Settings</h2>
      {{ settings_form.non_field_errors }}
      {% for field in settings_form %}
      <div class="webform-editor__field">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {{ field }}
        {% if field.help_text %}<p class="webform-help">{{ field.help_text }}</p>{% endif %}
        {{ field.errors }}
      </div>
      {% endfor %}
    </section>

    <div class="webform-editor__fields-col">
      <section class="webform-editor__panel">
        <div class="webform-editor__panel-head">
          <h2>Fields</h2>
          <button type="button" class="button" data-add-field>Add field</button>
        </div>
        {{ field_formset.management_form }}
        <div id="webform-fields" class="webform-editor__fields">
          {% for form in field_formset %}
          {% include "webform/includes/builder_field.html" with field_form=form %}
          {% endfor %}
        </div>
        <template id="empty-field-template">
          {% include "webform/includes/builder_field.html" with field_form=field_formset.empty_form %}
        </template>
      </section>

      <div class="webform-editor__footer">
        <button type="submit" class="button">Save webform</button>
      </div>
    </div>

  </form>
</main>
{% endblock %}