{% extends "base.html" %}

{% block title %}Inventario | Sublimaciones Matiguan{% endblock %}

{% block content %}
<div class="space-y-6">
  <section class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
    <div>
      <p class="text-sm font-medium uppercase tracking-[0.18em] text-violet-600">Inventario</p>
      <h3 class="mt-2 text-3xl font-bold tracking-tight text-slate-900">Control de materiales</h3>
    </div>
    <button class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-violet-600 to-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-violet-600/20 transition hover:translate-y-[-1px]">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8h-16" />
      </svg>
      Agregar material
    </button>
  </section>

  <section class="grid gap-4 md:grid-cols-3">
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Materiales activos</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">124</p>
      <p class="mt-2 text-sm text-emerald-600">+8% vs mes anterior</p>
    </article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Bajo stock</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">14</p>
      <p class="mt-2 text-sm text-amber-600">Revisión requerida</p>
    </article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Disponibilidad</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">86%</p>
      <p class="mt-2 text-sm text-blue-600">Suficiente para producción</p>
    </article>
  </section>

  <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
    <div class="flex items-center justify-between border-b border-slate-200 pb-4">
      <h4 class="text-xl font-bold text-slate-900">Materiales</h4>
      <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">Inventario actual</span>
    </div>

    <div class="mt-4 space-y-5">
      <div>
        <div class="mb-2 flex items-center justify-between text-sm">
          <span class="font-medium text-slate-700">Vinilo textil</span>
          <span class="text-slate-500">78%</span>
        </div>
        <div class="h-2.5 rounded-full bg-slate-100">
          <div class="h-2.5 rounded-full bg-emerald-500" style="width: 78%;"></div>
        </div>
      </div>

      <div>
        <div class="mb-2 flex items-center justify-between text-sm">
          <span class="font-medium text-slate-700">Papel transfer</span>
          <span class="text-slate-500">52%</span>
        </div>
        <div class="h-2.5 rounded-full bg-slate-100">
          <div class="h-2.5 rounded-full bg-blue-500" style="width: 52%;"></div>
        </div>
      </div>

      <div>
        <div class="mb-2 flex items-center justify-between text-sm">
          <span class="font-medium text-slate-700">Tintas</span>
          <span class="text-slate-500">31%</span>
        </div>
        <div class="h-2.5 rounded-full bg-slate-100">
          <div class="h-2.5 rounded-full bg-amber-500" style="width: 31%;"></div>
        </div>
      </div>
    </div>
  </section>
</div>
{% endblock %}