{#
/**
 * @file
 * Template for Content X overview page.
 *
 * Available variables:
 * - nodes: Array of node data.
 * - node_types: Array of node types.
 * - node_type_counts: Array of node counts per content type.
 * - languages: Array of enabled languages.
 * - authors: Array of content authors.
 * - spaces: Array of NodeHive spaces.
 * - space_content_types: Mapping of space IDs to allowed content type IDs.
 * - filters: Current filter values.
 */
#}

{# Space to content types mapping for JavaScript filtering #}
<script id="space-content-types-data" type="application/json">{{ space_content_types|json_encode|raw }}</script>

{# Hidden form for htmx includes #}
<form id="content-x-filter-form" class="content-x-hidden-form">
  <input type="hidden" name="type" id="hidden-type" value="{{ filters.type }}">
  <input type="hidden" name="view" id="hidden-view" value="dense">
  <input type="hidden" name="display_lang" id="hidden-display-lang" value="{{ filters.display_lang }}">
  <input type="hidden" name="status" id="hidden-status" value="{{ filters.status }}">
  <input type="hidden" name="author" id="hidden-author" value="{{ filters.author }}">
  <input type="hidden" name="space" id="hidden-space" value="{{ filters.space }}">
  <input type="hidden" name="page" id="hidden-page" value="{{ filters.page|default(0) }}">
  <input type="hidden" name="limit" id="hidden-limit" value="{{ filters.limit|default(25) }}">
</form>

{# Main search bar - full width above layout #}
<div class="content-x-search-bar">
  <div class="content-x-search-group">
    {% if spaces|length > 0 and not hide_space_filter %}
    {# Space filter #}
    <select id="filter-space"
            class="content-x-group-select"
            hx-get="/nodehive/admin/content/filter"
            hx-target="#content-x-content-area"
            hx-trigger="change"
            hx-include="#filter-title, #hidden-type, #hidden-view, #hidden-display-lang, #hidden-status, #hidden-author"
            hx-indicator=".htmx-indicator"
            name="space">
      {% if show_all_spaces %}
        <option value="">{{ 'All spaces'|t }}</option>
        <option value="__none__"{% if filters.space == '__none__' %} selected{% endif %}>{{ 'No space'|t }}</option>
      {% endif %}
      {% if space_groups.active|length > 0 %}
        <optgroup label="{{ 'Active'|t }}">
          {% for space_id, space_label in space_groups.active %}
            <option value="{{ space_id }}"{% if filters.space == space_id ~ '' %} selected{% endif %}>{{ space_label }}</option>
          {% endfor %}
        </optgroup>
      {% endif %}
      {% if space_groups.disabled|length > 0 %}
        <optgroup label="{{ 'Disabled'|t }}">
          {% for space_id, space_label in space_groups.disabled %}
            <option value="{{ space_id }}"{% if filters.space == space_id ~ '' %} selected{% endif %}>{{ space_label }}</option>
          {% endfor %}
        </optgroup>
      {% endif %}
    </select>
    {% endif %}
    {# Author filter #}
    <select id="filter-author"
            class="content-x-group-select"
            hx-get="/nodehive/admin/content/filter"
            hx-target="#content-x-content-area"
            hx-trigger="change"
            hx-include="#filter-title, #hidden-type, #hidden-view, #hidden-display-lang, #hidden-status, #hidden-space"
            hx-indicator=".htmx-indicator"
            name="author">
      <option value="">{{ 'All authors'|t }}</option>
      {% for author_id, author_name in authors %}
        <option value="{{ author_id }}"{% if filters.author == author_id ~ '' %} selected{% endif %}>{{ author_name }}</option>
      {% endfor %}
    </select>
    <div class="content-x-toolbar-search">
      <svg class="content-x-search-icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <path d="m21 21-4.3-4.3"></path>
      </svg>
      <input type="search"
             name="title"
             id="filter-title"
             class="content-x-search-input"
             value="{{ filters.title }}"
             placeholder="{{ 'Search content...'|t }}"
             hx-get="/nodehive/admin/content/filter"
             hx-target="#content-x-content-area"
             hx-trigger="keyup changed delay:300ms"
             hx-include="#hidden-type, #hidden-view, #hidden-display-lang, #hidden-status, #hidden-author, #hidden-space"
             hx-indicator=".htmx-indicator">
    </div>
  </div>
</div>

{# Controls row - two column layout #}
<div class="content-x-controls-wrapper">
  <div class="content-x-controls-spacer">
    <button type="button" class="content-x-quick-add-btn" id="content-x-quick-add-trigger">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="5" x2="12" y2="19"></line>
        <line x1="5" y1="12" x2="19" y2="12"></line>
      </svg>
      {{ 'Quick add'|t }}
    </button>
  </div>
  <div class="content-x-toolbar-controls-row">
    <div class="content-x-results-count" id="content-x-results-count">
      <strong>{{ pager.total_items }}</strong> {{ 'items'|t }}
    </div>
    <div class="content-x-toolbar-controls">
    {# Status filter #}
    <div class="content-x-status-switcher">
      <button type="button"
              class="content-x-status-btn{% if filters.status == '' %} is-active{% endif %}"
              data-status=""
              hx-get="/nodehive/admin/content/filter"
              hx-target="#content-x-content-area"
              hx-include="#filter-title, #hidden-type, #hidden-view, #hidden-display-lang, #hidden-author, #hidden-space"
              hx-vals='{"status": ""}'
              hx-indicator=".htmx-indicator">
        {{ 'All'|t }}
      </button>
      <button type="button"
              class="content-x-status-btn{% if filters.status == '1' %} is-active{% endif %}"
              data-status="1"
              hx-get="/nodehive/admin/content/filter"
              hx-target="#content-x-content-area"
              hx-include="#filter-title, #hidden-type, #hidden-view, #hidden-display-lang, #hidden-author, #hidden-space"
              hx-vals='{"status": "1"}'
              hx-indicator=".htmx-indicator">
        {{ 'Published'|t }}
      </button>
      <button type="button"
              class="content-x-status-btn{% if filters.status == '0' %} is-active{% endif %}"
              data-status="0"
              hx-get="/nodehive/admin/content/filter"
              hx-target="#content-x-content-area"
              hx-include="#filter-title, #hidden-type, #hidden-view, #hidden-display-lang, #hidden-author, #hidden-space"
              hx-vals='{"status": "0"}'
              hx-indicator=".htmx-indicator">
        {{ 'Unpublished'|t }}
      </button>
    </div>
    {# Language switcher #}
    <div class="content-x-lang-switcher">
      <button type="button"
              class="content-x-lang-btn{% if filters.display_lang == '' %} is-active{% endif %}"
              data-lang=""
              hx-get="/nodehive/admin/content/filter"
              hx-target="#content-x-content-area"
              hx-include="#filter-title, #hidden-type, #hidden-status, #hidden-view, #hidden-author, #hidden-space"
              hx-vals='{"display_lang": ""}'
              hx-indicator=".htmx-indicator"
              title="{{ 'All languages'|t }}">
        {{ 'All'|t }}
      </button>
      {% for langcode, lang_name in languages %}
        <button type="button"
                class="content-x-lang-btn{% if filters.display_lang == langcode %} is-active{% endif %}"
                data-lang="{{ langcode }}"
                hx-get="/nodehive/admin/content/filter"
                hx-target="#content-x-content-area"
                hx-include="#filter-title, #hidden-type, #hidden-status, #hidden-view, #hidden-author, #hidden-space"
                hx-vals='{"display_lang": "{{ langcode }}"}'
                hx-indicator=".htmx-indicator"
                title="{{ lang_name }}">
          {{ langcode|upper }}
        </button>
      {% endfor %}
    </div>
    {# View switcher #}
    <div class="content-x-view-switcher">
      <button type="button" class="content-x-view-btn is-active" data-view="dense" title="{{ 'Dense table'|t }}">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="3" y1="5" x2="21" y2="5"></line>
          <line x1="3" y1="9" x2="21" y2="9"></line>
          <line x1="3" y1="13" x2="21" y2="13"></line>
          <line x1="3" y1="17" x2="21" y2="17"></line>
        </svg>
      </button>
      <button type="button" class="content-x-view-btn" data-view="list" title="{{ 'List view'|t }}">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
      <button type="button" class="content-x-view-btn" data-view="grid" title="{{ 'Grid view'|t }}">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="7" height="7"></rect>
          <rect x="14" y="3" width="7" height="7"></rect>
          <rect x="3" y="14" width="7" height="7"></rect>
          <rect x="14" y="14" width="7" height="7"></rect>
        </svg>
      </button>
    </div>
    {# Items per page #}
    <select id="filter-limit"
            class="content-x-limit-select"
            hx-get="/nodehive/admin/content/filter"
            hx-target="#content-x-content-area"
            hx-trigger="change"
            hx-include="#filter-title, #hidden-type, #hidden-view, #hidden-display-lang, #hidden-status, #hidden-author, #hidden-space"
            hx-indicator=".htmx-indicator"
            name="limit">
      <option value="10"{% if filters.limit == 10 %} selected{% endif %}>10</option>
      <option value="25"{% if filters.limit == 25 %} selected{% endif %}>25</option>
      <option value="50"{% if filters.limit == 50 %} selected{% endif %}>50</option>
      <option value="100"{% if filters.limit == 100 %} selected{% endif %}>100</option>
    </select>
    </div>
  </div>
</div>

<div class="content-x-layout">
  {# Left sidebar with filters #}
  <aside class="content-x-sidebar">
    <div class="content-x-sidebar-section">
      <div class="content-x-sidebar-header">
        <h3 class="content-x-sidebar-title">{{ 'Content Types'|t }}</h3>
      </div>
      <ul class="content-x-filter-list">
        <li class="content-x-filter-list-item{% if filters.type == '' %} is-active{% endif %}">
          <a href="#"
             class="content-x-filter-link"
             hx-get="/nodehive/admin/content/filter"
             hx-target="#content-x-content-area"
             hx-include="#filter-title, #hidden-status, #hidden-view, #hidden-display-lang, #hidden-author, #hidden-space"
             hx-vals='{"type": ""}'
             hx-indicator=".htmx-indicator"
             data-type="">
            <span class="content-x-filter-name">{{ 'All'|t }}</span>
            <span id="content-x-count-all" class="content-x-filter-count">{{ node_type_counts._total }}</span>
          </a>
        </li>
        {% for type_id, type_label in node_types %}
          <li class="content-x-filter-list-item{% if filters.type == type_id %} is-active{% endif %}">
            <a href="#"
               class="content-x-filter-link"
               hx-get="/nodehive/admin/content/filter"
               hx-target="#content-x-content-area"
               hx-include="#filter-title, #hidden-status, #hidden-view, #hidden-display-lang, #hidden-author, #hidden-space"
               hx-vals='{"type": "{{ type_id }}"}'
               hx-indicator=".htmx-indicator"
               data-type="{{ type_id }}">
              <span class="content-x-filter-name">{{ type_label }}</span>
              <span id="content-x-count-{{ type_id }}" class="content-x-filter-count">{{ node_type_counts[type_id] ?? 0 }}</span>
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>

    <div class="content-x-sidebar-section">
      <button type="button" class="content-x-reset-btn" onclick="window.location.href='/nodehive/admin/content'">
        {{ 'Reset filters'|t }}
      </button>
    </div>

    <div class="htmx-indicator">
      <span class="loading">{{ 'Loading...'|t }}</span>
    </div>
  </aside>

  {# Main content area #}
  <main class="content-x-main">
    {# Content area (list, grid, or dense table) #}
    <div id="content-x-content-area">
      <div id="content-x-list-wrapper" class="is-hidden">
        {% include '@nodehive_content/content-x-table.html.twig' with {'nodes': nodes, 'destination': destination} %}
      </div>
      <div id="content-x-grid-wrapper" class="is-hidden">
        {% include '@nodehive_content/content-x-grid.html.twig' with {'nodes': nodes, 'destination': destination} %}
      </div>
      <div id="content-x-dense-wrapper">
        {% include '@nodehive_content/content-x-dense.html.twig' with {'nodes': nodes, 'destination': destination, 'node_spaces': node_spaces, 'show_spaces_column': node_spaces|length > 0} %}
      </div>
      {% include '@nodehive_content/content-x-pager.html.twig' with {'pager': pager} %}
    </div>
  </main>
</div>

{# Quick Add Modal #}
<div class="content-x-modal" id="content-x-quick-add-modal">
  <div class="content-x-modal__backdrop"></div>
  <div class="content-x-modal__content">
    <div class="content-x-modal__header">
      <h3 class="content-x-modal__title">{{ 'Quick add content'|t }}</h3>
      <button type="button" class="content-x-modal__close" aria-label="{{ 'Close'|t }}">&times;</button>
    </div>
    <div class="content-x-modal__body">
      <div class="content-x-modal__field">
        <label class="content-x-modal__label" for="quick-add-title">{{ 'Title'|t }} <span class="required">*</span></label>
        <input type="text" id="quick-add-title" class="content-x-modal__input" required placeholder="{{ 'Enter title...'|t }}">
      </div>
      {% if space_groups.active|length > 0 %}
      <div class="content-x-modal__field">
        <label class="content-x-modal__label" for="quick-add-space">{{ 'Space'|t }} <span class="required">*</span></label>
        <select id="quick-add-space" class="content-x-modal__select" required>
          <option value="">{{ '- Select space -'|t }}</option>
          {% for space_id, space_label in space_groups.active %}
            <option value="{{ space_id }}">{{ space_label }}</option>
          {% endfor %}
        </select>
      </div>
      {% endif %}
      <div class="content-x-modal__field">
        <label class="content-x-modal__label" for="quick-add-type">{{ 'Content type'|t }} <span class="required">*</span></label>
        <select id="quick-add-type" class="content-x-modal__select" required{% if space_groups.active|length > 0 %} disabled{% endif %}>
          <option value="">{{ '- Select space first -'|t }}</option>
          {% for type_id, type_label in node_types %}
            <option value="{{ type_id }}" data-type-id="{{ type_id }}">{{ type_label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="content-x-modal__field">
        <label class="content-x-modal__label" for="quick-add-author">{{ 'Author'|t }}</label>
        <select id="quick-add-author" class="content-x-modal__select">
          <option value="">{{ '- Current user -'|t }}</option>
          {% for author_id, author_name in authors %}
            <option value="{{ author_id }}">{{ author_name }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="content-x-modal__footer">
      <button type="button" class="content-x-modal__cancel">{{ 'Cancel'|t }}</button>
      <button type="button" class="content-x-modal__save" id="quick-add-save">{{ 'Create'|t }}</button>
    </div>
  </div>
</div>
