<div>
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-bold text-cyber-accent">{{ e.hostname }}</h3>
        <button onclick="document.getElementById('audit-detail').style.display='none'" class="text-gray-500 hover:text-white text-xl">&times;</button>
    </div>

    <div class="grid grid-cols-2 gap-4">
        <!-- Systeme -->
        <div>
            <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Systeme</h4>
            <div class="space-y-1 text-xs">
                <div><span class="text-gray-500">Connexion:</span> <span class="font-mono">{{ e.connection_method or '-' }}</span></div>
                <div><span class="text-gray-500">FQDN resolu:</span> <span class="font-mono text-cyber-green">{{ e.resolved_fqdn or '-' }}</span></div>
                <div><span class="text-gray-500">OS:</span> {{ e.os_release or '-' }}</div>
                <div><span class="text-gray-500">Kernel:</span> <span class="font-mono">{{ e.kernel or '-' }}</span></div>
                <div><span class="text-gray-500">Uptime:</span> {{ e.uptime or '-' }}</div>
                <div><span class="text-gray-500">SELinux:</span> <span class="badge {% if e.selinux == 'Enforcing' %}badge-green{% elif e.selinux == 'Permissive' %}badge-yellow{% else %}badge-red{% endif %}">{{ e.selinux or '-' }}</span></div>
                <div><span class="text-gray-500">Audit:</span> {{ e.audit_date.strftime('%d/%m/%Y %H:%M') if e.audit_date else '-' }}</div>
            </div>
        </div>

        <!-- Agents -->
        <div>
            <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Agents & Securite</h4>
            <div class="space-y-1 text-xs">
                <div><span class="text-gray-500">Qualys:</span> <span class="badge {% if e.qualys_active %}badge-green{% else %}badge-red{% endif %}">{{ 'Actif' if e.qualys_active else 'Inactif' }}</span></div>
                <div><span class="text-gray-500">SentinelOne:</span> <span class="badge {% if e.sentinelone_active %}badge-green{% else %}badge-red{% endif %}">{{ 'Actif' if e.sentinelone_active else 'Inactif' }}</span></div>
                {% if e.agents %}<div class="mt-1 font-mono text-gray-400" style="white-space:pre-line">{{ e.agents }}</div>{% endif %}
            </div>
        </div>
    </div>

    <!-- Espace disque -->
    <div class="mt-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Espace disque {% if e.disk_alert %}<span class="badge badge-red ml-2">ALERTE</span>{% endif %}</h4>
        {% if e.disk_detail %}<pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded overflow-x-auto">{{ e.disk_detail }}</pre>{% endif %}
    </div>

    <!-- Apps installees -->
    {% if e.apps_installed %}
    <div class="mt-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Applications installees</h4>
        <pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded overflow-x-auto" style="max-height:150px">{{ e.apps_installed }}</pre>
    </div>
    {% endif %}

    <div class="grid grid-cols-2 gap-4 mt-4">
        <!-- Services running -->
        {% if e.services_running %}
        <div>
            <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Services running</h4>
            <pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded overflow-y-auto" style="max-height:200px">{{ e.services_running }}</pre>
        </div>
        {% endif %}

        <!-- Running sans auto-start -->
        {% if e.running_not_enabled %}
        <div>
            <h4 class="text-xs font-bold uppercase mb-2 border-b border-cyber-border pb-1 text-cyber-yellow">Running SANS auto-start</h4>
            <pre class="text-xs text-cyber-yellow font-mono bg-cyber-bg p-2 rounded overflow-y-auto" style="max-height:200px">{{ e.running_not_enabled }}</pre>
        </div>
        {% endif %}
    </div>

    <div class="grid grid-cols-2 gap-4 mt-4">
        <!-- Containers -->
        {% if e.containers %}
        <div>
            <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Containers</h4>
            <pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded">{{ e.containers }}</pre>
        </div>
        {% endif %}

        <!-- Ports -->
        {% if e.listening_ports %}
        <div>
            <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Ports en ecoute</h4>
            <pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded overflow-y-auto" style="max-height:150px">{{ e.listening_ports }}</pre>
        </div>
        {% endif %}
    </div>

    <div class="grid grid-cols-2 gap-4 mt-4">
        <!-- Scripts -->
        {% if e.applis_scripts %}
        <div>
            <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Scripts /applis</h4>
            <pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded overflow-y-auto" style="max-height:150px">{{ e.applis_scripts }}</pre>
        </div>
        {% endif %}

        <!-- Crontab -->
        {% if e.crontab_root and e.crontab_root != 'empty' %}
        <div>
            <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Crontab root</h4>
            <pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded overflow-y-auto" style="max-height:150px">{{ e.crontab_root }}</pre>
        </div>
        {% endif %}
    </div>

    {% if e.network_mounts and e.network_mounts != 'none' %}
    <div class="mt-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Montages reseau</h4>
        <pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded">{{ e.network_mounts }}</pre>
    </div>
    {% endif %}

    {% if e.failed_services %}
    <div class="mt-4">
        <h4 class="text-xs text-cyber-red font-bold uppercase mb-2 border-b border-red-900 pb-1">Services en echec</h4>
        <pre class="text-xs text-cyber-red font-mono bg-red-900/20 p-2 rounded">{{ e.failed_services }}</pre>
    </div>
    {% endif %}

    {% if e.db_detected and e.db_detected != 'done' %}
    <div class="mt-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Base de donnees</h4>
        <pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded">{{ e.db_detected }}</pre>
    </div>
    {% endif %}

    {% if e.cluster_detected and e.cluster_detected != 'no_cluster' %}
    <div class="mt-4">
        <h4 class="text-xs text-cyber-accent font-bold uppercase mb-2 border-b border-cyber-border pb-1">Cluster</h4>
        <pre class="text-xs text-gray-400 font-mono bg-cyber-bg p-2 rounded">{{ e.cluster_detected }}</pre>
    </div>
    {% endif %}
</div>
