{% extends 'base.html' %}
{% block title %}Sistemas{% endblock %}
{% block page_title %}Sistemas{% endblock %}
{% block topbar_actions %}
    <a href="{{ url_for('system_new') }}" class="btn btn-primary">+ Nuevo Sistema</a>
{% endblock %}
{% block content %}
<div class="card">
    <div class="table-wrap">
    <table>
        <thead><tr><th>Sistema</th><th>Descripción</th><th>Tipo</th><th></th></tr></thead>
        <tbody>
        {% for s in systems %}
        <tr>
            <td><strong>{{ s.name }}</strong></td>
            <td class="text-gray">{{ s.description or '—' }}</td>
            <td>
                {% if s.is_default %}
                <span class="badge" style="background:rgba(0,180,216,0.15);color:var(--cyan)">Predefinido</span>
                {% else %}
                <span class="badge" style="background:rgba(46,196,182,0.15);color:var(--success)">Personalizado</span>
                {% endif %}
            </td>
            <td>
                {% if not s.is_default %}
                <a href="{{ url_for('system_edit', sid=s.id) }}" class="btn btn-sm btn-secondary">✏️</a>
                <button onclick="deleteSystem({{ s.id }}, this.closest('tr'))" class="btn btn-sm btn-danger">🗑️</button>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function deleteSystem(id, row) {
    if (!confirm('¿Eliminar este sistema?')) return;
    fetch(`/systems/${id}/delete`, {method:'DELETE'})
        .then(() => row.remove());
}
</script>
{% endblock %}