{% extends 'backoffice/base.html' %}

{% block title %}Nuevo producto{% endblock %}

{% block main %}
  <form method="post" enctype="multipart/form-data" class="max-w-3xl">
    {% csrf_token %}

    <div class="mb-4">
      <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.name.id_for_label }}">Nombre</label>
      {{ form.name }}
      {{ form.name.errors }}
    </div>

    <div class="mb-6">
      <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.description.id_for_label }}">Descripción</label>
      {{ form.description }}
      {{ form.description.errors }}
    </div>

    <div class="grid grid-cols-3 gap-4 mb-6">
      <div>
        <h3 class="text-sm font-medium opacity-70 mb-1">Marca</h3>
        {% include 'backoffice/products/_combobox.html' with field_name='brand' multiple=False %}
      </div>
      <div>
        <h3 class="text-sm font-medium opacity-70 mb-1">Categorías</h3>
        {% include 'backoffice/products/_combobox.html' with field_name='categories' multiple=True %}
      </div>
      <div>
        <h3 class="text-sm font-medium opacity-70 mb-1">Etiquetas</h3>
        {% include 'backoffice/products/_combobox.html' with field_name='tags' multiple=True %}
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 mb-4 max-w-md">
      <div>
        <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.sku.id_for_label }}">Código de referencia</label>
        {{ form.sku }}
        {{ form.sku.errors }}
      </div>
      <div>
        <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.stock.id_for_label }}">Stock</label>
        {{ form.stock }}
        {{ form.stock.errors }}
      </div>
    </div>

    <div class="flex gap-6 mb-6">
      <label class="flex items-center gap-2">
        {{ form.hidden }} Oculto
      </label>
      <label class="flex items-center gap-2">
        {{ form.is_shipping_method }} Es forma de envío
      </label>
    </div>

    <div class="flex gap-2">
      <button class="btn btn-primary">Crear producto</button>
      <a class="btn" href="{% url 'backoffice:product_list' %}">Cancelar</a>
    </div>
  </form>
{% endblock %}