import { a7 as head, a4 as escape_html, a6 as attr, a5 as ensure_array_like, a8 as stringify, a9 as attr_style, Z as derived } from '../../../chunks/index.js-BVnekaYQ.js';
import { D as DEVICE_STATUS_LABEL, S as StatusBadge } from '../../../chunks/StatusBadge.js-CQhkJYLd.js';
import { r as roleAtLeast } from '../../../chunks/roles.js-aWc1U_OX.js';
import '../../../chunks/utils.js-mIi_c4Oz.js';
import '../../../chunks/utils2.js-BQzn9ikS.js';

function _page($$renderer, $$props) {
  $$renderer.component(($$renderer2) => {
    let { data } = $$props;
    const canManage = derived(() => roleAtLeast(data.user?.role, "gestor"));
    const statuses = ["disponible", "prestado", "mantenimiento", "baja"];
    head("j4gi7w", $$renderer2, ($$renderer3) => {
      $$renderer3.title(($$renderer4) => {
        $$renderer4.push(`<title>Equipos · Inventario EDUmind</title>`);
      });
    });
    $$renderer2.push(`<div class="mb-6 flex flex-wrap items-center justify-between gap-3"><div><h1 class="text-2xl font-bold text-slate-900">Equipos</h1> <p class="text-slate-600">${escape_html(data.devices.length)} equipo(s) en el inventario.</p></div> <div class="flex gap-2">`);
    if (canManage()) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<a class="btn-secondary" href="/labels">Etiquetas</a> <a class="btn-primary" href="/devices/new">Nuevo equipo</a>`);
    } else {
      $$renderer2.push("<!--[-1-->");
    }
    $$renderer2.push(`<!--]--></div></div> <form method="GET" class="card mb-4 flex flex-wrap items-end gap-3 p-4"><div class="min-w-[220px] flex-1"><label class="label" for="q">Buscar</label> <input class="input" id="q" name="q"${attr("value", data.filters.search)} placeholder="Código, nombre, marca, modelo o nº de serie"/></div> <div><label class="label" for="status">Estado</label> `);
    $$renderer2.select(
      {
        class: "input",
        id: "status",
        name: "status",
        value: data.filters.status
      },
      ($$renderer3) => {
        $$renderer3.option({ value: "" }, ($$renderer4) => {
          $$renderer4.push(`Todos`);
        });
        $$renderer3.push(`<!--[-->`);
        const each_array = ensure_array_like(statuses);
        for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
          let s = each_array[$$index];
          $$renderer3.option({ value: s }, ($$renderer4) => {
            $$renderer4.push(`${escape_html(DEVICE_STATUS_LABEL[s])}`);
          });
        }
        $$renderer3.push(`<!--]-->`);
      }
    );
    $$renderer2.push(`</div> <div><label class="label" for="cat">Categoría</label> `);
    $$renderer2.select(
      {
        class: "input",
        id: "cat",
        name: "cat",
        value: String(data.filters.categoryId)
      },
      ($$renderer3) => {
        $$renderer3.option({ value: "" }, ($$renderer4) => {
          $$renderer4.push(`Todas`);
        });
        $$renderer3.push(`<!--[-->`);
        const each_array_1 = ensure_array_like(data.categories);
        for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
          let c = each_array_1[$$index_1];
          $$renderer3.option({ value: c.id }, ($$renderer4) => {
            $$renderer4.push(`${escape_html(c.name)}`);
          });
        }
        $$renderer3.push(`<!--]-->`);
      }
    );
    $$renderer2.push(`</div> <div class="flex gap-2"><button class="btn-primary" type="submit">Filtrar</button> <a class="btn-secondary" href="/devices">Limpiar</a></div></form> <div class="card overflow-hidden">`);
    if (data.devices.length === 0) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<div class="px-5 py-16 text-center"><p class="text-slate-500">No hay equipos que coincidan.</p> `);
      if (canManage()) {
        $$renderer2.push("<!--[0-->");
        $$renderer2.push(`<a class="btn-primary mt-4" href="/devices/new">Añadir el primer equipo</a>`);
      } else {
        $$renderer2.push("<!--[-1-->");
      }
      $$renderer2.push(`<!--]--></div>`);
    } else {
      $$renderer2.push("<!--[-1-->");
      $$renderer2.push(`<div class="overflow-x-auto"><table class="w-full text-left text-sm"><thead class="border-b border-slate-200 bg-slate-50 text-xs uppercase text-slate-500"><tr><th class="px-4 py-3 font-semibold">Código</th><th class="px-4 py-3 font-semibold">Equipo</th><th class="px-4 py-3 font-semibold">Categoría</th><th class="px-4 py-3 font-semibold">Ubicación</th><th class="px-4 py-3 font-semibold">Estado</th><th class="px-4 py-3 font-semibold">En poder de</th></tr></thead><tbody class="divide-y divide-slate-100"><!--[-->`);
      const each_array_2 = ensure_array_like(data.devices);
      for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
        let d = each_array_2[$$index_2];
        $$renderer2.push(`<tr class="hover:bg-slate-50"><td class="px-4 py-3"><a${attr("href", `/devices/${stringify(d.id)}`)} class="font-mono font-semibold text-brand-700 hover:underline">${escape_html(d.code)}</a></td><td class="px-4 py-3"><a${attr("href", `/devices/${stringify(d.id)}`)} class="text-slate-900 hover:underline">${escape_html(d.name || d.model || "—")}</a> `);
        if (d.brand) {
          $$renderer2.push("<!--[0-->");
          $$renderer2.push(`<span class="block text-xs text-slate-400">${escape_html(d.brand)}</span>`);
        } else {
          $$renderer2.push("<!--[-1-->");
        }
        $$renderer2.push(`<!--]--></td><td class="px-4 py-3">`);
        if (d.category_name) {
          $$renderer2.push("<!--[0-->");
          $$renderer2.push(`<span class="badge"${attr_style(`background:${stringify(d.category_color)}1a; color:${stringify(d.category_color)}`)}>${escape_html(d.category_name)}</span>`);
        } else {
          $$renderer2.push("<!--[-1-->");
          $$renderer2.push(`<span class="text-slate-400">—</span>`);
        }
        $$renderer2.push(`<!--]--></td><td class="px-4 py-3 text-slate-600">${escape_html(d.location || "—")}</td><td class="px-4 py-3">`);
        StatusBadge($$renderer2, { status: d.status });
        $$renderer2.push(`<!----></td><td class="px-4 py-3 text-slate-600">${escape_html(d.holder_name || "—")}</td></tr>`);
      }
      $$renderer2.push(`<!--]--></tbody></table></div>`);
    }
    $$renderer2.push(`<!--]--></div>`);
  });
}

export { _page as default };
//# sourceMappingURL=_page.svelte.js-P-Tim1gr.js.map
