{% extends "base.html" %}
{% block title %}Conexiones API - Metafoliador v2{% endblock %}
{% block breadcrumb %}Conexiones API Alfresco{% endblock %}

{% block content %}
<div class="page-header">
    <h2 class="page-title">Conexiones API Alfresco</h2>
    <button class="btn btn-primary" onclick="openModal()" id="btnNewConn" 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 Conexión
    </button>
</div>

<div class="card"><div class="card-body"><div class="table-responsive">
<table class="table"><thead><tr>
    <th data-sort="name" onclick="sortConnections('name')" style="cursor:pointer">Nombre</th>
    <th>IP Servidor</th><th data-sort="base_url" onclick="sortConnections('base_url')" style="cursor:pointer">URL Base</th>
    <th data-sort="username" onclick="sortConnections('username')" style="cursor:pointer">Usuario Sync</th>
    <th data-sort="api_username" onclick="sortConnections('api_username')" style="cursor:pointer">Usuario API</th>
    <th data-sort="repo_size" onclick="sortConnections('repo_size')" style="cursor:pointer">Tamaño Repositorio</th>
    <th data-sort="auth_type" onclick="sortConnections('auth_type')" style="cursor:pointer">Autenticación</th>
    <th data-sort="sites_count" onclick="sortConnections('sites_count')" style="cursor:pointer">Sitios</th>
    <th data-sort="active" onclick="sortConnections('active')" style="cursor:pointer">Estado</th>
    <th>Acciones</th>
</tr></thead>
<tbody id="connectionsTable"><tr><td colspan="10" 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 Conexión</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="connectionForm"><input type="hidden" id="connId">
<div class="form-row"><div class="form-group"><label for="connName">Nombre *</label><input type="text" id="connName" placeholder="Ej: Alfresco Producción" required></div><div class="form-group"><label for="connAuthType">Autenticación</label><select id="connAuthType"><option value="basic">Basic Auth</option><option value="oauth2">OAuth 2.0</option></select></div></div>
<div class="form-group"><label for="connBaseUrl">URL Base *</label><input type="url" id="connBaseUrl" placeholder="https://alfresco.example.com" required></div>
                    <div class="form-group"><label for="connIpServer">IP Servidor *</label><input type="text" id="connIpServer" placeholder="Ej: 15.235.35.77" required></div>
<div class="form-row"><div class="form-group"><label for="connUsername">Usuario Sync (Workers)</label><input type="text" id="connUsername" placeholder="admin"></div><div class="form-group"><label for="connPassword">Contraseña Sync</label><input type="password" id="connPassword" placeholder="Dejar vacío para no cambiar"></div></div>
<div class="form-row"><div class="form-group"><label for="connApiUsername">Usuario API (Webhooks)</label><input type="text" id="connApiUsername" placeholder="Si se deja vacío, usa el usuario Sync"></div><div class="form-group"><label for="connApiPassword">Contraseña API</label><input type="password" id="connApiPassword" placeholder="Dejar vacío para no cambiar"></div></div>
<div id="oauthFields" style="display:none"><div class="form-row"><div class="form-group"><label for="connClientId">Client ID</label><input type="text" id="connClientId"></div><div class="form-group"><label for="connClientSecret">Client Secret</label><input type="password" id="connClientSecret" placeholder="Dejar vacío para no cambiar"></div></div></div>
<div class="form-group"><label for="connNotes">Notas</label><textarea id="connNotes" rows="2" placeholder="Notas adicionales..."></textarea></div>
<div class="form-group"><label class="checkbox-label"><input type="checkbox" id="connActive" checked><span>Conexión activa</span></label></div>
</form></div>
<div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal()">Cancelar</button><button class="btn btn-primary" onclick="saveConnection()">Guardar</button></div></div></div>
{% endblock %}

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