{% extends "base.html" %}
{% block title %}Cuadro de Clasificación - Metafoliador v2{% endblock %}
{% block breadcrumb %}Cuadro de Clasificación{% endblock %}
{% block extra_css %}<link rel="stylesheet" href="/static/css/tree.css">{% endblock %}
{% block content %}
<div class="page-header"><div><h2 class="page-title" id="treeTitle">Cuadro de Clasificación</h2></div></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="cancelSync()"><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 id="searchBox" style="display:none;margin-bottom:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
<div style="flex:1;min-width:300px;display:flex;align-items:center">
<div class="input-wrapper" style="max-width:400px;position:relative;width:100%"><svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:18px;height:18px;position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted)"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" id="treeSearch" placeholder="Buscar..." style="width:100%;padding:10px 38px 10px 42px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:inherit;outline:none"><button id="btnClearSearch" style="display:none;position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div><span id="searchCount" class="text-muted" style="font-size:12px;margin-left:12px;display:none"></span>
</div>
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
<button class="btn btn-secondary" onclick="syncCurrent('shallow')" id="btnSyncShallow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>Sólo 1er Nivel</button>
<button class="btn btn-primary" onclick="syncCurrent('deep')" id="btnSyncDeep"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>Cuadro Completo</button>
<label class="checkbox-label" style="margin-left:8px"><input type="checkbox" id="syncGenerateIndexSite" checked><span>Generar o actualizar índices electrónicos</span></label>
<button class="btn btn-secondary" onclick="window.location.href='/app/sitios'"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>Volver</button>
</div>
</div>
<div class="card"><div class="card-body"><div id="treeContainer"><p class="text-muted" style="text-align:center;padding:40px">Cargando cuadro...</p></div></div></div>
{% endblock %}
{% block extra_js %}<script src="/static/js/tree.js"></script>{% endblock %}