{% extends 'adminapp/master.html' %}
{% load static %}
{% load widget_tweaks %}

{% block content %}
<div class="page-content">
  <div class="container-fluid">

    <!-- Page Title -->
    <div class="row">
      <div class="col-12">
        <div class="page-title-box">
          <h4 class="mb-0 fw-semibold">{{ title }}</h4>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{% url 'managecategory' %}">Manage Categories</a></li>
            <li class="breadcrumb-item active text-primary">Add Category</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- Form Section -->
    <div class="row justify-content-center mt-5">
      <div class="col-md-8 col-lg-6">
        <div class="card shadow border-0 rounded-4">
          <div class="card-header bg-light rounded-top-4 text-center">
            <h5 class="mb-0 py-2">Add New Category</h5>
          </div>
          <div class="card-body p-4">
            <form method="post" enctype="multipart/form-data">
              {% csrf_token %}

              <!-- Non-field Errors -->
              {% if form.non_field_errors %}
              <div class="alert alert-danger rounded-3">
                {{ form.non_field_errors }}
              </div>
              {% endif %}

              <!-- Category Name -->
              <div class="mb-3">
                <label for="{{ form.name.id_for_label }}" class="form-label fw-semibold">Category Name:</label>
                {{ form.name|add_class:"form-control rounded-pill shadow-sm" }}
                {% if form.name.errors %}
                  <div class="text-danger small mt-1">
                    {{ form.name.errors.0 }}
                  </div>
                {% endif %}
              </div>

              <!-- Image Upload -->
              {% if 'image' in form.fields %}
              <div class="mb-3">
                <label for="{{ form.image.id_for_label }}" class="form-label fw-semibold">Upload Image:</label>
                {{ form.image|add_class:"form-control rounded-pill shadow-sm" }}
                {% if form.image.errors %}
                  <div class="text-danger small mt-1">
                    {{ form.image.errors.0 }}
                  </div>
                {% endif %}
              </div>

              <!-- Image Preview -->
              {% if form.instance.image %}
              <div class="text-center mt-3">
                <img src="{{ form.instance.image.url }}" alt="Category Image" class="img-thumbnail shadow-sm" style="max-width: 150px; border-radius: 10px;">
              </div>
              {% endif %}
              {% endif %}

              <!-- Buttons -->
              <div class="d-flex justify-content-center gap-3 mt-4">
                <button type="submit" class="btn btn-success px-4 rounded-pill">
                  <i class="bx bx-check-circle me-1"></i> Save
                </button>
                <a href="{% url 'managecategory' %}" class="btn btn-outline-danger px-4 rounded-pill">
                  <i class="bx bx-x-circle me-1"></i> Cancel
                </a>
              </div>

            </form>
          </div> <!-- End Card Body -->
        </div> <!-- End Card -->
      </div>
    </div>

  </div> <!-- container-fluid -->
</div> <!-- page-content -->
{% endblock %}