products-admin-page.html

<h1 class="text-2xl font-bold">{{ product().title }}</h1>
<div class="divider"></div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <!-- Datos generales -->
  <div class="flex flex-col gap-2">
    <h2 class="text-2xl font-bold h-12">Datos generales</h2>
    <input
      type="text"
      placeholder="Título"
      class="input input-bordered w-full"
    />

    <input type="text" placeholder="Slug" class="input input-bordered w-full" />

    <textarea
      class="textarea textarea-bordered"
      placeholder="Descripción"
      rows="6"
    ></textarea>

    <h2 class="text-lg font-bold">Datos de venta</h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
      <input
        type="number"
        placeholder="Precio"
        class="input input-bordered w-full"
      />

      <input
        type="number"
        placeholder="Inventario"
        class="input input-bordered w-full"
      />
    </div>

    <!-- tags -->
    <input type="text" placeholder="Tags" class="input input-bordered w-full" />

    <!-- Botones para el género -->
    <div class="grid grid-cols-3 gap-2">
      <!-- <button class="btn btn-sm btn-outline">Masculino</button> -->
      <button class="btn btn-sm btn-primary">Masculino</button>
      <button class="btn btn-sm btn-accent">Femenino</button>
      <button class="btn btn-sm btn-secondary">Unisex</button>
    </div>

    <!-- <select class="select select-bordered w-full">
      <option value="male">Masculino</option>
      <option value="female">Femenino</option>
      <option value="unisex">Unisex</option>
    </select> -->

    <!-- Sizes -->
    <div class="grid grid-cols-6 gap-2">
      @for (size of sizes; track size) {
      <button class="btn btn-sm btn-outline">{{ size }}</button>
      }
    </div>
  </div>

  <!-- Imágenes -->
  <div class="flex flex-col gap-2">
    <div class="flex justify-end h-12">
      <button class="btn btn-secondary" type="submit">
        <!-- <span class="loading loading-spinner loading-sm"></span> -->

        Guardar
      </button>
    </div>

    <product-carousel [images]="product().images" />

    <input type="file" class="file-input file-input-bordered w-full mt-4" />
  </div>
</div>