{% extends "base.html" %}
{% block title %}Sitios - Metafoliador v2{% endblock %}
{% block breadcrumb %}Sitios Alfresco{% endblock %}
{% block extra_css %}<link rel="stylesheet" href="/static/css/tree.css">{% endblock %}

{% block content %}
<div class="page-header">
    <h2 class="page-title">Sitios Alfresco</h2>
    <button class="btn btn-primary" onclick="openSiteModal()" id="btnNewSite" 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>
        Nuevo Sitio
    </button>
</div>
<div id="progressBar" style="display:none;margin-bottom:12px"><div style="background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:12px 16px"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px"><span id="progressText" style="font-size:13px;color:var(--text)"></span><div style="display:flex;align-items:center;gap:10px"><span id="progressPercent" style="font-size:13px;font-weight:700;color:var(--primary)"></span><button id="btnCancelSync" class="btn btn-danger btn-sm" style="display:none" onclick="cancelSiteSync()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg>Cancelar</button></div></div><div style="background:var(--bg-input);border-radius:6px;height:8px;overflow:hidden"><div id="progressFill" style="height:100%;width:0%;background:var(--primary);border-radius:6px;transition:width 0.3s"></div></div></div></div>
<div class="card" style="margin-bottom:16px"><div class="card-body"><div class="form-row" style="align-items:flex-end">
    <div class="form-group"><label>Filtrar por Conexión</label><select id="filterConnection" onchange="loadSites()"><option value="">Todas las conexiones</option></select></div>
    <div class="form-group"><label>Buscar</label><input type="text" id="searchSite" placeholder="Nombre o título..." oninput="loadSites()"></div>
</div></div></div>
<div class="card"><div class="card-body"><div class="table-responsive">
<table class="table"><thead><tr>
    <th data-sort="title" onclick="sortSites('title')" style="cursor:pointer">Nombre</th>
    <th data-sort="site_id" onclick="sortSites('site_id')" style="cursor:pointer">Site ID</th>
    <th data-sort="connection_name" onclick="sortSites('connection_name')" style="cursor:pointer">Conexión</th>
    <th data-sort="visibility" onclick="sortSites('visibility')" style="cursor:pointer">Visibilidad</th>
    <th data-sort="root_folder_id" onclick="sortSites('root_folder_id')" style="cursor:pointer">Root Folder</th>
    <th data-sort="document_library_id" onclick="sortSites('document_library_id')" style="cursor:pointer">Doc Library</th>
    <th data-sort="active" onclick="sortSites('active')" style="cursor:pointer">Foliado Auto</th>
    <th data-sort="repo_size" onclick="sortSites('repo_size')" style="cursor:pointer">Tamaño</th>
    <th>Acciones</th>
</tr></thead>
<tbody id="sitesTable"><tr><td colspan="9" class="text-center text-muted">Cargando...</td></tr></tbody>
</table></div></div></div>

<div class="modal-overlay" id="siteModalOverlay">
<div class="modal" style="max-width:640px"><div class="modal-header"><h3 id="siteModalTitle">Nuevo Sitio</h3><button class="modal-close" onclick="closeSiteModal()"><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="siteForm"><input type="hidden" id="siteId">
<div class="form-group"><label for="siteConnectionId">Conexion *</label><select id="siteConnectionId" required></select></div>
<div class="form-row"><div class="form-group"><label for="siteName">Nombre *</label><input type="text" id="siteName" placeholder="Nombre del sitio" required></div><div class="form-group"><label for="siteSiteId">Site ID *</label><input type="text" id="siteSiteId" placeholder="site-alfresco-id" required></div></div>
<div class="form-row"><div class="form-group"><label for="siteTitle">Titulo</label><input type="text" id="siteTitle" placeholder="Título descriptivo"></div><div class="form-group"><label for="siteVisibility">Visibilidad</label><select id="siteVisibility"><option value="PUBLIC">PUBLIC</option><option value="PRIVATE">PRIVATE</option><option value="MODERATED">MODERATED</option></select></div></div>
<div class="form-group"><label for="siteDescription">Descripción</label><textarea id="siteDescription" rows="2" placeholder="Descripción del sitio..."></textarea></div>
<div class="form-row"><div class="form-group"><label for="siteRootFolderId">Root Folder ID</label><input type="text" id="siteRootFolderId" placeholder="UUID de la Serie, Subserie o Expediente raíz"></div><div class="form-group"><label for="siteRootFolderPath">Root Folder Path</label><input type="text" id="siteRootFolderPath" placeholder="/app:company_home/st:sites/..."></div></div>
<div class="form-row"><div class="form-group"><label for="siteDocLibId">Document Library ID</label><input type="text" id="siteDocLibId" placeholder="UUID de documentLibrary"></div><div class="form-group"><label for="sitePreset">Site Preset</label><input type="text" id="sitePreset" placeholder="site-dashboard"></div></div>
<div class="form-row"><div class="form-group"><label for="siteRole">Site Role</label><input type="text" id="siteRole" placeholder="SiteManager"></div></div>
<div class="form-row"><div class="form-group"><label class="checkbox-label" style="margin-top:24px"><input type="checkbox" id="siteActive" checked><span>Foliado Automático</span></label></div></div>
</form></div><div class="modal-footer"><button class="btn btn-secondary" onclick="closeSiteModal()">Cancelar</button><button class="btn btn-primary" onclick="saveSite()">Guardar</button></div></div></div>
{% endblock %}

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