{% extends 'adminapp/master.html' %}
{% load static %}
{% 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">Edit AdTemplate</h4>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{% url 'managetemplate' %}">Manage AdTemplates</a></li>
            <li class="breadcrumb-item active text-primary">Edit AdTemplate</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- Form Card -->
    <div class="row justify-content-center">
      <div class="col-xl-12">
        <div class="card shadow rounded-4 border-0">
          <div class="card-header bg-dark text-white text-center rounded-top-4">
            <h5 class="mb-0 py-2">Update Ad Template</h5>
          </div>
          <div class="card-body">
            <form action="{% url 'adtemplate_edit' form.instance.id %}" method="POST" enctype="multipart/form-data">
              {% csrf_token %}

              <div class="mb-3">
                <label for="template_name" class="form-label fw-semibold">Template Name</label>
                <input type="text" class="form-control rounded-pill" id="template_name" name="name" value="{{ form.instance.name }}" required />
              </div>

              <div class="mb-3">
                <label for="template_description" class="form-label fw-semibold">Description</label>
                <textarea class="form-control rounded-3" id="template_description" name="description" rows="3" required>{{ form.instance.description }}</textarea>
              </div>

              <div class="mb-3">
                <label for="template_price" class="form-label fw-semibold">Price (₹)</label>
                <input type="number" class="form-control rounded-pill" id="template_price" name="price" step="0.01" value="{{ form.instance.price }}" required />
              </div>

              <div class="mb-3">
                <label for="template_category" class="form-label fw-semibold">Category</label>
                <select class="form-select rounded-pill" id="template_category" name="category" required>
                  {% for category in categories %}
                    <option value="{{ category.id }}" {% if category.id == form.instance.category.id %}selected{% endif %}>{{ category.name }}</option>
                  {% empty %}
                    <option disabled>No categories available</option>
                  {% endfor %}
                </select>
              </div>

              <div class="mb-3">
                <label for="template_ad_type" class="form-label fw-semibold">Ad Type</label>
                <select class="form-select rounded-pill" id="template_ad_type" name="ad_type" required>
                  {% for ad_type in ad_types %}
                    <option value="{{ ad_type.id }}" {% if ad_type.id == form.instance.ad_type.id %}selected{% endif %}>{{ ad_type.name }}</option>
                  {% empty %}
                    <option disabled>No ad types available</option>
                  {% endfor %}
                </select>
              </div>

              <div class="mb-3">
                <label for="template_image" class="form-label fw-semibold">Upload New Image</label>
                <input type="file" class="form-control rounded-pill" id="template_image" name="image" />
              </div>

              {% if form.instance.image %}
                <div class="mb-4 border rounded text-center p-3">
                  <p class="text-muted fw-semibold mb-2">Current Image:</p>
                  <img src="{{ form.instance.image.url }}" alt="Current Image" class="img-fluid rounded shadow" width="200">
                </div>
              {% endif %}

              <div class="text-center mt-4">
                <button type="submit" class="btn btn-success rounded-pill px-4 me-2">
                  <i class="bx bx-check-circle me-1"></i> Update
                </button>
                <a href="{% url 'managetemplate' %}" class="btn btn-secondary rounded-pill px-4">
                  <i class="bx bx-x me-1"></i> Cancel
                </a>
              </div>
            </form>
          </div> <!-- End Card Body -->
        </div> <!-- End Card -->
      </div> <!-- End Col -->
    </div> <!-- End Row -->
  </div> <!-- End Container -->
</div> <!-- End Page Content -->

{% endblock %}