{#
/**
 * @file
 * Template for Content X fragments list view.
 */
#}

{% if fragments %}
  <div class="content-x-list">
    {% for fragment in fragments %}
      <article class="content-x-row{% if not fragment.status %} content-x-row--unpublished{% endif %}">
        <a href="{{ fragment.edit_url }}?destination={{ destination|default('/nodehive/admin/content/fragments') }}" class="content-x-row-image">
          <div class="content-x-row-placeholder">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="3" y1="9" x2="21" y2="9"></line>
              <line x1="9" y1="21" x2="9" y2="9"></line>
            </svg>
          </div>
        </a>
        <div class="content-x-row-content">
          <div class="content-x-row-header">
            <h3 class="content-x-row-title">
              <a href="{{ fragment.edit_url }}?destination={{ destination|default('/nodehive/admin/content/fragments') }}">{{ fragment.title }}</a>
            </h3>
            {% if not fragment.status %}
              <span class="content-x-row-draft">{{ 'Disabled'|t }}</span>
            {% endif %}
          </div>
          <div class="content-x-row-meta">
            <span class="content-x-row-type">{{ fragment.type }}</span>
            <span class="content-x-row-sep">&middot;</span>
            <span class="content-x-row-author">{{ fragment.author }}</span>
            <span class="content-x-row-sep">&middot;</span>
            <span class="content-x-row-date" title="{{ fragment.changed|format_date('medium') }}">{{ fragment.changed_ago }} {{ 'ago'|t }}</span>
          </div>
          <div class="content-x-row-translations">
            {% for translation in fragment.translations %}
              {% if translation.exists %}
                <a href="{{ translation.edit_url }}?destination={{ destination|default('/nodehive/admin/content/fragments') }}"
                   class="content-x-lang-badge{% if not translation.status %} content-x-lang-badge--draft{% endif %}"
                   title="{{ translation.language }}{% if not translation.status %} ({{ 'Disabled'|t }}){% endif %}">
                  {{ translation.langcode|upper }}
                </a>
              {% else %}
                <a href="{{ translation.add_url }}?destination={{ destination|default('/nodehive/admin/content/fragments') }}"
                   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-row-actions">
          <a href="{{ fragment.edit_url }}?destination={{ destination|default('/nodehive/admin/content/fragments') }}" class="content-x-row-btn" title="{{ 'Edit'|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">
              <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>
        </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">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
        <line x1="3" y1="9" x2="21" y2="9"></line>
        <line x1="9" y1="21" x2="9" y2="9"></line>
      </svg>
    </div>
    <h3 class="content-x-empty-title">{{ 'No fragments found'|t }}</h3>
    <p class="content-x-empty-text">{{ 'Try adjusting your filters or create a new fragment.'|t }}</p>
  </div>
{% endif %}
