{#
/**
 * @file
 * Template for the NodeHive sitemap visualization.
 *
 * Available variables:
 * - space: The space entity.
 * - sitemap_data: Array of sitemap data.
 */
#}

<div class="nodehive-sitemap">
  <div class="sitemap-header">
    <h2>{{ 'Sitemap for @space'|t({'@space': space.label.value}) }}</h2>
    <p class="sitemap-description">{{ 'Visual representation of the website structure showing menus and content hierarchy.'|t }}</p>
  </div>

  <div class="sitemap-container">
    {% if sitemap_data %}
      {% for section in sitemap_data %}
        <div class="sitemap-section sitemap-section--{{ section.type }}">
          <div class="section-header">
            <h3 class="section-title">
              {% if section.type == 'menu' %}
                <span class="section-icon">📋</span>
              {% elseif section.type == 'orphaned' %}
                <span class="section-icon">📄</span>
              {% elseif section.type == 'info' %}
                <span class="section-icon">ℹ️</span>
              {% endif %}
              {{ section.label }}
            </h3>
            {% if section.type == 'menu' %}
              <div class="section-actions">
                <a href="/admin/structure/menu/manage/{{ section.id }}?destination=/space/{{ space.id.value }}/sitemap" class="section-edit-link">
                  ✏️ {{ 'Edit Menu'|t }}
                </a>
              </div>
            {% endif %}
          </div>

          {% if section.type == 'info' and section.message %}
            <div class="info-section">
              <p>{{ section.message|raw }}</p>
            </div>
          {% elseif section.type == 'orphaned' and section.children %}
            <div class="orphaned-content-section">
              <div class="orphaned-search-container">
                <input type="text" id="orphaned-search" class="orphaned-search" placeholder="{{ 'Search content...'|t }}" />
                <div class="search-results-info">
                  <span id="search-results-count"></span>
                </div>
              </div>
              <div class="orphaned-content-table">
                {{ _self.render_orphaned_table(section.children) }}
              </div>
            </div>
          {% elseif section.children %}
            <div class="sitemap-tree">
              {{ _self.render_tree(section.children) }}
            </div>
          {% else %}
            <div class="empty-section">
              <p>{{ 'No content found in this section.'|t }}</p>
            </div>
          {% endif %}
        </div>
      {% endfor %}
    {% else %}
      <div class="empty-sitemap">
        <p>{{ 'No sitemap data available for this space.'|t }}</p>
        <p>{{ 'Make sure the space has menus and content configured.'|t }}</p>
      </div>
    {% endif %}
  </div>
</div>

{# Recursive macro to render the tree structure #}
{% macro render_tree(items) %}
  {% if items %}
    <ul class="sitemap-list">
      {% for item in items %}
        <li class="sitemap-item sitemap-item--{{ item.type }}">
          {% if item.type == 'node' %}
            <div class="node-card">
              <div class="node-card-header">
                <h4 class="node-title">
                  <a href="{{ item.view_url }}" target="_blank">{{ item.title }}</a>
                </h4>
                <div class="node-status node-status--{{ item.status }}">
                  {% if item.status == 'published' %}
                    <span class="status-indicator">🟢</span>
                  {% else %}
                    <span class="status-indicator">🔴</span>
                  {% endif %}
                  {{ item.status|capitalize }}
                </div>
              </div>

              <div class="node-card-body">
                <div class="node-meta">
                  <div class="content-type">
                    <span class="content-type-badge content-type-badge--{{ item.content_type_machine }}">
                      {{ item.content_type }}
                    </span>
                  </div>
                  <div class="node-slug">
                    <code class="slug">{{ item.slug }}</code>
                  </div>
                </div>

                <div class="node-actions">
                  <a href="{{ item.edit_url }}" class="action-link action-link--edit">
                    ✏️ {{ 'Edit'|t }}
                  </a>
                  <a href="{{ item.view_url }}" target="_blank" class="action-link action-link--view">
                    👁️ {{ 'View'|t }}
                  </a>
                </div>
              </div>
            </div>
          {% else %}
            <div class="menu-item">
              <div class="menu-item-header">
                <span class="menu-item-title">{{ item.title }}</span>
                {% if item.url and item.url != '#' %}
                  <span class="menu-item-url">
                    <code>{{ item.url }}</code>
                  </span>
                {% endif %}
              </div>
            </div>
          {% endif %}

          {% if item.children %}
            <div class="sitemap-children">
              {{ _self.render_tree(item.children) }}
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

{# Macro to render orphaned content as a table grouped by content type #}
{% macro render_orphaned_table(content_types) %}
  {% if content_types %}
    <div class="orphaned-table-container">
      <table class="orphaned-content-table">
        <thead>
          <tr>
            {% for content_type_key, content_type_data in content_types %}
              <th class="content-type-column">
                <div class="content-type-header">
                  <span class="content-type-badge content-type-badge--{{ content_type_data.machine_name }}">
                    {{ content_type_data.label }}
                  </span>
                  <span class="content-count">({{ content_type_data.nodes|length }})</span>
                </div>
              </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          <tr>
            {% for content_type_key, content_type_data in content_types %}
              <td class="content-type-column">
                <div class="content-type-nodes">
                  {% for node in content_type_data.nodes %}
                    <div class="node-card node-card--table">
                      <div class="node-card-header">
                        <h4 class="node-title">
                          <a href="{{ node.view_url }}" target="_blank">{{ node.title }}</a>
                        </h4>
                        <div class="node-status node-status--{{ node.status }}">
                          {% if node.status == 'published' %}
                            <span class="status-indicator">🟢</span>
                          {% else %}
                            <span class="status-indicator">🔴</span>
                          {% endif %}
                        </div>
                      </div>

                      <div class="node-card-body">
                        <div class="node-meta">
                          <div class="node-slug">
                            <code class="slug">{{ node.slug }}</code>
                          </div>
                        </div>

                        <div class="node-actions">
                          <a href="{{ node.edit_url }}" class="action-link action-link--edit">
                            ✏️ {{ 'Edit'|t }}
                          </a>
                          <a href="{{ node.view_url }}" target="_blank" class="action-link action-link--view">
                            👁️ {{ 'View'|t }}
                          </a>
                        </div>
                      </div>
                    </div>
                  {% endfor %}
                </div>
              </td>
            {% endfor %}
          </tr>
        </tbody>
      </table>
    </div>
  {% endif %}
{% endmacro %}
