{#
/**
 * @file
 * Template for Content X grid view (cards).
 *
 * Available variables:
 * - nodes: Array of node data.
 */
#}

{% if nodes %}
  <div class="content-x-grid">
    {% for node in nodes %}
      <article class="content-x-card{% if not node.status %} content-x-card--unpublished{% endif %}" data-node-id="{{ node.id }}">
        <a href="{{ node.preview_url ?: path('entity.node.canonical', {'node': node.id}) }}" class="content-x-card-thumbnail">
          {% if node.thumbnail %}
            <img src="{{ node.thumbnail }}" alt="{{ node.title }}" loading="lazy">
          {% else %}
            <div class="content-x-card-placeholder">
              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
            </div>
          {% endif %}
          <div class="content-x-card-status">
            {% if node.status %}
              <span class="content-x-card-badge content-x-card-badge--published">{{ 'Published'|t }}</span>
            {% else %}
              <span class="content-x-card-badge content-x-card-badge--unpublished">{{ 'Draft'|t }}</span>
            {% endif %}
          </div>
        </a>
        <div class="content-x-card-body">
          <div class="content-x-card-type">{{ node.type }}</div>
          <h3 class="content-x-card-title">
            <a href="{{ node.preview_url ?: path('entity.node.canonical', {'node': node.id}) }}">{{ node.title }}</a>
          </h3>
          <div class="content-x-card-meta">
            <span class="content-x-card-author">{{ node.author }}</span>
            <span class="content-x-card-separator">·</span>
            <span class="content-x-card-date" title="{{ node.changed|format_date('medium') }}">{{ node.changed_ago }} {{ 'ago'|t }}</span>
          </div>
          <div class="content-x-card-translations">
            {% for translation in node.translations %}
              {% if translation.exists %}
                <a href="{{ translation.edit_url }}?destination={{ destination|default('/nodehive/admin/content') }}"
                   class="content-x-lang-badge{% if not translation.status %} content-x-lang-badge--draft{% endif %}"
                   title="{{ translation.language }}{% if not translation.status %} ({{ 'Draft'|t }}){% endif %}">
                  {{ translation.langcode|upper }}
                </a>
              {% else %}
                <a href="{{ translation.add_url }}?destination={{ destination|default('/nodehive/admin/content') }}"
                   class="content-x-lang-badge content-x-lang-badge--missing"
                   title="{{ 'Add @language translation'|t({'@language': translation.language}) }}">
                  {{ translation.langcode|upper }}
                </a>
              {% endif %}
            {% endfor %}
          </div>
        </div>
        <div class="content-x-card-actions">
          {% if node.preview_url %}
            <a href="{{ node.preview_url }}" class="content-x-card-action" title="{{ 'Visual Editor'|t }}">
              <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">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </a>
          {% else %}
            <span class="content-x-card-action content-x-card-action--muted" title="{{ 'Visual Editor not available'|t }}">
              <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">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </span>
          {% endif %}
          <a href="{{ node.edit_url }}?destination={{ destination|default('/nodehive/admin/content') }}" class="content-x-card-action" title="{{ 'Edit'|t }}">
            <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">
              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
            </svg>
          </a>
          <a href="{{ node.delete_url }}" class="content-x-card-action content-x-card-action--danger" title="{{ 'Delete'|t }}">
            <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">
              <polyline points="3 6 5 6 21 6"></polyline>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
            </svg>
          </a>
        </div>
      </article>
    {% endfor %}
  </div>
{% else %}
  <div class="content-x-empty-state">
    <div class="content-x-empty-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
        <polyline points="13 2 13 9 20 9"></polyline>
      </svg>
    </div>
    <h3 class="content-x-empty-title">{{ 'No content found'|t }}</h3>
    <p class="content-x-empty-text">{{ 'Try adjusting your filters or create new content.'|t }}</p>
  </div>
{% endif %}
