patchcenter/app/templates/partials/server_detail.html

<div class="p-4">
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-bold text-cyber-accent">{{ s.hostname }}</h3>
        <button onclick="closePanel()" class="text-gray-500 hover:text-white text-xl">&times;</button>
    </div>

    <!-- Identification -->
    <div class="mb-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Identification</h4>
        <div class="space-y-1 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">FQDN</span><span>{{ s.fqdn or '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Domain.ltd</span><span>{{ s.domain_ltd or '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Machine</span><span>{{ s.machine_type }}</span></div>
        </div>
    </div>

    <!-- Reseau / IPs -->
    <div class="mb-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Reseau</h4>
        <div class="space-y-1 text-sm">
            <div class="flex justify-between">
                <span class="text-gray-500">IP reelle</span>
                <span class="font-mono">{{ ips.ip_reelle or '-' }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">IP de connexion</span>
                <span class="font-mono text-cyber-green">{{ ips.ip_connexion or '-' }}</span>
            </div>
            {% if ips.autres_ips %}
            <div class="mt-1">
                <span class="text-gray-500 text-xs">Autres IPs</span>
                <div class="mt-1 space-y-0.5">
                {% for a in ips.autres_ips %}
                    <div class="flex justify-between text-xs">
                        <span class="font-mono text-gray-300">{{ a.ip }}</span>
                        <span class="text-gray-500">{{ a.type }}{% if a.interface %} ({{ a.interface }}){% endif %}{% if a.description %} - {{ a.description }}{% endif %}</span>
                    </div>
                {% endfor %}
                </div>
            </div>
            {% endif %}
            <div class="flex justify-between"><span class="text-gray-500">Mode connexion</span><span class="badge {% if 'psmp' in s.ssh_method or 'psm' in s.ssh_method %}badge-yellow{% elif 'rdp' in s.ssh_method %}badge-blue{% else %}badge-green{% endif %}">{{ s.ssh_method }}</span></div>
        </div>
    </div>

    <!-- Classification -->
    <div class="mb-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Classification</h4>
        <div class="space-y-1 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">Domaine</span><span>{{ s.domaine }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Environnement</span><span class="badge {% if s.environnement == 'Production' %}badge-green{% else %}badge-yellow{% endif %}">{{ s.environnement }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Zone</span><span class="badge {% if s.zone == 'DMZ' %}badge-red{% else %}badge-blue{% endif %}">{{ s.zone or 'LAN' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Tier</span><span class="badge {% if s.tier == 'tier0' %}badge-red{% elif s.tier == 'tier1' %}badge-yellow{% else %}badge-blue{% endif %}">{{ s.tier }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Etat</span><span class="badge {% if s.etat == 'en_production' %}badge-green{% elif s.etat == 'decommissionne' %}badge-red{% else %}badge-yellow{% endif %}">{{ s.etat }}</span></div>
        </div>
    </div>

    <!-- Technique -->
    <div class="mb-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Technique</h4>
        <div class="space-y-1 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">OS</span><span>{{ s.os_family or '-' }}</span></div>
            <div class="text-xs text-gray-400 mt-1">{{ s.os_version or '' }}</div>
            <div class="flex justify-between"><span class="text-gray-500">Licence</span><span class="badge {% if s.licence_support == 'active' %}badge-green{% elif s.licence_support == 'eol' %}badge-red{% else %}badge-yellow{% endif %}">{{ s.licence_support }}</span></div>
        </div>
    </div>

    <!-- Patching -->
    <div class="mb-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Patching</h4>
        <div class="space-y-1 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">Owner OS</span><span>{{ s.patch_os_owner }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Fréquence</span><span>{{ s.patch_frequency }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Podman</span><span>{{ 'Oui' if s.is_podman else 'Non' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Prévenance</span><span>{{ 'Oui' if s.need_pct else 'Non' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Satellite</span><span>{% if s.satellite_host %}{% if 'sat1' in s.satellite_host %}SAT1 (DMZ){% elif 'sat2' in s.satellite_host %}SAT2 (LAN){% else %}{{ s.satellite_host }}{% endif %}{% else %}N/A{% endif %}</span></div>
        </div>
    </div>

    <!-- Responsables -->
    <div class="mb-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Responsables</h4>
        <div class="space-y-1 text-sm">
            <div><span class="text-gray-500">Responsable:</span> <span>{{ s.responsable_nom or '-' }}</span></div>
            <div><span class="text-gray-500">Référent:</span> <span>{{ s.referent_nom or '-' }}</span></div>
        </div>
    </div>

    {% if s.mode_operatoire %}
    <div class="mb-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Mode operatoire</h4>
        <p class="text-xs text-gray-400">{{ s.mode_operatoire }}</p>
    </div>
    {% endif %}

    {% if tags %}
    <div class="mb-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Tags Qualys</h4>
        <div class="flex flex-wrap gap-1">
        {% for tag in tags %}
            <span class="badge badge-blue">{{ tag }}</span>
        {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if sync_msg is defined and sync_msg %}
    <div class="mb-3 p-2 rounded text-xs {% if sync_ok %}bg-green-900/30 text-cyber-green{% else %}bg-red-900/30 text-cyber-red{% endif %}">
        {{ sync_msg }}
    </div>
    {% endif %}

    <!-- Actions -->
    <div class="flex gap-2 mt-4">
        <button class="btn-primary px-3 py-1 text-sm flex-1" hx-get="/servers/{{ s.id }}/edit" hx-target="#detail-panel" hx-swap="innerHTML">Éditer</button>
        <button class="btn-sm bg-cyber-border text-cyber-accent" hx-post="/servers/{{ s.id }}/sync-qualys" hx-target="#detail-panel" hx-swap="innerHTML" hx-indicator="#sync-spin">Sync Qualys</button>
        <button class="btn-sm bg-cyber-border text-gray-300" onclick="closePanel()">Fermer</button>
    </div>
    <span id="sync-spin" class="htmx-indicator text-xs text-gray-500 mt-1">Synchro en cours...</span>
</div>