{% extends 'base.html' %}
{% block title %}Déploiement Agent Qualys{% endblock %}
{% block content %}
<div class="flex justify-between items-center mb-4">
    <div>
        <h2 class="text-xl font-bold text-cyber-accent">Déploiement Agent Qualys</h2>
        <p class="text-xs text-gray-500 mt-1">Installer et vérifier l'agent Qualys Cloud sur les serveurs</p>
    </div>
    <a href="/qualys/agents" class="btn-sm bg-cyber-border text-cyber-accent px-4 py-2">Agents</a>
</div>

{% if msg == 'no_servers' %}
<div style="background:#5a1a1a;color:#ff3366;padding:8px 16px;border-radius:6px;margin-bottom:12px;font-size:0.85rem">
    Sélectionner au moins un serveur.
</div>
{% endif %}

<div x-data="{selectedIds: [], selectAll: false, filter: '', filterDom: '', filterEnv: '', filterOs: ''}" class="space-y-4">

    <!-- Configuration -->
    <div class="card p-4">
        <h3 class="text-sm font-bold text-cyber-accent mb-3">Configuration de l'agent</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div>
                <label class="text-xs text-gray-500 block mb-1">ActivationId</label>
                <input type="text" id="activation_id" value="{{ activation_id }}" class="w-full text-xs" style="font-family:monospace">
            </div>
            <div>
                <label class="text-xs text-gray-500 block mb-1">CustomerId</label>
                <input type="text" id="customer_id" value="{{ customer_id }}" class="w-full text-xs" style="font-family:monospace">
            </div>
            <div>
                <label class="text-xs text-gray-500 block mb-1">ServerUri</label>
                <input type="text" id="server_uri" value="{{ server_uri }}" class="w-full text-xs" style="font-family:monospace">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
            <div>
                <label class="text-xs text-gray-500 block mb-1">Package DEB (Debian/Ubuntu)</label>
                <select id="package_deb" class="w-full text-xs">
                    {% for p in packages.deb %}
                    <option value="{{ p.path }}">v{{ p.version }} — {{ p.name }} ({{ p.size }} Mo)</option>
                    {% endfor %}
                    {% if not packages.deb %}<option value="">Aucun package .deb</option>{% endif %}
                </select>
            </div>
            <div>
                <label class="text-xs text-gray-500 block mb-1">Package RPM (RHEL/CentOS)</label>
                <select id="package_rpm" class="w-full text-xs">
                    {% for p in packages.rpm %}
                    <option value="{{ p.path }}">v{{ p.version }} — {{ p.name }} ({{ p.size }} Mo)</option>
                    {% endfor %}
                    {% if not packages.rpm %}<option value="">Aucun package .rpm</option>{% endif %}
                </select>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <div class="card p-3" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
        <input type="text" x-model="filter" placeholder="Rechercher hostname..." class="text-xs" style="width:200px">
        <select x-model="filterDom" class="text-xs" style="width:150px">
            <option value="">Tous domaines</option>
            {% set doms = servers|map(attribute='domain')|select('string')|unique|sort %}
            {% for d in doms %}{% if d %}<option>{{ d }}</option>{% endif %}{% endfor %}
        </select>
        <select x-model="filterEnv" class="text-xs" style="width:150px">
            <option value="">Tous envs</option>
            {% set envs = servers|map(attribute='env')|select('string')|unique|sort %}
            {% for e in envs %}{% if e %}<option>{{ e }}</option>{% endif %}{% endfor %}
        </select>
        <select x-model="filterOs" class="text-xs" style="width:120px">
            <option value="">Tous OS</option>
            <option value="linux">Linux</option>
            <option value="windows">Windows</option>
        </select>
        <span class="text-xs text-gray-500" x-text="selectedIds.length + ' sélectionné(s)'"></span>
    </div>

    <!-- Actions -->
    <div style="display:flex;gap:8px">
        <form method="POST" action="/qualys/deploy/run" id="deployForm">
            <input type="hidden" name="server_ids" :value="selectedIds.join(',')">
            <input type="hidden" name="activation_id" :value="document.getElementById('activation_id').value">
            <input type="hidden" name="customer_id" :value="document.getElementById('customer_id').value">
            <input type="hidden" name="server_uri" :value="document.getElementById('server_uri').value">
            <input type="hidden" name="package_deb" :value="document.getElementById('package_deb').value">
            <input type="hidden" name="package_rpm" :value="document.getElementById('package_rpm').value">
            <button type="submit" class="btn-primary px-4 py-2 text-sm"
                    :disabled="selectedIds.length === 0"
                    onclick="if(!confirm('Déployer l\'agent sur ' + selectedIds.length + ' serveur(s) ?')) return false; this.textContent='Déploiement en cours...'">
                Déployer l'agent
            </button>
        </form>
        <form method="POST" action="/qualys/deploy/check">
            <input type="hidden" name="server_ids" :value="selectedIds.join(',')">
            <button type="submit" style="padding:8px 16px;font-size:0.85rem;background:#334155;color:#e2e8f0;border:1px solid #475569;border-radius:6px;cursor:pointer"
                    :disabled="selectedIds.length === 0"
                    onclick="this.textContent='Vérification...'">
                Vérifier l'agent
            </button>
        </form>
    </div>

    <!-- Serveurs -->
    <div class="card overflow-hidden">
        <table class="w-full table-cyber text-xs">
            <thead><tr>
                <th class="p-2 w-8"><input type="checkbox" @change="selectAll = $event.target.checked; selectedIds = selectAll ? servers.map(s => s.id) : []"
                    x-init="servers = {{ servers | tojson }}"></th>
                <th class="p-2 text-left">Hostname</th>
                <th class="p-2">OS</th>
                <th class="p-2">Domaine</th>
                <th class="p-2">Env</th>
                <th class="p-2">État</th>
                <th class="p-2">SSH</th>
            </tr></thead>
            <tbody>
            {% for s in servers %}
            <tr x-show="
                (filter === '' || '{{ s.hostname }}'.toLowerCase().includes(filter.toLowerCase()))
                && (filterDom === '' || '{{ s.domain or '' }}' === filterDom)
                && (filterEnv === '' || '{{ s.env or '' }}' === filterEnv)
                && (filterOs === '' || '{{ s.os_family or '' }}' === filterOs)
            " class="border-t border-cyber-border/30 hover:bg-cyber-hover">
                <td class="p-2 text-center"><input type="checkbox" :value="{{ s.id }}"
                    @change="$event.target.checked ? selectedIds.push({{ s.id }}) : selectedIds = selectedIds.filter(x => x !== {{ s.id }})"></td>
                <td class="p-2 font-mono">{{ s.hostname }}</td>
                <td class="p-2 text-center">
                    {% if s.os_family == 'linux' %}<span class="badge badge-green">Linux</span>
                    {% else %}<span class="badge badge-blue">{{ s.os_family or '?' }}</span>{% endif %}
                </td>
                <td class="p-2 text-center text-gray-400">{{ s.domain or '-' }}</td>
                <td class="p-2 text-center">{{ s.env or '-' }}</td>
                <td class="p-2 text-center">
                    {% if s.etat == 'en_production' %}<span class="badge badge-green">Prod</span>
                    {% else %}{{ s.etat or '-' }}{% endif %}
                </td>
                <td class="p-2 text-center text-gray-500">{{ s.ssh_user or 'root' }}:{{ s.ssh_port or 22 }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}