{% extends "cms/base.html" %}
{% block title %}Media Categories{% endblock %}
{% block page_title %}Media Categories{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>Media Categories <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ categories|length }})</span></h2>
  <div class="d-flex align-items-center gap-2">
    <a href="{% url 'cms_media_library' %}" class="btn-cms-ghost"><i class="fa-solid fa-photo-film me-1"></i>Library</a>
    <a href="{% url 'cms_media_category_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Category</a>
  </div>
</div>

<div class="cms-card">
  {% if categories %}
  <table class="cms-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th style="width:90px;">Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for cat in categories %}
      <tr {% if not cat.is_active %}style="opacity:.45"{% endif %}>
        <td style="font-weight:500"><i class="fa-solid {% if cat.media_type == 'video' %}fa-film{% elif cat.media_type == 'audio' %}fa-music{% elif cat.media_type == 'image' %}fa-image{% else %}fa-photo-film{% endif %}" style="margin-right:.4rem;color:#16517b"></i>{{ cat.name }}</td>
        <td>
          <span style="background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#16517b">
            <i class="fa-solid {% if cat.media_type == 'video' %}fa-film{% elif cat.media_type == 'audio' %}fa-music{% elif cat.media_type == 'image' %}fa-image{% else %}fa-photo-film{% endif %}" style="margin-right:.3rem"></i>{{ cat.get_media_type_display }}
          </span>
        </td>
        <td>{% if cat.is_active %}<span class="badge-resolved">Active</span>{% else %}<span class="badge-closed">Inactive</span>{% endif %}</td>
        <td>
          <a href="{% url 'cms_media_category_edit' cat.pk %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem"><i class="fa-solid fa-pen"></i></a>
          <form method="post" action="{% url 'cms_media_category_delete' cat.pk %}" style="display:inline" onsubmit="return confirm('Delete {{ cat.name|escapejs }}?')">
            {% csrf_token %}<button type="submit" class="btn-cms-danger" style="padding:.3rem .7rem"><i class="fa-solid fa-trash"></i></button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p style="color:var(--cms-muted);text-align:center;padding:2rem 0">No categories yet. <a href="{% url 'cms_media_category_add' %}">Add one.</a></p>
  {% endif %}
</div>
{% endblock %}