{% extends "cms/base.html" %}
{% block title %}{% if cat %}Edit Category{% else %}Add Category{% endif %}{% endblock %}
{% block page_title %}{% if cat %}Edit Category{% else %}Add Category{% endif %}{% endblock %}

{% block extra_head %}
<style>
  .form-label { display:block;font-size:.78rem;font-weight:600;color:var(--cms-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em; }
  .form-control { width:100%;border:1px solid var(--cms-border);border-radius:7px;padding:.5rem .75rem;font-size:.88rem;color:var(--cms-text);background:#fff; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>{% if cat %}Edit: {{ cat.name }}{% else %}New Category{% endif %}</h2>
  <a href="{% url 'cms_media_categories' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Categories</a>
</div>

<div class="cms-card" style="padding:1.5rem;max-width:500px">
  <form method="post">
    {% csrf_token %}
    <div style="margin-bottom:.75rem">
      <label class="form-label">Name *</label>
      <input name="name" value="{{ cat.name|default:'' }}" class="form-control" required>
    </div>
    <div style="margin-bottom:.75rem">
      <label class="form-label">Applies To</label>
      <select name="media_type" class="form-control">
        <option value="video" {% if cat and cat.media_type == 'video' %}selected{% endif %}>Video</option>
        <option value="audio" {% if cat and cat.media_type == 'audio' %}selected{% endif %}>Audio</option>
        <option value="image" {% if cat and cat.media_type == 'image' %}selected{% endif %}>Image</option>
        <option value="both"  {% if not cat or cat.media_type == 'both'  %}selected{% endif %}>All Types</option>
      </select>
    </div>
<div style="margin-bottom:1.25rem">
      <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.85rem">
        <input type="checkbox" name="is_active" {% if not cat or cat.is_active %}checked{% endif %}>
        Active
      </label>
    </div>
    <div style="display:flex;gap:.5rem">
      <button type="submit" class="btn-cms"><i class="fa-solid fa-floppy-disk me-1"></i>Save</button>
      <a href="{% url 'cms_media_categories' %}" class="btn-cms-ghost">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}