{% extends "base.html" %}
{% load static %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
    <div class="breadcrumb-title pe-3">{{ title }}</div>
    <div class="ms-auto">
        <a href="{% url 'brand-management' %}" class="btn btn-secondary">Back to List</a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="mb-3">
                <label class="form-label">Brand Name</label>
                {{ form.brand_name }}
                {% if form.brand_name.errors %}
                    <div class="text-danger">{{ form.brand_name.errors }}</div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label class="form-label">Description</label>
                {{ form.brand_description }}
                {% if form.brand_description.errors %}
                    <div class="text-danger">{{ form.brand_description.errors }}</div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label class="form-label">Image</label>
                {{ form.brand_image }}
                {% if form.brand_image.errors %}
                    <div class="text-danger">{{ form.brand_image.errors }}</div>
                {% endif %}
                {% if brand.brand_image %}
                    <div class="mt-2">
                        <img src="{{ brand.brand_image.url }}" alt="Current Image" width="100">
                    </div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label class="form-label">Status</label>
                {{ form.status }}
                {% if form.status.errors %}
                    <div class="text-danger">{{ form.status.errors }}</div>
                {% endif %}
            </div>
            <button type="submit" class="btn btn-primary">Save Brand</button>
        </form>
    </div>
</div>
{% endblock %}