{% extends 'admin/custom_base.html' %}

{% block body %}
<div class="container-fluid mt-3">
  <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap" style="gap:.5rem">
    <h3 class="mb-0">{{ categories[category].label }} <span class="badge badge-secondary" style="font-size:.7em">{{ total }}</span></h3>
    <form method="get" class="d-flex" style="gap:.5rem">
      <input type="hidden" name="cat" value="{{ category }}">
      <input name="q" value="{{ search }}" class="form-control form-control-sm" placeholder="Search {{ categories[category].label|lower }}..." style="width:220px">
      <button class="btn btn-sm btn-primary">Search</button>
      {% if search %}<a href="?cat={{ category }}" class="btn btn-sm btn-outline-secondary">Clear</a>{% endif %}
    </form>
  </div>

  <div class="mb-3" style="display:flex;flex-wrap:wrap;gap:6px">
    {% for cat_key, cat_info in categories.items() %}
    <a href="?cat={{ cat_key }}"
       class="btn btn-sm {% if cat_key == category %}btn-purple{% else %}btn-outline-secondary{% endif %}"
       style="{% if cat_key == category %}background:var(--kr-purple);border-color:var(--kr-purple);color:#fff{% endif %}">
      {{ cat_info.label }}
      <span class="badge {% if cat_key == category %}badge-light{% else %}badge-secondary{% endif %}" style="font-size:.7em">{{ cat_counts.get(cat_key, 0) }}</span>
    </a>
    {% endfor %}
  </div>

  {% if not files %}
  <p class="text-muted">No {{ categories[category].label|lower }} found{% if search %} matching "{{ search }}"{% endif %}.</p>
  {% else %}

  {% if category in ('Texture2D', 'Sprite') %}
  <div class="row" style="margin:0 -6px">
    {% for f in files %}
    {% set url = '/assets/' + category + '/' + f %}
    <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3 px-1">
      <div class="card h-100" style="background:#1a1a2e;border-color:#333">
        <a href="{{ url }}" target="_blank">
          <img src="{{ url }}" class="card-img-top" alt="{{ f }}"
               style="height:100px;object-fit:contain;background:#111;padding:4px;cursor:zoom-in"
               loading="lazy" onerror="this.style.opacity='.2'">
        </a>
        <div class="card-body p-1 text-center">
          <div style="font-size:.62rem;color:#aaa;word-break:break-all;line-height:1.2;max-height:2.4em;overflow:hidden" title="{{ f }}">
            {{ f.rsplit('.', 1)[0] }}
          </div>
          <a href="{{ url }}" download="{{ f }}" class="btn btn-outline-light btn-sm mt-1 py-0 px-2" style="font-size:.65rem">Download</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  {% elif category == 'AudioClip' %}
  <div class="row" style="margin:0 -6px">
    {% for f in files %}
    {% set url = '/assets/' + category + '/' + f %}
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-2 px-1">
      <div class="card" style="background:#1a1a2e;border-color:#333">
        <div class="card-body p-2">
          <div style="font-size:.75rem;color:#ccc;word-break:break-all;margin-bottom:4px" title="{{ f }}">{{ f }}</div>
          <audio controls preload="none" style="width:100%;height:32px">
            <source src="{{ url }}">
          </audio>
          <a href="{{ url }}" download="{{ f }}" class="btn btn-outline-light btn-sm mt-1 py-0 px-1" style="font-size:.6rem">Download</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  {% elif category == 'Font' %}
  <div class="row" style="margin:0 -6px">
    {% for f in files %}
    {% set url = '/assets/' + category + '/' + f %}
    <div class="col-12 col-sm-6 col-md-4 mb-3 px-1">
      <div class="card" style="background:#1a1a2e;border-color:#333">
        <div class="card-body p-2">
          <style>@font-face { font-family: "preview-{{ loop.index }}"; src: url("{{ url }}"); }</style>
          <div style="font-family:'preview-{{ loop.index }}';font-size:1.4rem;color:#eee;margin-bottom:6px">
            The quick brown fox jumps over the lazy dog
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <small style="color:#aaa">{{ f }}</small>
            <a href="{{ url }}" download="{{ f }}" class="btn btn-outline-light btn-sm py-0 px-2" style="font-size:.65rem">Download</a>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  {% elif category in ('TextAsset', 'Shader', 'MonoBehaviour') %}
  <table class="table table-sm table-hover">
    <thead><tr><th>Name</th><th class="text-right" style="width:120px">Actions</th></tr></thead>
    <tbody>
      {% for f in files %}
      {% set url = '/assets/' + category + '/' + f %}
      <tr>
        <td>
          <span style="font-size:.85rem">{{ f }}</span>
        </td>
        <td class="text-right">
          <a href="{{ url }}" target="_blank" class="btn btn-outline-info btn-sm py-0 px-2" style="font-size:.65rem">View</a>
          <a href="{{ url }}" download="{{ f }}" class="btn btn-outline-light btn-sm py-0 px-2" style="font-size:.65rem">Download</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  {% endif %}

  {% if pages > 1 %}
  <nav class="mt-2">
    <ul class="pagination pagination-sm justify-content-center flex-wrap">
      {% if page > 1 %}
      <li class="page-item"><a class="page-link" href="?cat={{ category }}&q={{ search }}&page={{ page - 1 }}">«</a></li>
      {% endif %}
      {% for p in range([1, page-3]|max, [pages+1, page+4]|min) %}
      <li class="page-item {% if p == page %}active{% endif %}">
        <a class="page-link" href="?cat={{ category }}&q={{ search }}&page={{ p }}">{{ p }}</a>
      </li>
      {% endfor %}
      {% if page < pages %}
      <li class="page-item"><a class="page-link" href="?cat={{ category }}&q={{ search }}&page={{ page + 1 }}">»</a></li>
      {% endif %}
    </ul>
  </nav>
  {% endif %}
  {% endif %}
</div>
{% endblock %}