{% extends "adminpanel/base.html" %}
{% block title %}{{ page_title }} — admin{% endblock %}
{% block heading %}{{ page_title }}{% endblock %}

{% block content %}
<div class="pane" style="max-width:880px">
  <a class="back" href="{{ back_url }}">&larr; Back</a>

  <form method="post" novalidate enctype="multipart/form-data">{% csrf_token %}
    {% for section in sections %}
    <div class="panel">
      <div class="panel-h"><h2>{{ section.title }}</h2></div>
      <div class="panel-b">
        {% for field in section.fields %}
          {% if field.kind == "checkbox" %}
            <label style="display:flex;align-items:center;gap:10px;padding:9px 0">
              <input type="checkbox" name="{{ field.name }}" style="width:auto" {% if field.value %}checked{% endif %}>
              <span>{{ field.label }}</span></label>
          {% else %}
            <div class="field">
              <label for="{{ field.name }}">{{ field.label }}</label>
              {% if field.kind == "textarea" %}
                <textarea id="{{ field.name }}" name="{{ field.name }}" style="min-height:110px"
                  placeholder="{{ field.placeholder|default:'' }}">{{ field.value }}</textarea>
              {% elif field.kind == "select" %}
                <select id="{{ field.name }}" name="{{ field.name }}"
                  {% if field.slugify_target %}data-slug-source="1"{% endif %}>
                  {% if field.blank_label %}<option value="">{{ field.blank_label }}</option>{% endif %}
                  {% for value, label in field.options %}
                    <option value="{{ value }}" {% if field.value == value %}selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              {% elif field.kind == "date" %}
                <input id="{{ field.name }}" name="{{ field.name }}" type="date" value="{{ field.value }}">
              {% elif field.kind == "number" %}
                <input id="{{ field.name }}" name="{{ field.name }}" type="number" value="{{ field.value }}"
                  {% if field.min is not None %}min="{{ field.min }}"{% endif %}
                  {% if field.max %}max="{{ field.max }}"{% endif %}>
              {% elif field.kind == "file" %}
                <input id="{{ field.name }}" name="{{ field.name }}" type="file">
              {% else %}
                <input id="{{ field.name }}" name="{{ field.name }}"
                  type="{% if field.kind == 'email' %}email{% elif field.kind == 'url' %}url{% else %}text{% endif %}"
                  value="{{ field.value }}" placeholder="{{ field.placeholder|default:'' }}"
                  {% if field.slugify_from %}data-slug-from="{{ field.slugify_from }}"{% endif %}>
              {% endif %}
              {% if field.help %}<p class="hint">{{ field.help }}</p>{% endif %}
              {% if field.error %}<p class="hint" style="color:var(--warn)">{{ field.error }}</p>{% endif %}
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
    {% endfor %}

    {% block extra_panels %}{% endblock %}

    <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px">
      <button class="btn btn-primary">{{ submit_label|default:"Save" }}</button>
      <a href="{{ back_url }}" class="btn">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}

{% block scripts %}
<script>
document.querySelectorAll('[data-slug-from]').forEach(function (slug) {
  var source = document.getElementById(slug.dataset.slugFrom);
  if (!source || slug.value) return;
  source.addEventListener('input', function () {
    slug.value = source.value.toLowerCase().trim()
      .replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
  });
});
</script>
{% endblock %}