{% extends 'workflows/base_shell.html' %}
{% load static i18n %}

{% block title %}{% trans "Einweisungs-Builder" %}{% endblock %}

{% block shell_header %}
{% include 'workflows/includes/app_header.html' with header_show_dashboard=1 header_show_home=1 header_inside_shell=1 %}
{% endblock %}



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

{% block shell_body %}
    <div class="page-stack">
    <header class="page-header">
      <div class="page-header-copy">
        <span class="page-eyebrow">{% trans "Administration" %}</span>
        <h1>{% trans "Einweisungs-Builder" %}</h1>
        <p class="page-subtitle">{% trans "Checklistenpunkte für das Einweisungs- und Übergabeprotokoll verwalten." %}</p>
      </div>
    </header>

    {% include 'workflows/includes/messages.html' %}

    <section class="intro-builder-shell app-editor-shell">
      <aside class="intro-builder-sidebar app-editor-sidebar">
        <section class="card intro-side-card app-sidebar-card">
          <span class="page-eyebrow intro-eyebrow">{% trans "Übersicht" %}</span>
          <div class="intro-side-stats app-stat-grid">
            <div class="intro-side-stat app-stat-card">
              <strong>{{ intro_summary.total_items }}</strong>
              <span>{% trans "Punkte gesamt" %}</span>
            </div>
            <div class="intro-side-stat app-stat-card">
              <strong>{{ intro_summary.active_items }}</strong>
              <span>{% trans "aktiv" %}</span>
            </div>
            <div class="intro-side-stat app-stat-card">
              <strong>{{ intro_summary.conditional_items }}</strong>
              <span>{% trans "mit Bedingung" %}</span>
            </div>
            <div class="intro-side-stat app-stat-card">
              <strong>{{ intro_summary.section_count }}</strong>
              <span>{% trans "genutzte Abschnitte" %}</span>
            </div>
          </div>
        </section>

        <nav class="app-module-nav intro-section-nav" aria-label="{% trans 'Abschnitte' %}">
          {% for group in grouped_items %}
          {% if group.count %}
          <a class="app-module-link intro-section-link" href="#intro-section-{{ group.key }}">{{ group.label }}</a>
          {% endif %}
          {% endfor %}
        </nav>
      </aside>

      <div class="intro-builder-main app-editor-main">
        <form class="card intro-builder-form-card" method="post" action="/admin-tools/intro-builder/">
          {% csrf_token %}
          <input type="hidden" name="builder_action" value="add_item" />
          <div class="surface-head intro-surface-head">
            <div>
              <h2>{% trans "Punkt hinzufügen" %}</h2>
              <p>{% trans "Neue Checklistenpunkte direkt in den passenden Abschnitt einfügen." %}</p>
            </div>
          </div>
          <div class="grid">
            <div class="field">
              <label for="section">{% trans "Abschnitt" %}</label>
              <select id="section" name="section">
                {% for value, label in section_choices %}
                <option value="{{ value }}">{{ label }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="field">
              <label for="label">{% trans "Checklistenpunkt (DE)" %}</label>
              <input id="label" name="label" placeholder="{% trans 'z. B. Nextcloud Ordnerstruktur erklärt' %}" required />
            </div>
            <div class="field">
              <label for="label_en">{% trans "Checklist item (EN)" %}</label>
              <input id="label_en" name="label_en" placeholder="{% trans 'e.g. Nextcloud folder structure explained' %}" />
            </div>
          </div>
          <div class="intro-builder-actions app-action-row">
            <button class="btn btn-primary" type="submit">{% trans "Punkt hinzufügen" %}</button>
            <span class="hint">{% trans "Bedingungen und Sortierung können anschließend im Editor gepflegt werden." %}</span>
          </div>
        </form>

        <form class="card intro-builder-list-card" method="post" action="/admin-tools/intro-builder/">
          {% csrf_token %}
          <input type="hidden" name="builder_action" value="save_items" />
          <div class="surface-head intro-surface-head">
            <div>
              <h2>{% trans "Checkliste bearbeiten" %}</h2>
              <p>{% trans "Punkte pro Abschnitt pflegen, Bedingungen setzen und aktive Einträge steuern." %}</p>
            </div>
          </div>

          <div class="intro-group-stack">
            {% for group in grouped_items %}
            <section class="intro-group-card" id="intro-section-{{ group.key }}">
              <div class="intro-group-head">
                <div>
                  <h3>{{ group.label }}</h3>
                  <p class="mini">{% blocktrans trimmed with count=group.count active=group.active_count %}{{ count }} Punkte, {{ active }} aktiv{% endblocktrans %}</p>
                </div>
              </div>

              {% if group.items %}
              <div class="intro-item-list">
                {% for item in group.items %}
                <article class="intro-item-card">
                  <input type="hidden" name="item_ids" value="{{ item.id }}" />
                  <div class="intro-item-head">
                    <strong>{{ item.label }}</strong>
                    <div class="intro-item-actions">
                      <label class="intro-inline-check">
                        <input type="checkbox" name="active_{{ item.id }}" {% if item.is_active %}checked{% endif %} />
                        <span>{% trans "Aktiv" %}</span>
                      </label>
                      <button class="btn btn-secondary" type="submit" name="delete_item_id" value="{{ item.id }}" data-confirm="{% trans 'Checklistenpunkt wirklich löschen?' %}">{% trans "Löschen" %}</button>
                    </div>
                  </div>

                  <div class="intro-item-grid">
                    <label class="field intro-item-field">
                      <span>{% trans "Sortierung" %}</span>
                      <div class="branding-inline-value">{{ item.sort_order|add:1 }}</div>
                    </label>
                    <label class="field intro-item-field">
                      <span>{% trans "Abschnitt" %}</span>
                      <select name="section_{{ item.id }}">
                        {% for value, label in section_choices %}
                        <option value="{{ value }}" {% if item.section == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                      </select>
                    </label>
                    <label class="field intro-item-field intro-item-field-wide">
                      <span>{% trans "Checklistenpunkt (DE)" %}</span>
                      <input type="text" name="label_{{ item.id }}" value="{{ item.label }}" required />
                    </label>
                    <label class="field intro-item-field intro-item-field-wide">
                      <span>{% trans "Checklistenpunkt (EN)" %}</span>
                      <input type="text" name="label_en_{{ item.id }}" value="{{ item.label_en }}" />
                    </label>
                    <label class="field intro-item-field">
                      <span>{% trans "Feld-Bedingung" %}</span>
                      <select name="field_{{ item.id }}">
                        {% for value, label in condition_field_choices %}
                        <option value="{{ value }}" {% if item.condition_field == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                      </select>
                    </label>
                    <label class="field intro-item-field">
                      <span>{% trans "Operator" %}</span>
                      <select name="operator_{{ item.id }}">
                        {% for value, label in operator_choices %}
                        <option value="{{ value }}" {% if item.condition_operator == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                      </select>
                    </label>
                    <label class="field intro-item-field intro-item-field-wide">
                      <span>{% trans "Wert" %}</span>
                      <input type="text" name="value_{{ item.id }}" value="{{ item.condition_value }}" placeholder="{% trans 'z. B. HR Works' %}" />
                    </label>
                  </div>
                </article>
                {% endfor %}
              </div>
              {% else %}
              <div class="builder-empty-state">{% trans "Noch keine Punkte in diesem Abschnitt." %}</div>
              {% endif %}
            </section>
            {% endfor %}
          </div>

          <div class="intro-builder-actions intro-builder-actions-sticky app-action-row is-sticky">
            <button class="btn btn-primary" type="submit">{% trans "Checkliste speichern" %}</button>
            <span class="hint">{% trans "Die Reihenfolge folgt aktuell der gespeicherten Listenreihenfolge innerhalb der Abschnitte." %}</span>
          </div>
        </form>
      </div>
    </section>
    </div>
{% endblock %}