{% extends 'admin_pages/base_admin.html' %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<h2 class="mb-4">{{ title }}</h2>

<!-- Breadcrumbs -->
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'inventory:admin_page' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'inventory:product_list' %}">Products</a></li>
    <li class="breadcrumb-item active" aria-current="page">Add Product</li>
  </ol>
</nav>

<form method="post" novalidate>
  {% csrf_token %}
  <div class="row g-3">
    <div class="col-md-6">
      {{ form.title.label_tag }} {{ form.title }}
    </div>
    <div class="col-md-6">
      {{ form.slug.label_tag }} {{ form.slug }}
    </div>
    <div class="col-md-4">
      {{ form.abbreviation.label_tag }} {{ form.abbreviation }}
    </div>
    <div class="col-md-8">
      {{ form.description.label_tag }} {{ form.description }}
    </div>
    <div class="col-md-4">
      {{ form.unit_price.label_tag }} {{ form.unit_price }}
    </div>
    <div class="col-md-4">
      {{ form.commission.label_tag }} {{ form.commission }}
    </div>
    <div class="col-md-4">
      {{ form.discount_limit.label_tag }} {{ form.discount_limit }}
    </div>
    <div class="col-md-4">
      {{ form.currency.label_tag }} {{ form.currency }}
    </div>
    <div class="col-md-4">
      {{ form.inventory.label_tag }} {{ form.inventory }}
    </div>
    <div class="col-md-4">
      {{ form.collection.label_tag }} {{ form.collection }}
    </div>
    <div class="col-md-4">
      {{ form.packing_style.label_tag }} {{ form.packing_style }}
    </div>
    <div class="col-md-4">
      {{ form.measurement_unit.label_tag }} {{ form.measurement_unit }}
    </div>
  </div>

  <div class="mt-4">
    <button type="submit" class="btn btn-primary">Save</button>
    <a href="{% url 'inventory:product_list' %}" class="btn btn-secondary">Cancel</a>
  </div>
</form>
{% endblock %}