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

    <form hx-put="/servers/{{ s.id }}" hx-target="#detail-panel" hx-swap="innerHTML"
          hx-disabled-elt="find button[type=submit]"
          hx-indicator="#edit-indicator"
          class="space-y-3">

        <!-- IPs + mode connexion -->
        <div class="grid grid-cols-2 gap-2">
            <div>
                <label class="text-xs text-gray-500">IP reelle</label>
                <input type="text" name="ip_reelle" value="{{ ips.ip_reelle or '' }}" placeholder="ex: 10.1.2.30" class="w-full font-mono">
            </div>
            <div>
                <label class="text-xs text-gray-500">IP de connexion</label>
                <input type="text" name="ip_connexion" value="{{ ips.ip_connexion or '' }}" placeholder="ex: 10.1.2.30" class="w-full font-mono">
            </div>
        </div>
        <div>
            <label class="text-xs text-gray-500">Mode de connexion</label>
            <select name="ssh_method" class="w-full">
                {% for m in ['ssh_key','ssh_pwd','ssh_psmp','rdp_psm','rdp_pwd'] %}<option value="{{ m }}" {% if m == s.ssh_method %}selected{% endif %}>{{ m }}</option>{% endfor %}
            </select>
        </div>

        <div>
            <label class="text-xs text-gray-500">Domaine</label>
            <select name="domain_code" class="w-full">
                {% for d in domains %}<option value="{{ d.code }}" {% if d.name == s.domaine %}selected{% endif %}>{{ d.name }}</option>{% endfor %}
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500">Environnement</label>
            <select name="env_code" class="w-full">
                {% for e in envs %}<option value="{{ e.code }}" {% if e.name == s.environnement %}selected{% endif %}>{{ e.name }}</option>{% endfor %}
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500">Domaine DNS (domain_ltd)</label>
            <select name="domain_ltd" class="w-full">
                <option value="">-- Aucun --</option>
                {% for d in dns_list %}<option value="{{ d }}" {% if d == s.domain_ltd %}selected{% endif %}>{{ d }}</option>{% endfor %}
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500">Zone</label>
            <select name="zone" class="w-full">
                {% for z in zones_list %}<option value="{{ z }}" {% if z == s.zone %}selected{% endif %}>{{ z }}</option>{% endfor %}
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500">Tier</label>
            <select name="tier" class="w-full">
                {% for t in ['tier0','tier1','tier2','tier3'] %}<option value="{{ t }}" {% if t == s.tier %}selected{% endif %}>{{ t }}</option>{% endfor %}
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500">Etat</label>
            <select name="etat" class="w-full">
                {% for e in ['Production','Implémentation','Stock','Obsolète','prêt','tests'] %}<option value="{{ e }}" {% if e == s.etat %}selected{% endif %}>{{ e }}</option>{% endfor %}
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500">Owner OS</label>
            <select name="patch_os_owner" class="w-full">
                {% for o in ['secops','ipop','editeur','tiers','na','a_definir'] %}<option value="{{ o }}" {% if o == s.patch_os_owner %}selected{% endif %}>{{ o }}</option>{% endfor %}
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500">Solution applicative <span class="text-gray-600">— modif locale uniquement</span></label>
            <select name="application_id" class="w-full">
                <option value="">-- Aucune --</option>
                {% for a in applications %}<option value="{{ a.id }}" {% if a.id == s.application_id %}selected{% endif %}>{{ a.nom_court }}</option>{% endfor %}
            </select>
        </div>
        <div>
            <label class="text-xs text-gray-500">Responsable</label>
            <input type="text" name="responsable_nom" value="{{ s.responsable_nom or '' }}" class="w-full">
        </div>
        <div>
            <label class="text-xs text-gray-500">Referent technique</label>
            <input type="text" name="referent_nom" value="{{ s.referent_nom or '' }}" class="w-full">
        </div>
        <div class="grid grid-cols-2 gap-2">
            <div>
                <label class="text-xs text-gray-500">Jour pr&eacute;f&eacute;r&eacute; patching</label>
                <select name="pref_patch_jour" class="w-full">
                    {% for j in ['indifferent','lundi','mardi','mercredi','jeudi'] %}<option value="{{ j }}" {% if j == s.pref_patch_jour %}selected{% endif %}>{{ j }}</option>{% endfor %}
                </select>
            </div>
            <div>
                <label class="text-xs text-gray-500">Heure pr&eacute;f&eacute;r&eacute;e</label>
                <input type="text" name="pref_patch_heure" value="{{ s.pref_patch_heure or '' }}" placeholder="ex: 14h00, t&ocirc;t le matin" class="w-full">
            </div>
        </div>
        <div>
            <label class="text-xs text-gray-500">Mode op&eacute;ratoire</label>
            <textarea name="mode_operatoire" rows="3" class="w-full">{{ s.mode_operatoire or '' }}</textarea>
        </div>
        <div>
            <label class="text-xs text-gray-500">Commentaire</label>
            <textarea name="commentaire" rows="2" class="w-full">{{ s.commentaire or '' }}</textarea>
        </div>

        <div class="flex gap-2 pt-2 items-center">
            <button type="submit" class="btn-primary px-4 py-2 text-sm flex-1">
                <span class="htmx-no-request">Sauvegarder</span>
                <span class="htmx-only-request">⏳ Sauvegarde…</span>
            </button>
            <button type="button" class="btn-sm bg-cyber-border text-gray-300 px-4 py-2" hx-get="/servers/{{ s.id }}/detail" hx-target="#detail-panel" hx-swap="innerHTML">Annuler</button>
        </div>
        <div id="edit-indicator" class="htmx-indicator text-xs text-cyber-yellow pt-1">
            ⏳ Sauvegarde en cours…
        </div>
    </form>
</div>
