{% extends "admin/base_site.html" %}
{% block content %}
<main class="cms-editor">
  <style>
    .cms-editor { max-width: 72rem; margin-inline: auto; padding: 1rem; }
    .cms-editor h1 { font-size: 1.5rem; margin-block: .5rem 1rem; }
    .cms-editor fieldset { border: 1px solid #b9c7c9; border-radius: .6rem; padding: 1rem; margin-block: 1rem; min-width: 0; }
    .cms-editor legend { font-weight: 700; padding-inline: .35rem; }
    .cms-editor .field { display: grid; gap: .25rem; margin-block: .75rem; }
    .cms-editor input:not([type=checkbox]), .cms-editor textarea, .cms-editor select { box-sizing: border-box; max-width: 100%; width: min(100%, 42rem); padding: .6rem; border: 1px solid #8da5a9; border-radius: .35rem; background: #fff; color: #24383b; }
    .cms-editor input:focus-visible, .cms-editor textarea:focus-visible, .cms-editor select:focus-visible { outline: 2px solid #067c80; outline-offset: 2px; }
    .cms-editor label { font-weight: 600; }
    .cms-editor input:disabled { background: #edf2f2; color: #4b5f63; }
    .cms-editor input[type=checkbox] { width: 1.2rem; height: 1.2rem; }
    .cms-editor .errorlist { color: #9a2020; }
    .cms-editor button { min-height: 2.6rem; padding: .5rem .8rem; border: 1px solid #076e73; border-radius: .35rem; background: #076e73; color: #fff; font-weight: 700; cursor: pointer; }
    .cms-editor button:hover { background: #055b60; }
    .cms-editor .entry { border-top: 1px solid #dce3e4; margin-block: .8rem; padding-block: .8rem; }
  </style>
  <h1>{{ title }}</h1>
  <p>Saving creates a new draft revision. The published content stays at revision {% if target.published_revision %}{{ target.published_revision.number }}{% else %}none{% endif %}.</p>
  <form method="post" novalidate>
    {% csrf_token %}
    <input type="hidden" name="base_revision_id" value="{{ base.pk|default_if_none:'' }}">
    {{ form.non_field_errors }}
    <fieldset>
      <legend>{% if is_page %}Page text and SEO{% else %}Site identity, navigation, and contacts{% endif %}</legend>
      {% for field in form %}<div class="field">{{ field.label_tag }}{{ field }}{{ field.errors }}</div>{% endfor %}
    </fieldset>
    {% if is_page %}
      {% for key, section_form, entry_set in sections %}
        <fieldset>
          <legend>{{ section_form.title }}</legend>
          {% if key == 'featured_events' or key == 'featured_posts' %}<p>Cards are loaded from the existing event or blog API.</p>{% endif %}
          {% if key == 'contact' %}<p>Contact details come from the site identity.</p>{% endif %}
          {{ section_form.non_field_errors }}
          {% for field in section_form %}<div class="field">{{ field.label_tag }}{{ field }}{{ field.errors }}</div>{% endfor %}
          {% if entry_set %}
            <h3>Entries</h3>
            {{ entry_set.management_form }}{{ entry_set.non_form_errors }}
            <div id="entry-list-{{ key }}">
              {% for entry_form in entry_set %}<div class="entry">{{ entry_form.non_field_errors }}{% for field in entry_form %}<div class="field">{{ field.label_tag }}{{ field }}{{ field.errors }}</div>{% endfor %}</div>{% endfor %}
            </div>
            <template id="entry-empty-{{ key }}"><div class="entry">{% for field in entry_set.empty_form %}<div class="field">{{ field.label_tag }}{{ field }}</div>{% endfor %}</div></template>
            <button type="button" data-entry-add="{{ key }}">Add entry</button>
          {% endif %}
        </fieldset>
      {% endfor %}
    {% endif %}
    <button type="submit">Save new draft</button>
  </form>
  <script>
    document.querySelectorAll('[data-entry-add]').forEach(function (button) {
      button.addEventListener('click', function () {
        var key = button.getAttribute('data-entry-add');
        var count = document.getElementById('id_entries_' + key + '-TOTAL_FORMS');
        if (Number(count.value) >= 20) return;
        var template = document.getElementById('entry-empty-' + key);
        document.getElementById('entry-list-' + key).insertAdjacentHTML('beforeend', template.innerHTML.replaceAll('__prefix__', count.value));
        count.value = String(Number(count.value) + 1);
      });
    });
  </script>
</main>
{% endblock %}