{% extends 'base.html' %}
{% block title %}Contacts{% endblock %}
{% block content %}
<h2 class="text-xl font-bold text-cyber-accent mb-4">Contacts & Responsables <span class="text-sm text-gray-500">({{ contacts|length }})</span></h2>

{% if msg %}
<div class="mb-3 p-2 rounded text-sm {% if msg == 'exists' %}bg-red-900/30 text-cyber-red{% else %}bg-green-900/30 text-cyber-green{% endif %}">
    {% if msg == 'added' %}Contact ajouté.{% elif msg == 'edited' %}Contact modifié.{% elif msg == 'toggled' %}Statut modifié.{% elif msg == 'deleted' %}Contact supprimé.{% elif msg == 'scope_added' %}Scope ajouté.{% elif msg == 'scope_deleted' %}Scope supprimé.{% elif msg == 'exists' %}Ce mail existe déjà.{% endif %}
</div>
{% endif %}

<!-- Filtres -->
<div class="flex gap-2 mb-4 items-center flex-wrap">
    <a href="/contacts" class="btn-sm {% if not role_filter %}bg-cyber-accent text-black{% else %}bg-cyber-border text-gray-300{% endif %}">Tous</a>
    {% for r in roles_in_db %}
    <a href="/contacts?role={{ r }}" class="btn-sm {% if role_filter == r %}bg-cyber-accent text-black{% else %}bg-cyber-border text-gray-300{% endif %}">{{ r }}</a>
    {% endfor %}
    <form method="GET" action="/contacts" class="flex gap-1 ml-auto">
        <input type="text" name="search" value="{{ search or '' }}" placeholder="Nom ou email..." class="text-xs py-1 px-2 w-36">
        <input type="text" name="server" value="{{ server or '' }}" placeholder="Serveur..." class="text-xs py-1 px-2 w-36 font-mono">
        <button type="submit" class="btn-sm bg-cyber-border text-cyber-accent">Chercher</button>
    </form>
</div>

{% if server %}
<div class="mb-3 p-3 card">
    {% if server_info %}
    <div class="flex items-center gap-3 text-sm">
        <span class="text-gray-500">Contacts pour</span>
        <span class="font-mono text-cyber-accent font-bold">{{ server_info.hostname }}</span>
        <span class="badge badge-blue">{{ server_info.domain_name or '-' }}</span>
        <span class="badge {% if server_info.env_name == 'Production' %}badge-green{% else %}badge-yellow{% endif %}">{{ server_info.env_name or '-' }}</span>
        {% if server_info.app_type %}<span class="badge badge-gray">{{ server_info.app_type }}</span>{% endif %}
        {% if server_info.app_group %}<span class="text-xs text-gray-500">groupe: {{ server_info.app_group }}</span>{% endif %}
    </div>
    {% else %}
    <span class="text-cyber-red text-sm">Serveur "{{ server }}" non trouvé en base</span>
    {% endif %}
</div>
{% endif %}

<!-- Panel détail -->
<div id="contact-detail" class="card mb-4 p-5" style="display:none"></div>

<!-- Table -->
<div class="card overflow-x-auto">
    <table class="w-full table-cyber text-sm">
        <thead><tr>
            <th class="text-left p-2">Nom</th>
            <th class="text-left p-2">Email</th>
            <th class="p-2">Rôle</th>
            <th class="text-left p-2">Scopes</th>
            <th class="p-2">Actif</th>
            {% if can_edit_contacts %}<th class="p-2">Actions</th>{% endif %}
        </tr></thead>
        <tbody>
        {% for c in contacts %}
        <tr class="{% if not c.is_active %}opacity-40{% endif %}">
            <td class="p-2 font-bold text-cyber-accent">{{ c.name }}</td>
            <td class="p-2 text-xs text-gray-400">{{ c.email }}</td>
            <td class="p-2 text-center"><span class="badge {% if 'responsable' in c.role %}badge-blue{% elif 'referent' in c.role %}badge-yellow{% elif 'ra_' in c.role %}badge-green{% else %}badge-gray{% endif %}">{{ c.role }}</span></td>
            <td class="p-2 text-xs text-gray-400" style="max-width:300px">{{ (c.scopes_summary or '-')[:80] }}</td>
            <td class="p-2 text-center"><span class="badge {% if c.is_active %}badge-green{% else %}badge-red{% endif %}">{{ 'Oui' if c.is_active else 'Non' }}</span></td>
            {% if can_edit_contacts %}
            <td class="p-2 text-center">
                <div class="flex gap-1 justify-center">
                    <button class="btn-sm bg-cyber-border text-cyber-accent"
                        hx-get="/contacts/{{ c.id }}" hx-target="#contact-detail" hx-swap="innerHTML"
                        onclick="document.getElementById('contact-detail').style.display='block'; window.scrollTo({top:0,behavior:'smooth'})">Éditer</button>
                    <form method="POST" action="/contacts/{{ c.id }}/delete" style="display:inline">
                        <button class="btn-sm bg-red-900/30 text-cyber-red" onclick="return confirm('Supprimer {{ c.name }} ?')">Suppr</button>
                    </form>
                </div>
            </td>
            {% endif %}
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{% if can_edit_contacts %}
<!-- Ajouter -->
<div class="card p-4 mt-4">
    <h4 class="text-sm font-bold text-cyber-accent mb-3">Ajouter un contact</h4>
    <form method="POST" action="/contacts/add" class="flex gap-3 items-end flex-wrap">
        <div>
            <label class="text-xs text-gray-500">Nom complet</label>
            <input type="text" name="name" required class="text-xs py-1 px-2 w-48">
        </div>
        <div>
            <label class="text-xs text-gray-500">Email</label>
            <input type="email" name="email" required class="text-xs py-1 px-2 w-52">
        </div>
        <div>
            <label class="text-xs text-gray-500">Rôle</label>
            <select name="contact_role" class="text-xs py-1 px-2">
                {% for code, label in roles %}<option value="{{ code }}">{{ label }}</option>{% endfor %}
            </select>
        </div>
        <button type="submit" class="btn-primary px-4 py-1 text-sm">Ajouter</button>
    </form>
</div>
{% endif %}
{% endblock %}