{% extends 'base.html' %}
{% block title %}Tour de garde SecOps{% endblock %}
{% block content %}
<div class="flex justify-between items-center mb-4">
    <div>
        <h2 class="text-xl font-bold text-cyber-accent">Tour de garde SecOps</h2>
        <p class="text-xs text-gray-500 mt-1">Planning hebdomadaire des astreintes et responsabilites.</p>
    </div>
    <div class="flex gap-2">
        {% for y in years %}<a href="?year={{ y }}" class="btn-sm {% if y == year %}bg-cyber-accent text-black{% else %}bg-cyber-border text-gray-300{% endif %} px-3 py-1 text-xs">{{ y }}</a>{% endfor %}
    </div>
</div>

<!-- Semaine en cours -->
{% for r in rows %}
{% if r.week_number == current_week and year == current_year %}
<div class="card p-4 mb-4" style="border-left:4px solid #00ff88;">
    <div class="flex justify-between items-center mb-2">
        <h3 class="text-sm font-bold text-cyber-green">Cette semaine — {{ r.week_code }}</h3>
        <span class="text-xs text-gray-500">{{ r.week_start.strftime('%d/%m') if r.week_start else '' }} → {{ r.week_end.strftime('%d/%m/%Y') if r.week_end else '' }}</span>
    </div>
    {% if r.absences %}<p class="text-xs text-cyber-yellow mb-2">Absences : {{ r.absences }}</p>{% endif %}
    <div style="display:flex;flex-wrap:wrap;gap:8px;">
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827">
            <div class="text-sm font-bold text-cyan-400">{{ r.tdg_s1 or '-' }}</div>
            <div style="font-size:10px" class="text-gray-500">Sentinel One</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827">
            <div class="text-sm font-bold text-purple-400">{{ r.tdg_symantec or '-' }}</div>
            <div style="font-size:10px" class="text-gray-500">Symantec</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827">
            <div class="text-sm font-bold text-blue-400">{{ r.tdg_m365 or '-' }}</div>
            <div style="font-size:10px" class="text-gray-500">M365</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827">
            <div class="text-sm font-bold text-green-400">{{ r.tdg_commvault or '-' }}</div>
            <div style="font-size:10px" class="text-gray-500">Commvault</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827">
            <div class="text-sm font-bold text-red-400">{{ r.tdg_dmz or '-' }}</div>
            <div style="font-size:10px" class="text-gray-500">DMZ</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827">
            <div class="text-sm font-bold text-yellow-400">{{ r.tdg_meteo or '-' }}</div>
            <div style="font-size:10px" class="text-gray-500">Meteo</div>
        </div>
        <div class="card p-2 text-center" style="flex:1;min-width:0;background:#111827">
            <div class="text-sm font-bold text-orange-400">{{ r.tdg_incident_majeur or '-' }}</div>
            <div style="font-size:10px" class="text-gray-500">Incident Maj.</div>
        </div>
    </div>
</div>
{% endif %}
{% endfor %}

<!-- Competences -->
<div class="card p-4 mb-4">
    <h3 class="text-sm font-bold text-cyber-accent mb-3">Matrice competences</h3>
    <table class="w-full table-cyber text-xs">
        <thead><tr>
            <th class="p-2 text-left">Nom</th>
            <th class="p-2 text-center">S1</th>
            <th class="p-2 text-center">Commvault</th>
            <th class="p-2 text-center">M365</th>
            <th class="p-2 text-center">Symantec</th>
            <th class="p-2 text-center">Gardes {{ year }}</th>
        </tr></thead>
        <tbody>
        {% for c in competences %}
        <tr class="border-t border-cyber-border/30">
            <td class="p-2 font-bold text-cyber-accent">{{ c.nom }}</td>
            <td class="p-2 text-center">{% if c.s1 %}<span class="text-cyber-green">✓</span>{% else %}<span class="text-gray-600">—</span>{% endif %}</td>
            <td class="p-2 text-center">{% if c.commvault %}<span class="text-cyber-green">✓</span>{% else %}<span class="text-gray-600">—</span>{% endif %}</td>
            <td class="p-2 text-center">{% if c.m365 %}<span class="text-cyber-green">✓</span>{% else %}<span class="text-gray-600">—</span>{% endif %}</td>
            <td class="p-2 text-center">{% if c.symantec %}<span class="text-cyber-green">✓</span>{% else %}<span class="text-gray-600">—</span>{% endif %}</td>
            <td class="p-2 text-center text-cyber-accent font-bold">{{ stats.get(c.nom, 0) }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!-- Tableau complet -->
<div class="card overflow-x-auto">
    <table class="w-full table-cyber text-xs">
        <thead><tr>
            <th class="p-2 text-center" style="min-width:40px">Sem.</th>
            <th class="p-2 text-left" style="min-width:100px">Dates</th>
            <th class="p-2 text-left" style="min-width:120px">Absences</th>
            <th class="p-2 text-center">S1</th>
            <th class="p-2 text-center">Symantec</th>
            <th class="p-2 text-center">M365</th>
            <th class="p-2 text-center">Commvault</th>
            <th class="p-2 text-center">Meteo</th>
            <th class="p-2 text-center">DMZ</th>
            <th class="p-2 text-center">SafeNet</th>
            <th class="p-2 text-center">Quarant.</th>
            <th class="p-2 text-center">Inc. Maj.</th>
        </tr></thead>
        <tbody>
        {% for r in rows %}
        <tr class="border-t border-cyber-border/30 {% if r.week_number == current_week and year == current_year %}bg-cyber-accent/10{% endif %}" {% if r.week_number == current_week and year == current_year %}id="current"{% endif %}>
            <td class="p-2 text-center font-bold {% if r.week_number == current_week and year == current_year %}text-cyber-green{% else %}text-gray-400{% endif %}">{{ r.week_code }}</td>
            <td class="p-2 text-gray-400" style="font-size:10px">{{ r.week_start.strftime('%d/%m') if r.week_start else '' }} → {{ r.week_end.strftime('%d/%m') if r.week_end else '' }}</td>
            <td class="p-2 text-cyber-yellow" style="font-size:10px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ r.absences or '' }}">{{ r.absences or '' }}</td>
            <td class="p-2 text-center text-cyan-400">{{ r.tdg_s1 or '-' }}</td>
            <td class="p-2 text-center text-purple-400">{{ r.tdg_symantec or '-' }}</td>
            <td class="p-2 text-center text-blue-400">{{ r.tdg_m365 or '-' }}</td>
            <td class="p-2 text-center text-green-400">{{ r.tdg_commvault or '-' }}</td>
            <td class="p-2 text-center text-yellow-400">{{ r.tdg_meteo or '-' }}</td>
            <td class="p-2 text-center text-red-400">{{ r.tdg_dmz or '-' }}</td>
            <td class="p-2 text-center text-gray-300">{{ r.tdg_safenet or '-' }}</td>
            <td class="p-2 text-center text-gray-300">{{ r.tdg_quarantaine or '-' }}</td>
            <td class="p-2 text-center text-orange-400">{{ r.tdg_incident_majeur or '-' }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<script>
document.getElementById('current')?.scrollIntoView({behavior:'smooth', block:'center'});
</script>
{% endblock %}
