{% extends "home.html" %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="{% static 'inventario/css/style.css' %}">
{% endblock %}

{% block content %}
<main class="min-h-screen flex items-stretch">

  <div id="main-content-area" class="flex-grow p-4 sm:p-8 lg:p-12 transition-all duration-300">
    <div id="main-content-wrapper" class="w-full bg-white rounded-3xl overflow-hidden">

     <header class="header-base py-3 px-6 flex justify-between items-center">
        <h1 class="text-xl sm:text-2xl font-bold tracking-tight">
          Listado de Activos
        </h1>
        
        <button onclick="abrirFormularioNuevo()" class="btn-primary flex items-center">
            <i class="fas fa-plus mr-2"></i> Añadir Nuevo
        </button>
      </header>

      <section class="px-6 py-4">
        <div id="grid-wrapper" class="p-4">
          <div id="Grid"></div>
        </div>
      </section>
    </div>
  </div>

    <aside id="sidebar-details" class="sidebar_equipo">
    <div class="sidebar-header">
      <h2 class="sidebar-title" id="sidebar-title-text">
        <i class="fas fa-desktop sidebar-icon"></i> Detalles del Equipo
      </h2>
      <div class="sidebar-actions">
        <button id="btn-delete-header" onclick="eliminarEquipoHeader()" class="sidebar-action-btn sidebar-delete-btn" title="Eliminar Equipo">
          <i class="fas fa-trash"></i>
        </button>
        <button id="btn-edit-header" onclick="editarEquipoHeader()" class="sidebar-action-btn sidebar-edit-btn" title="Editar Equipo">
          <i class="fas fa-edit"></i>
        </button>
        <button onclick="cerrarSidebar()" class="sidebar-close-btn" title="Cerrar Detalles">
          <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </div>

    <div id="details-content" class="sidebar-body">
      <p class="text-center text-gray-500">Seleccione un equipo de la lista para ver sus detalles.</p>
    </div>
  </aside>

</main>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<script type="module"  src="{% static 'inventario/js/main.js' %}"></script>
{% endblock %}