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

{% block title %}Registro de Herramientas{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{% static 'registro_herramientas/css/tools.css' %}">
{% endblock %}

{% block content_user %}
<div class="tools-container" id="tools-app"
     data-url-inventario="{% url 'api_inventario' %}"
     data-url-crear="{% url 'api_crear_inventario' %}"
     data-url-registrar="{% url 'api_registrar_ingreso' %}"
     data-url-finalizar="{% url 'api_finalizar_registro' %}"
     data-url-dashboard="{% url 'dashboard' %}">

    <header class="tools-header">
        <h2>Registro de Equipos</h2>
        <p>Selecciona los elementos que ingresas hoy.</p>
    </header>

    <div class="main-search-bar">
        <i class="fas fa-search"></i>
        <input type="text" id="main-search-input" placeholder="Buscar en equipos ingresados...">
    </div>

    <div class="tabs-container">
        <div class="tabs-scroll">
            <button class="tab-btn active" data-category="todos">
                <i class="fas fa-layer-group"></i> Todos
            </button>
            <button class="tab-btn" data-category="herramientas">
                <i class="fas fa-tools"></i> Herramientas
            </button>
            <button class="tab-btn" data-category="computo">
                <i class="fas fa-laptop"></i> Cómputo
            </button>
        </div>
        
        <button id="btn-toggle-delete-mode" class="action-chip danger" title="Activar modo retiro">
            <i class="fas fa-trash-alt"></i> Retirar
        </button>
    </div>

    <div id="delete-actions-wrapper" class="floating-action-wrapper hidden">
        <button id="btn-confirm-delete" class="btn-floating-danger">
            <i class="fas fa-check"></i> Confirmar Retiro (<span id="delete-counter">0</span>)
        </button>
        <button id="btn-cancel-delete" class="btn-floating-secondary" title="Cancelar">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <div id="inventory-list" class="inventory-grid">
        <div class="loading-state">Cargando...</div>
    </div>

    <button class="fab-add" id="btn-open-new-modal" title="Agregar nueva herramienta">
        <i class="fas fa-plus"></i>
    </button>

    <div class="floating-footer">
        <button id="btn-finish" class="btn-finish-floating">
            Finalizar Ingreso (<span id="counter-text">0</span>)
        </button>
    </div>

</div>
{% endblock %}

{% block extras %}
    {% include 'components/modal_camera.html' %}
{% endblock %}

{% block scripts %}
    <script type="module" src="{% static 'registro_herramientas/js/tools_controller.js' %}"></script>
{% endblock %}