{% extends "base.html" %}
{% block title %}Tipologías - Metafoliador v2{% endblock %}
{% block breadcrumb %}Tipologías{% endblock %}

{% block content %}
<div class="page-header">
    <h2 class="page-title">Tipologías</h2>
    <button class="btn btn-primary" onclick="openModal()" id="btnNew" style="display:none">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Nueva Tipología
    </button>
</div>

<div class="card">
    <div class="card-body">
        <div class="search-bar" style="margin-bottom:16px;">
            <input type="text" id="searchInput" class="form-input" placeholder="Buscar tipología..." oninput="filterTable()" style="max-width:320px;">
        </div>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th data-sort="name" onclick="sortTable('name')" style="cursor:pointer">Nombre</th>
                        <th data-sort="value" onclick="sortTable('value')" style="cursor:pointer">Valor / Descripción</th>
                        <th data-sort="created_at" onclick="sortTable('created_at')" style="cursor:pointer;width:160px;">Creado</th>
                        <th style="width:120px;">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tipologiasTable">
                    <tr><td colspan="4" class="text-center text-muted">Cargando...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal-overlay" id="modalOverlay">
    <div class="modal">
        <div class="modal-header">
            <h3 id="modalTitle">Nueva Tipología</h3>
            <button class="modal-close" onclick="closeModal()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="modal-body">
            <form id="tipologiaForm">
                <input type="hidden" id="editId">
                <div class="form-group">
                    <label for="tipName">Nombre <span style="color:var(--danger,#ef4444);">*</span></label>
                    <input type="text" id="tipName" class="form-input" required placeholder="Nombre de la tipología">
                </div>
                <div class="form-group">
                    <label for="tipValue">Valor / Descripción</label>
                    <textarea id="tipValue" class="form-input" rows="3" placeholder="Descripción o valor asociado"></textarea>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal()">Cancelar</button>
            <button class="btn btn-danger" id="btnDelete" style="display:none" onclick="deleteTipologia()">Eliminar</button>
            <button class="btn btn-primary" onclick="saveTipologia()">Guardar</button>
        </div>
    </div>
</div>

<div id="toast" class="toast" style="display:none"></div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/tipologias.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
    if(hasPerm('tipologias.create'))document.getElementById('btnNew').style.display='';
});
</script>
{% endblock %}