{% extends "cms/base.html" %}
{% block title %}{% if obj.pk %}Edit Category{% else %}Add Category{% endif %}{% endblock %}
{% block page_title %}{% if obj.pk %}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="{% url 'cms_services' %}" style="color:var(--cms-muted);text-decoration:none">Services</a>
      <span style="margin:0 .4rem">/</span>
      <span>{% if obj.pk %}{{ obj.name }}{% else %}New Category{% endif %}</span>
    </nav>
    <h2 style="margin:0">{% if obj.pk %}Edit Category{% else %}Add Category{% endif %}</h2>
  </div>
  <a href="{% url 'cms_services' %}" 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 %}
    <div class="row g-3">
      <div class="col-md-6">
        <div class="form-group">
          <label>Category Name</label>
          <input type="text" name="name" value="{{ obj.name }}" required placeholder="e.g. Digital Marketing" 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=obj.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="{% url 'cms_services' %}" class="btn-cms-ghost">Cancel</a>
      {% if obj.pk %}
      <form method="post" action="{% url 'cms_service_category_delete' obj.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 %}