{% extends 'base/layout.html' %}
{% load i18n %}

{% block title %}
  {% if object %}{% trans "Edit Field" %}{% else %}{% trans "Add Field" %}{% endif %}
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h1 class="h3 mb-0">
    <i class="mdi mdi-table-column-plus-after me-2"></i>
    {% if object %}{% trans "Edit Field" %}{% else %}{% trans "Add Field" %}{% endif %}
  </h1>
  <a href="{{ return_url }}" class="btn btn-outline-secondary btn-sm">
    <i class="mdi mdi-arrow-left me-1"></i>{% trans "Back" %}
  </a>
</div>

<div class="row justify-content-center">
  <div class="col-md-6">
    <div class="card mb-3">
      <h5 class="card-header">{% trans "Rulebook" %}</h5>
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-sm-4">{% trans "Rulebook" %}</dt>
          <dd class="col-sm-8">
            <a href="{{ rulebook.get_absolute_url }}">{{ rulebook }}</a>
          </dd>
        </dl>
      </div>
    </div>

    <div class="card">
      <h5 class="card-header">{% trans "Feld-Konfiguration" %}</h5>
      <div class="card-body">
        <form method="post">
          {% csrf_token %}
          <input type="hidden" name="rulebook" value="{{ rulebook.pk }}">

          {% if form.non_field_errors %}
            <div class="alert alert-danger">{{ form.non_field_errors }}</div>
          {% endif %}
          {% if form.errors %}
            <div class="alert alert-danger">
              <div class="fw-semibold mb-1">{% trans "Please correct the errors below." %}</div>
              <ul class="mb-0 small">
                {% for field, error_list in form.errors.items %}
                  {% if field != "__all__" %}
                    {% for error in error_list %}
                      <li><strong>{{ field }}</strong>: {{ error }}</li>
                    {% endfor %}
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          {% endif %}

          <div class="mb-3">
            <label class="form-label" for="{{ form.name.id_for_label }}">
              {% trans "Name" %} <span class="text-danger">*</span>
            </label>
            {{ form.name }}
            {% if form.name.errors %}<div class="text-danger small mt-1">{{ form.name.errors }}</div>{% endif %}
            {% if not object %}
            <div class="form-text">
              {% trans "The slug is generated automatically from the name (lowercase, letters and numbers only)." %}
            </div>
            <div class="form-text font-monospace text-muted small" id="nsm-field-slug-preview" hidden></div>
            {% endif %}
          </div>

          {% if form.slug %}
          <div class="mb-3">
            <label class="form-label" for="{{ form.slug.id_for_label }}">
              {% trans "Slug" %}
            </label>
            {{ form.slug }}
            {% if form.slug.errors %}<div class="text-danger small mt-1">{{ form.slug.errors }}</div>{% endif %}
            <div class="form-text">
              {% if object and object.is_system_field %}
              {% trans "Fixed internal identifier for this standard field." %}
              {% else %}
              {% trans "Set automatically when the field was created. Cannot be changed." %}
              {% endif %}
            </div>
          </div>
          {% endif %}

          <div class="mb-3">
            <label class="form-label" for="{{ form.sort_order.id_for_label }}">
              {% trans "Sort Order" %}
            </label>
            {{ form.sort_order }}
            {% if form.sort_order.errors %}<div class="text-danger small mt-1">{{ form.sort_order.errors }}</div>{% endif %}
            <div class="form-text">{% trans "Order of this column in the policy table (lower = further left)." %}</div>
          </div>

          <div class="mb-3 form-check">
            {{ form.visible }}
            <label class="form-check-label" for="{{ form.visible.id_for_label }}">
              {% trans "Visible in policy table" %}
            </label>
            {% if form.visible.errors %}
              <div class="text-danger small mt-1">{{ form.visible.errors }}</div>
            {% endif %}
          </div>

          {% if object and object.is_system_field %}
          <div class="mb-3">
            <label class="form-label" for="{{ form.placement.id_for_label }}">
              {% trans "Placement" %}
            </label>
            {{ form.placement }}
            <div class="form-text">{% trans "Fixed for standard policy table columns." %}</div>
          </div>
          <div class="alert alert-info py-2 small mb-3">
            {% trans "Standard fields can be renamed, reordered and hidden. Slug and placement are fixed." %}
          </div>
          {% else %}
          <div class="mb-3">
            <label class="form-label" for="{{ form.placement.id_for_label }}">
              {% trans "Placement" %} <span class="text-danger">*</span>
            </label>
            {{ form.placement }}
            {% if form.placement.errors %}<div class="text-danger small mt-1">{{ form.placement.errors }}</div>{% endif %}
            <div class="form-text">{{ form.placement.help_text }}</div>
          </div>
          {% endif %}

          {% if not object or not object.is_system_field %}
          {% if form.facet_mode %}
          <div class="mb-3">
            <label class="form-label" for="{{ form.facet_mode.id_for_label }}">
              {% trans "Facet filter" %}
            </label>
            {{ form.facet_mode }}
            {% if form.facet_mode.errors %}
              <div class="text-danger small mt-1">{{ form.facet_mode.errors }}</div>
            {% endif %}
            <div class="form-text">
              {% trans "Only for fields without sub-types. After adding a type, configure facets on each type row." %}
            </div>
          </div>
          {% elif object and object.has_subfield_types %}
          <div class="alert alert-secondary py-2 small mb-3">
            {% trans "Facet filters are configured on each sub-type (type row), not on this parent field." %}
          </div>
          {% endif %}
          <div class="mb-3">
            <label class="form-label" for="{{ form.max_visible_pills.id_for_label }}">
              {% trans "Max visible pills" %}
            </label>
            {{ form.max_visible_pills }}
            {% if form.max_visible_pills.errors %}
              <div class="text-danger small mt-1">{{ form.max_visible_pills.errors }}</div>
            {% endif %}
            <div class="form-text">
              {% if object and object.is_container_field %}
                {% trans "Applies to each sub-type column; shown on the type rows in the fields table." %}
              {% else %}
                {% trans "How many object pills to show per cell in the policy table. Further values are hidden behind +X until clicked." %}
              {% endif %}
            </div>
          </div>
          {% endif %}

          <div class="d-flex gap-2 mt-4">
            <button type="submit" class="btn btn-primary">
              <i class="mdi mdi-content-save me-1"></i>{% trans "Save" %}
            </button>
            <a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascript %}
{{ block.super }}
{% if not object %}
<script>
(function () {
  var nameInput = document.getElementById("{{ form.name.id_for_label }}");
  var preview = document.getElementById("nsm-field-slug-preview");
  if (!nameInput || !preview) return;

  function slugifyName(value) {
    var s = (value || "").trim().toLowerCase().replace(/[^a-z0-9]+/g, "_");
    s = s.replace(/_+/g, "_").replace(/^_|_$/g, "");
    return s || "x";
  }

  function updatePreview() {
    var slug = slugifyName(nameInput.value);
    if (!nameInput.value.trim()) {
      preview.hidden = true;
      preview.textContent = "";
      return;
    }
    preview.hidden = false;
    preview.textContent = "{% trans 'Slug' %}: " + slug;
  }

  nameInput.addEventListener("input", updatePreview);
  updatePreview();
})();
</script>
{% endif %}
{% endblock %}