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

{% block extra_css %}
<script src="https://cdn.tailwindcss.com"></script>



<link rel="stylesheet" href="{% static 'usuarios_admin/css/style.css' %}">
<link rel="stylesheet" href="{% static 'usuarios_admin/css/base.css' %}">
<link rel="stylesheet" href="{% static 'usuarios_admin/css/sidebar.css' %}">
<link rel="stylesheet" href="{% static 'usuarios_admin/css/variable.css' %}">
{% endblock %}

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

  <div id="user-app-container" class="p-4 sm:p-8 lg:p-12 flex-grow">
    <div class="w-full bg-white shadow-2xl rounded-3xl overflow-hidden transform transition-all duration-300">

      <!-- Header -->
      <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 Colaboradores
        </h1>
      </header>

      <!-- Contenido -->
      <section class="px-6 py-4">

        <!-- Toolbar -->
        <div class="toolbar-container flex flex-col sm:flex-row gap-4 mb-4 items-center">

          <!-- View Selector -->
          <div class="view-selector-container flex space-x-2">
            <button id="view-cards" class="view-button active" title="Vista tipo tarjetas">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 
                  viewBox="0 0 24 24" fill="currentColor">
                <path d="M4 11h9V4H4v7zm0 9h9v-7H4v7zm10 0h7v-7h-7v7zm0-16v7h7V4h-7z"/>
              </svg>
            </button>
            <button id="view-list" class="view-button" title="Vista tipo tabla">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 
                  viewBox="0 0 24 24" fill="currentColor">
                <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zm0-8h14V7H7v2z"/>
              </svg>
            </button>
          </div>

          <!-- Estado -->
          <div class="status-filter-buttons flex space-x-2 border p-1">
            <button id="btn-filter-all" class="filter-button active">Todos</button>
            <button id="btn-filter-active" class="filter-button">Activos</button>
            <button id="btn-filter-inactive" class="filter-button">Inactivos</button>
          </div>

          <!-- Buscador -->
          <div class="flex-grow max-w-lg w-full">
            <input type="text" id="search-input" placeholder="Buscar por nombre o correo..." 
                class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
    </div>

        <!-- Vista tipo Cards -->
        <div id="cards-container" class="grid-container"></div>


      </section>
    </div>
  </div>

</main>

<!-- Edit User Modal -->
<div id="edit-user-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
  <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 shadow-lg rounded-md bg-white">
    <div class="flex justify-between items-center border-b pb-3">
      <h3 class="text-2xl font-bold">Editar Usuario</h3>
      <button id="modal-close-btn" class="text-black close-modal text-2xl font-bold">&times;</button>
    </div>
    <div class="mt-4">
        <form id="edit-user-form">
            <input type="hidden" id="edit-user-id" name="id">
            <input type="hidden" id="edit-user-cc" name="cc">

            <!-- Tabs -->
            <div class="border-b border-gray-200">
                <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                    <button type="button" class="tab-btn active" data-tab="general">General</button>
                    <button type="button" class="tab-btn" data-tab="areas">Permisos por Área</button>
                    <button type="button" class="tab-btn" data-tab="urls">Permisos por URL</button>
                </nav>
            </div>

            <!-- Tab Content -->
            <div id="tab-content-general" class="tab-content active">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                        <label for="edit-user-name" class="block text-sm font-medium text-gray-700">Nombre</label>
                        <input type="text" id="edit-user-name" name="nombre" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label for="edit-user-email" class="block text-sm font-medium text-gray-700">Correo</label>
                        <input type="email" id="edit-user-email" name="correo" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label for="edit-user-tipo" class="block text-sm font-medium text-gray-700">Tipo de Usuario</label>
                        <select id="edit-user-tipo" name="tipo" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></select>
                    </div>
                    <div>
                        <label for="edit-user-estado" class="block text-sm font-medium text-gray-700">Estado</label>
                        <select id="edit-user-estado" name="estado" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="1">Activo</option>
                            <option value="0">Inactivo</option>
                        </select>
                    </div>
                    <div>
                        <label for="edit-user-gerencia" class="block text-sm font-medium text-gray-700">Gerencia</label>
                        <select id="edit-user-gerencia" name="gerencia" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></select>
                    </div>
                    <div>
                        <label for="edit-user-area" class="block text-sm font-medium text-gray-700">Área</label>
                        <select id="edit-user-area" name="area" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></select>
                    </div>
                </div>
            </div>

            <div id="tab-content-areas" class="tab-content hidden mt-4" style="max-height: 300px; overflow-y: auto;">
                <!-- Area permissions will be populated by JS -->
            </div>

            <div id="tab-content-urls" class="tab-content hidden mt-4" style="max-height: 300px; overflow-y: auto;">
                <!-- URL permissions will be populated by JS -->
            </div>

            <div class="mt-6 flex justify-end space-x-4">
                <button type="button" id="modal-cancel-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300">Cancelar</button>
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Guardar Cambios</button>
            </div>
        </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}

<script type="module" src="{% static 'usuarios_admin/js/main.js' %}"></script>

{% endblock %}