{% extends 'base.html' %}
{% block content %}
<div class="toolbar">
  <h1>{{ t('app.categories') }}</h1>
  <div class="toolbar-actions">
    <button type="button" class="button button-secondary" id="category-bulk-edit-button"
            data-base-label="✏ {{ t('categories.bulk.edit', 'Feld ändern')|e }}" disabled>
      ✏ {{ t('categories.bulk.edit', 'Feld ändern') }}
    </button>
    <button type="button" class="button button-secondary" id="category-fields-button"
            data-base-label="⚙ {{ t('categories.fields.manage', 'Felder verwalten')|e }}" disabled>
      ⚙ {{ t('categories.fields.manage', 'Felder verwalten') }}
    </button>
    <button type="submit" class="button button-secondary" form="category-bulk-form" id="activate-defaults-button"
            data-base-label="✓ {{ t('categories.activate_default_fields', 'Standardfelder aktivieren')|e }}" disabled>
      ✓ {{ t('categories.activate_default_fields', 'Standardfelder aktivieren') }}
    </button>
    <a class="button" href="/categories/new">{{ t('categories.create') }}</a>
  </div>
</div>

<form id="category-bulk-form" method="post" action="/categories/activate-default-fields"></form>

<dialog id="category-bulk-edit-dialog">
  <form id="category-bulk-edit-form" method="post" action="/categories/bulk-edit" enctype="multipart/form-data">
    <div class="dialog-heading">
      <h2>{{ t('categories.bulk.dialog_title', 'Markierte Kategorien ändern') }}</h2>
      <button type="button" class="icon-button" data-dialog-close aria-label="{{ t('common.cancel') }}">×</button>
    </div>
    <p id="category-bulk-selected-count" class="muted"></p>
    <span id="category-bulk-edit-ids"></span>
    <label>{{ t('categories.bulk.field', 'Feld') }}
      <select name="field_name" id="category-bulk-field" required>
        <option value="description">{{ t('common.description') }}</option>
        <option value="name" id="category-name-option">{{ t('common.name') }}</option>
        <option value="image">{{ t('categories.bulk.image', 'Kategoriebild') }}</option>
      </select>
    </label>
    <p id="category-name-hint" class="muted">{{ t('categories.bulk.name_hint', 'Der Name kann nur geändert werden, wenn genau eine Kategorie markiert ist.') }}</p>
    <label id="category-text-value-wrap">{{ t('categories.bulk.value', 'Neuer Inhalt') }}
      <textarea name="field_value" id="category-bulk-value" rows="4"></textarea>
    </label>
    <label id="category-image-value-wrap" hidden>{{ t('categories.bulk.image', 'Kategoriebild') }}
      <input type="file" name="image" accept="image/*">
      <span class="muted">{{ t('categories.bulk.image_hint', 'Dasselbe Bild wird allen markierten Kategorien zugewiesen.') }}</span>
    </label>
    <label class="checkbox-label"><input class="checkbox" type="checkbox" name="clear_value" id="category-bulk-clear"> {{ t('categories.bulk.clear', 'Ausgewähltes Feld leeren') }}</label>
    <div class="form-actions">
      <button type="button" class="button button-secondary" data-dialog-close>{{ t('common.cancel') }}</button>
      <button type="submit">💾 {{ t('common.save') }}</button>
    </div>
  </form>
</dialog>

<dialog id="category-fields-dialog" class="wide-dialog">
  <form id="category-fields-form" method="post" action="/categories/bulk-fields">
    <div class="dialog-heading">
      <h2>{{ t('categories.fields.manage', 'Felder verwalten') }}</h2>
      <button type="button" class="icon-button" data-fields-dialog-close aria-label="{{ t('common.cancel') }}">×</button>
    </div>
    <p id="category-fields-selected-count" class="muted"></p>
    <span id="category-fields-ids"></span>

    <div class="dialog-tabs" role="tablist" aria-label="{{ t('categories.fields.manage', 'Felder verwalten') }}">
      <button type="button" class="button button-secondary category-fields-tab is-active" data-operation="add">{{ t('categories.fields.add', 'Hinzufügen') }}</button>
      <button type="button" class="button button-secondary category-fields-tab" data-operation="remove">{{ t('categories.fields.remove', 'Entfernen') }}</button>
      <button type="button" class="button button-secondary category-fields-tab" data-operation="settings">{{ t('categories.fields.settings', 'Einstellungen ändern') }}</button>
      <button type="button" class="button button-secondary category-fields-tab" data-operation="copy">{{ t('categories.fields.copy', 'Übernehmen') }}</button>
    </div>
    <input type="hidden" name="operation" id="category-fields-operation" value="add">

    <section class="category-fields-panel" data-panel="add">
      <p class="muted">{{ t('categories.fields.add_help', 'Die ausgewählten Felder werden in allen markierten Kategorien aktiviert. Bereits vorhandene Zuordnungen bleiben erhalten.') }}</p>
      <div class="field-choice-grid">
        {% for definition in definitions %}
        <label class="checkbox-label"><input class="checkbox" type="checkbox" name="field_ids" value="{{ definition.id }}"> {{ t(definition.translation_key, definition.label) }}</label>
        {% endfor %}
      </div>
    </section>

    <section class="category-fields-panel" data-panel="remove" hidden>
      <p class="muted">{{ t('categories.fields.remove_help', 'Die ausgewählten Felder werden in allen markierten Kategorien deaktiviert. Vorhandene Assetdaten bleiben erhalten. Das Namensfeld kann nicht entfernt werden.') }}</p>
      <div class="field-choice-grid">
        {% for definition in definitions if definition.field_name != 'name' %}
        <label class="checkbox-label"><input class="checkbox" type="checkbox" name="field_ids" value="{{ definition.id }}" disabled> {{ t(definition.translation_key, definition.label) }}</label>
        {% endfor %}
      </div>
    </section>

    <section class="category-fields-panel" data-panel="settings" hidden>
      <p class="muted">{{ t('categories.fields.settings_help', 'Die Einstellungen werden nur für Kategorien geändert, in denen das Feld aktiv ist.') }}</p>
      <label>{{ t('categories.bulk.field', 'Feld') }}
        <select name="field_definition_id">
          <option value="">{{ t('common.select', 'Auswählen') }}</option>
          {% for definition in definitions %}<option value="{{ definition.id }}">{{ t(definition.translation_key, definition.label) }}</option>{% endfor %}
        </select>
      </label>
      <div class="settings-bulk-grid">
        <label class="checkbox-label"><input class="checkbox" type="checkbox" name="apply_required"> {{ t('categories.fields.change_required', 'Pflichtfeld-Einstellung ändern') }}</label>
        <label class="checkbox-label"><input class="checkbox" type="checkbox" name="required_value"> {{ t('categories.required') }}</label>
        <label class="checkbox-label"><input class="checkbox" type="checkbox" name="apply_show_in_list"> {{ t('categories.fields.change_list', 'Listenanzeige ändern') }}</label>
        <label class="checkbox-label"><input class="checkbox" type="checkbox" name="show_in_list_value"> {{ t('categories.in_list') }}</label>
      </div>
    </section>

    <section class="category-fields-panel" data-panel="copy" hidden>
      <p class="muted">{{ t('categories.fields.copy_help', 'Die komplette Feldzuordnung und deren Einstellungen werden aus einer vorhandenen Kategorie auf alle markierten Kategorien übernommen. Nicht in der Vorlage aktive Felder werden in den Zielkategorien deaktiviert; Assetdaten bleiben erhalten.') }}</p>
      <label>{{ t('categories.fields.source', 'Vorlagenkategorie') }}
        <select name="source_category_id">
          <option value="">{{ t('common.select', 'Auswählen') }}</option>
          {% for c in categories %}<option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}
        </select>
      </label>
      <div class="notice warning">{{ t('categories.fields.copy_warning', 'Die Feldkonfiguration der markierten Kategorien wird an die Vorlage angeglichen. Kategorienamen, Beschreibungen, Bilder und Assets werden nicht verändert.') }}</div>
    </section>

    <div class="form-actions">
      <button type="button" class="button button-secondary" data-fields-dialog-close>{{ t('common.cancel') }}</button>
      <button type="submit">💾 {{ t('common.save') }}</button>
    </div>
  </form>
</dialog>

<div class="table-scroll management-table-scroll">
<table class="data-table categories-table">
  <thead>
    <tr>
      <th class="selection-column" data-no-sort="1" data-no-filter="1">
        <input type="checkbox" id="select-all-categories" aria-label="{{ t('categories.select_all', 'Alle Kategorien markieren') }}">
      </th>
      <th>{{ t('common.name') }}</th>
      <th>{{ t('common.assets') }}</th>
      <th>{{ t('categories.fields_total', 'Felder gesamt') }}</th>
      <th>{{ t('categories.active_fields') }}</th>
      <th>{{ t('categories.list_fields', 'In Liste') }}</th>
      <th>{{ t('categories.attributes', 'Aktive Attribute') }}</th>
      <th data-no-filter="1" data-no-sort="1">{{ t('common.actions') }}</th>
    </tr>
  </thead>
  <tbody>
    {% for c in categories %}
    {% set count = asset_counts.get(c.id, 0) %}
    {% set active_fields = c.visible_fields|selectattr('active')|list %}
    {% set list_fields = active_fields|selectattr('show_in_list')|list %}
    <tr>
      <td class="selection-column">
        <input class="category-select" type="checkbox" form="category-bulk-form" name="category_ids" value="{{ c.id }}"
               aria-label="{{ c.name|e }} {{ t('common.select', 'markieren') }}">
      </td>
      <td>{{ c.name }}</td>
      <td>{{ count }}</td>
      <td>{{ c.visible_fields|length }}</td>
      <td>{{ active_fields|length }}</td>
      <td>{{ list_fields|length }}</td>
      <td class="category-attributes">
        {% for field in active_fields %}
          <span class="attribute-chip{% if field.show_in_list %} attribute-chip-list{% endif %}" title="{{ t('categories.shown_in_list', 'In Liste sichtbar') if field.show_in_list else t('categories.active_only', 'Aktiv, aber nicht in Liste sichtbar') }}">{{ field_label(field) }}</span>
        {% else %}
          <span class="muted">{{ t('categories.no_active_fields', 'Keine aktiven Felder') }}</span>
        {% endfor %}
      </td>
      <td class="category-actions">
        <div class="action-buttons">
          <a class="button button-secondary" href="/categories/{{ c.id }}/edit" title="{{ t('common.edit') }}">{{ t('common.edit') }}</a>
          <button type="submit" class="button button-secondary" form="duplicate-category-{{ c.id }}" title="{{ t('common.duplicate') }}">{{ t('common.duplicate') }}</button>
          <button type="submit" class="button button-danger" form="delete-category-{{ c.id }}"
                  {% if count > 0 %}disabled title="{{ t('categories.in_use', 'Kategorie wird noch verwendet') }}"{% else %}title="{{ t('common.delete') }}"{% endif %}>
            {{ t('common.delete') }}
          </button>
        </div>
        <form id="duplicate-category-{{ c.id }}" method="post" action="/categories/{{ c.id }}/duplicate"></form>
        <form id="delete-category-{{ c.id }}" method="post" action="/categories/{{ c.id }}/delete"
              onsubmit="return confirm('{{ t('categories.confirm_delete', 'Kategorie wirklich löschen? Das ist nur möglich, wenn sie von keinem Asset verwendet wird.')|e }}');"></form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>

<script>
(() => {
  const boxes = [...document.querySelectorAll('.category-select')];
  const all = document.getElementById('select-all-categories');
  const defaultsButton = document.getElementById('activate-defaults-button');
  const editButton = document.getElementById('category-bulk-edit-button');
  const fieldsButton = document.getElementById('category-fields-button');
  const fieldsDialog = document.getElementById('category-fields-dialog');
  const fieldsIds = document.getElementById('category-fields-ids');
  const fieldsSelectedCount = document.getElementById('category-fields-selected-count');
  const fieldsOperation = document.getElementById('category-fields-operation');
  const dialog = document.getElementById('category-bulk-edit-dialog');
  const editIds = document.getElementById('category-bulk-edit-ids');
  const selectedCount = document.getElementById('category-bulk-selected-count');
  const fieldSelect = document.getElementById('category-bulk-field');
  const nameOption = document.getElementById('category-name-option');
  const nameHint = document.getElementById('category-name-hint');
  const textWrap = document.getElementById('category-text-value-wrap');
  const imageWrap = document.getElementById('category-image-value-wrap');
  const clearBox = document.getElementById('category-bulk-clear');

  const visibleBoxes = () => boxes.filter(box => !box.closest('tr')?.hidden && getComputedStyle(box.closest('tr')).display !== 'none');
  const selectedBoxes = () => boxes.filter(box => box.checked);

  function refresh() {
    const selected = selectedBoxes();
    const count = selected.length;
    const visible = visibleBoxes();
    const visibleSelected = visible.filter(box => box.checked).length;
    const defaultsLabel = defaultsButton.dataset.baseLabel || '✓ {{ t('categories.activate_default_fields', 'Standardfelder aktivieren')|e }}';
    const fieldsLabel = fieldsButton.dataset.baseLabel || '⚙ {{ t('categories.fields.manage', 'Felder verwalten')|e }}';
    const editLabel = editButton.dataset.baseLabel || '✏ {{ t('categories.bulk.edit', 'Feld ändern')|e }}';
    defaultsButton.disabled = count === 0;
    defaultsButton.textContent = count ? `${defaultsLabel} (${count})` : defaultsLabel;
    fieldsButton.disabled = count === 0;
    fieldsButton.textContent = count ? `${fieldsLabel} (${count})` : fieldsLabel;
    editButton.disabled = count === 0;
    editButton.textContent = count ? `${editLabel} (${count})` : editLabel;
    all.checked = visible.length > 0 && visibleSelected === visible.length;
    all.indeterminate = visibleSelected > 0 && visibleSelected < visible.length;
  }

  function updateFieldUi() {
    const isImage = fieldSelect.value === 'image';
    imageWrap.hidden = !isImage;
    textWrap.hidden = isImage;
    clearBox.checked = false;
  }

  boxes.forEach(box => box.addEventListener('change', refresh));
  all?.addEventListener('change', () => {
    visibleBoxes().forEach(box => box.checked = all.checked);
    refresh();
  });

  editButton?.addEventListener('click', () => {
    const selected = selectedBoxes();
    if (!selected.length) return;
    editIds.replaceChildren(...selected.map(box => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'category_ids';
      input.value = box.value;
      return input;
    }));
    const countTemplate = {{ t('categories.bulk.selected_count', '{count} Kategorien ausgewählt')|tojson }};
    selectedCount.textContent = countTemplate.replace('{count}', selected.length);
    nameOption.disabled = selected.length !== 1;
    nameHint.hidden = selected.length === 1;
    if (nameOption.disabled && fieldSelect.value === 'name') fieldSelect.value = 'description';
    updateFieldUi();
    dialog.showModal();
  });

  fieldsButton?.addEventListener('click', () => {
    const selected = selectedBoxes();
    if (!selected.length) return;
    fieldsIds.replaceChildren(...selected.map(box => {
      const input = document.createElement('input');
      input.type = 'hidden'; input.name = 'category_ids'; input.value = box.value;
      return input;
    }));
    const countTemplate = {{ t('categories.bulk.selected_count', '{count} Kategorien ausgewählt')|tojson }};
    fieldsSelectedCount.textContent = countTemplate.replace('{count}', selected.length);
    fieldsDialog.showModal();
  });

  function selectFieldsOperation(operation) {
    fieldsOperation.value = operation;
    fieldsDialog.querySelectorAll('.category-fields-tab').forEach(button => button.classList.toggle('is-active', button.dataset.operation === operation));
    fieldsDialog.querySelectorAll('.category-fields-panel').forEach(panel => panel.hidden = panel.dataset.panel !== operation);
    // Only controls in the active panel are submitted. This prevents duplicate
    // field_ids from the add/remove panels.
    fieldsDialog.querySelectorAll('.category-fields-panel').forEach(panel => {
      panel.querySelectorAll('input, select, textarea').forEach(control => control.disabled = panel.dataset.panel !== operation);
    });
  }
  fieldsDialog?.querySelectorAll('.category-fields-tab').forEach(button => button.addEventListener('click', () => selectFieldsOperation(button.dataset.operation)));
  fieldsDialog?.querySelectorAll('[data-fields-dialog-close]').forEach(button => button.addEventListener('click', () => fieldsDialog.close()));
  selectFieldsOperation('add');

  fieldSelect?.addEventListener('change', updateFieldUi);
  dialog?.querySelectorAll('[data-dialog-close]').forEach(button => button.addEventListener('click', () => dialog.close()));

  // Table filters can change row visibility without changing checkboxes. Keep the
  // selection state consistent whenever the shared table tools signal activity.
  document.addEventListener('input', event => {
    if (event.target.closest('.categories-table')) requestAnimationFrame(refresh);
  });
  document.addEventListener('change', event => {
    if (event.target.closest('.categories-table')) requestAnimationFrame(refresh);
  });
  refresh();
})();
</script>
{% endblock %}