{% extends "base.html" %}
{% from "macros.html" import icon, btn, badge, media_card %}
{% block title %}{{ t('Media Manager') }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">{{ t('Media Manager') }}</h1>
    <p class="page-subtitle">
      {% if folder_view %}
        {{ total }} {{ t('files') }} · {{ media_folder_label or media_folder or t('Uncategorized') }}
      {% else %}
        {{ files | length }} {{ t('files uploaded') }}
      {% endif %}
    </p>
  </div>
  <div class="page-actions">
    {% if folder_view %}
      <a href="{{ admin_prefix }}/media" class="btn btn-ghost btn-sm" data-spa>
        {{ icon('arrow-left', 14) }} <span style="margin-left:4px">{{ t('All folders') }}</span>
      </a>
    {% endif %}
    <form action="{{ admin_prefix }}/media/upload" method="POST" enctype="multipart/form-data" class="upload-form" id="upload-form">
      {{ request.csrf_input() }}
      <label class="btn btn-primary btn-sm" style="cursor:pointer">
        {{ icon('file-plus', 14) }} {{ t('Upload Files') }}
        <input type="file" name="files" multiple style="display:none" data-auto-submit="upload-form">
      </label>
    </form>
  </div>
</div>

{% if folder_view %}
  {# ── Single folder, paginated ── #}
  {% if files %}
    <div class="media-grid">
      {% for f in files %}{{ media_card(f, admin_prefix) }}{% endfor %}
    </div>
    {% if pages > 1 %}
      <div style="display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px">
        {% if page > 1 %}
          <a href="{{ admin_prefix }}/media?folder={{ media_folder }}&page={{ page - 1 }}" class="btn btn-default btn-sm" data-spa>
            {{ icon('arrow-left', 14) }} {{ t('Previous') }}
          </a>
        {% endif %}
        <span class="muted" style="font-size:0.85rem">{{ page }} / {{ pages }}</span>
        {% if page < pages %}
          <a href="{{ admin_prefix }}/media?folder={{ media_folder }}&page={{ page + 1 }}" class="btn btn-default btn-sm" data-spa>
            {{ t('Next') }} {{ icon('arrow-right', 14) }}
          </a>
        {% endif %}
      </div>
    {% endif %}
  {% else %}
    <div class="media-grid">
      <div class="empty-state" style="grid-column: 1 / -1">
        {{ icon('image', 48, 'empty-icon') }}
        <p class="empty-title">{{ t('No files found') }}</p>
      </div>
    </div>
  {% endif %}
{% else %}
  {# ── Grouped overview: a capped preview per folder ── #}
  {% for group in groups %}
    <div class="media-group" style="margin-bottom:32px">
      <h2 class="media-group-title" style="font-size:0.9rem; font-weight:700; margin:0 0 12px; display:flex; align-items:center; gap:8px; color:var(--fg-2)">
        {{ icon('folder', 14, 'muted') }}
        <span>{{ group.label or t('Uncategorized') }}</span>
        <span class="muted" style="font-weight:500; font-size:0.8rem">{% if group.folder %}{{ group.folder }}/ · {% endif %}{{ group.count }}</span>
        {% if group.has_more %}
          <a href="{{ admin_prefix }}/media?folder={{ group.folder }}" class="btn btn-ghost btn-sm" data-spa style="margin-left:auto">
            {{ t('View all') }} ({{ group.count }}) {{ icon('arrow-right', 12) }}
          </a>
        {% endif %}
      </h2>
      <div class="media-grid">
        {% for f in group.preview %}{{ media_card(f, admin_prefix) }}{% endfor %}
      </div>
    </div>
  {% else %}
    <div class="media-grid">
      <div class="empty-state" style="grid-column: 1 / -1">
        {{ icon('image', 48, 'empty-icon') }}
        <p class="empty-title">{{ t('No files found') }}</p>
        <p class="empty-text">{{ t('Uploaded files will appear here.') }}</p>
      </div>
    </div>
  {% endfor %}
{% endif %}

{% endblock %}