{% extends 'admin/_layout.html.twig' %}

{% block title %}Noms de domaine - Services - Association E-Cosplay{% endblock %}

{% block admin_content %}
<div class="page-container">
    <h1 class="text-2xl font-bold heading-page mb-8">Noms de domaine</h1>

    <div class="mb-6">
        <div class="relative">
            <input type="text" id="search-ndd" placeholder="Rechercher un domaine, client..."
                   class="w-full px-4 py-3 pl-10 input-glass text-sm font-medium" autocomplete="off">
            <svg class="w-4 h-4 absolute left-3 top-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        </div>
        <div id="search-ndd-results" class="hidden glass border-t-0 bg-white max-h-64 overflow-y-auto"></div>
    </div>

    <div class="glass overflow-x-auto overflow-hidden">
        <table class="w-full text-sm">
            <thead>
                <tr class="glass-dark text-white">
                    <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Domaine</th>
                    <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Client</th>
                    <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Registrar</th>
                    <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Cloudflare</th>
                    <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Gestion</th>
                    <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Facturation</th>
                    <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Expiration</th>
                </tr>
            </thead>
            <tbody>
                {% for domain in domains %}
                    <tr class="border-b border-white/20 hover:bg-white/50">
                        <td class="px-4 py-3 font-bold font-mono">{{ domain.fqdn }}</td>
                        <td class="px-4 py-3">
                            <a href="{{ path('app_admin_clients_show', {id: domain.customer.id}) }}" class="font-bold hover:text-[#fabf04] transition-colors">{{ domain.customer.fullName }}</a>
                            {% if domain.customer.raisonSociale %}
                                <span class="text-[10px] text-gray-400 block">{{ domain.customer.email }}</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-xs">{{ domain.registrar ?? '—' }}</td>
                        <td class="px-4 py-3 text-center">
                            {% if domain.zoneIdCloudflare %}
                                <span class="px-2 py-0.5 bg-orange-500/20 text-orange-700 font-bold uppercase text-[10px]">{{ domain.zoneCloudflare ?? 'Lie' }}</span>
                            {% else %}
                                <span class="text-gray-300">—</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-center">{% if domain.isGestion %}<span class="text-green-600 font-bold">&#10003;</span>{% else %}<span class="text-gray-300">&#10007;</span>{% endif %}</td>
                        <td class="px-4 py-3 text-center">{% if domain.isBilling %}<span class="text-green-600 font-bold">&#10003;</span>{% else %}<span class="text-gray-300">&#10007;</span>{% endif %}</td>
                        <td class="px-4 py-3 text-xs">
                            {% if domain.expiredAt %}
                                <span class="{{ domain.isExpired ? 'text-red-600 font-bold' : (domain.isExpiringSoon ? 'text-yellow-600 font-bold' : 'text-gray-500') }}">{{ domain.expiredAt|date('d/m/Y') }}</span>
                            {% else %}
                                <span class="text-gray-300">—</span>
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="7" class="px-4 py-8 text-center text-gray-400 font-bold">Aucun nom de domaine.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <p class="mt-3 text-xs text-gray-400">{{ domains|length }} domaine(s)</p>
</div>
{% endblock %}
