{# templates/adminpanel/product_form.html #}
{% extends "adminpanel/base.html" %}
{% load widget_tweaks %}

{% block pagetitle %}{% if mode == "create" %}New product{% else %}Edit product{% endif %}{% endblock %}
{% block page_header %}{% if mode == "create" %}New product{% else %}Edit product{% endif %}{% endblock %}
{% block header_actions %}
  <div class="d-flex align-items-center gap-2">
    <a class="btn btn-light btn-sm" href="{% url 'admin_products' %}">Back</a>
    <button class="btn btn-primary btn-sm" type="submit" form="productForm">Save</button>
  </div>
{% endblock %}

{% block content %}
<form id="productForm" method="post" enctype="multipart/form-data" class="mm-soft-card p-3">
  {% csrf_token %}

  {% if form.non_field_errors %}
    <div class="alert alert-danger">
      {% for e in form.non_field_errors %}{{ e }}<br>{% endfor %}
    </div>
  {% endif %}

  <div class="row g-3">
    <div class="col-md-6">
      <label class="form-label">Title</label>
      {% if form.title.errors %}
        {% render_field form.title|add_class:"form-control is-invalid" %}
        {% for e in form.title.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.title|add_class:"form-control" %}
      {% endif %}
    </div>

    <div class="col-md-6">
      <label class="form-label">Category</label>
      {% if form.category.errors %}
        {% render_field form.category|add_class:"form-select is-invalid" %}
        {% for e in form.category.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.category|add_class:"form-select" %}
      {% endif %}
    </div>

    <div class="col-md-4">
      <label class="form-label">Price</label>
      {% if form.price.errors %}
        {% render_field form.price|add_class:"form-control is-invalid" %}
        {% for e in form.price.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.price|add_class:"form-control" %}
      {% endif %}
    </div>

    <div class="col-md-4">
      <label class="form-label">Unit</label>
      {% if form.unit.errors %}
        {% render_field form.unit|add_class:"form-control is-invalid" %}
        {% for e in form.unit.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.unit|add_class:"form-control" %}
      {% endif %}
    </div>

    <div class="col-md-4">
      <label class="form-label">Weight (g)</label>
      {% if form.weight_grams.errors %}
        {% render_field form.weight_grams|add_class:"form-control is-invalid" %}
        {% for e in form.weight_grams.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.weight_grams|add_class:"form-control" %}
      {% endif %}
    </div>

    <div class="col-md-12">
      <label class="form-label">Description</label>
      {% if form.description.errors %}
        {% render_field form.description|add_class:"form-control is-invalid"|attr:"rows:4" %}
        {% for e in form.description.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.description|add_class:"form-control"|attr:"rows:4" %}
      {% endif %}
    </div>

    <div class="col-md-3">
      <label class="form-label d-block">In stock</label>
      <div class="form-check">
        {% if form.in_stock.errors %}
          {% render_field form.in_stock|add_class:"form-check-input is-invalid" %}
          {% for e in form.in_stock.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
        {% else %}
          {% render_field form.in_stock|add_class:"form-check-input" %}
        {% endif %}
        <label class="form-check-label">Available</label>
      </div>
    </div>

    <div class="col-md-3">
      <label class="form-label">Stock qty</label>
      {% if form.stock_qty.errors %}
        {% render_field form.stock_qty|add_class:"form-control is-invalid" %}
        {% for e in form.stock_qty.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.stock_qty|add_class:"form-control" %}
      {% endif %}
    </div>

    <div class="col-md-3">
      <label class="form-label">Rating</label>
      {% if form.rating.errors %}
        {% render_field form.rating|add_class:"form-control is-invalid" %}
        {% for e in form.rating.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.rating|add_class:"form-control" %}
      {% endif %}
    </div>

    <div class="col-md-3">
      <label class="form-label">Reviews count</label>
      {% if form.reviews_count.errors %}
        {% render_field form.reviews_count|add_class:"form-control is-invalid" %}
        {% for e in form.reviews_count.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.reviews_count|add_class:"form-control" %}
      {% endif %}
    </div>

    <div class="col-md-12">
      <label class="form-label">Tags</label>
      {% if form.tags.errors %}
        {% render_field form.tags|add_class:"form-control is-invalid"|attr:"placeholder:fresh,local" %}
        {% for e in form.tags.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.tags|add_class:"form-control"|attr:"placeholder:fresh,local" %}
      {% endif %}
      <div class="form-text">Comma-separated, e.g. <code>fresh,local,organic</code></div>
    </div>

    <div class="col-md-12">
      <label class="form-label">Thumbnail</label>
      {% if form.thumbnail.errors %}
        {% render_field form.thumbnail|add_class:"form-control is-invalid" %}
        {% for e in form.thumbnail.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      {% else %}
        {% render_field form.thumbnail|add_class:"form-control" %}
      {% endif %}
    </div>
  </div>

  <hr>

  <h2 class="h6">Image gallery</h2>
  {{ formset.management_form }}
  <div class="row g-2">
    {% for f in formset %}
      {% if f.id %}{{ f.id }}{% endif %}
      <div class="col-md-4">
        <div class="border rounded p-2 h-100">
          <div class="mb-2">
            <label class="form-label">Image</label>
            {% if f.image.errors %}
              {% render_field f.image|add_class:"form-control is-invalid" %}
              {% for e in f.image.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
            {% else %}
              {% render_field f.image|add_class:"form-control" %}
            {% endif %}
          </div>
          <div class="mb-2">
            <label class="form-label">ALT</label>
            {% if f.alt.errors %}
              {% render_field f.alt|add_class:"form-control is-invalid" %}
              {% for e in f.alt.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
            {% else %}
              {% render_field f.alt|add_class:"form-control" %}
            {% endif %}
          </div>
          <div class="form-check">
            {% render_field f.DELETE|add_class:"form-check-input" %}
            <label class="form-check-label" for="{{ f.DELETE.id_for_label }}">Delete</label>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="d-flex justify-content-between align-items-center mt-3">
    <small class="text-muted">Slug is generated automatically from the title.</small>
    <div>
      <a class="btn btn-light" href="{% url 'admin_products' %}">Cancel</a>
      <button class="btn btn-primary" type="submit">Save</button>
    </div>
  </div>
</form>
{% endblock %}