{% extends "cms/base.html" %}
{% block title %}{% if cat %}Edit{% else %}Add{% endif %} {% if for_type == 'subscription' %}Subscription{% else %}Product{% endif %} Category{% endblock %}
{% block page_title %}{% if cat %}Edit Category{% else %}Add Category{% endif %}{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <nav style="font-size:.8rem;color:var(--cms-muted);margin-bottom:.25rem">
      <a href="{% if for_type == 'subscription' %}{% url 'cms_subscriptions' %}{% else %}{% url 'cms_products' %}{% endif %}" style="color:var(--cms-muted);text-decoration:none">{% if for_type == 'subscription' %}Subscriptions{% else %}Products{% endif %}</a>
      <span style="margin:0 .4rem">/</span>
      <span>{% if cat %}{{ cat.name }}{% else %}New Category{% endif %}</span>
    </nav>
    <h2 style="margin:0">{% if cat %}Edit Category{% else %}Add Category{% endif %}</h2>
  </div>
  <a href="{% if for_type == 'subscription' %}{% url 'cms_subscriptions' %}{% else %}{% url 'cms_products' %}{% endif %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<div class="cms-card">
  <form method="post" class="cms-form">
    {% csrf_token %}
    <input type="hidden" name="for_type" value="{{ for_type }}">
    <div class="row g-3">
      <div class="col-md-6">
        <div class="form-group">
          <label>Category Name</label>
          <input type="text" name="name" value="{{ cat.name|default:'' }}" required
                 placeholder="{% if for_type == 'subscription' %}e.g. Hosting, Domain, Software{% else %}e.g. Web Design, Branding{% endif %}" autofocus>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label>Icon Class <span style="font-size:.75rem;font-weight:400;color:var(--cms-muted)">(FontAwesome)</span></label>
          {% include 'cms/partials/icon_picker.html' with field_name='icon_class' current_value=cat.icon_class picker_id='cat-icon' %}
        </div>
      </div>
    </div>
    <div class="mt-3 d-flex gap-2">
      <button type="submit" class="btn-cms"><i class="fa-solid fa-floppy-disk me-1"></i>Save Category</button>
      <a href="{% if for_type == 'subscription' %}{% url 'cms_subscriptions' %}{% else %}{% url 'cms_products' %}{% endif %}" class="btn-cms-ghost">Cancel</a>
      {% if cat %}
      <form method="post" action="{% url 'cms_product_category_delete' cat.pk %}" style="display:inline" onsubmit="return confirm('Delete this category?')">{% csrf_token %}<button type="submit" class="btn-cms-danger"><i class="fa-solid fa-trash me-1"></i>Delete</button></form>
      {% endif %}
    </div>
  </form>
</div>
{% endblock %}