{% extends "base.html" %}

{% block content %}

{# ── Page header ───────────────────────────────────────────────────── #}
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
    <div>
        <h1 class="text-xl font-semibold text-slate-900">Segments</h1>
        <p class="text-sm text-slate-500 mt-0.5">Group users for use in flag targeting rules</p>
    </div>
    <button
        hx-get="{{ prefix }}/modal/segment/create"
        hx-target="#switchly-modal"
        hx-swap="innerHTML"
        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white
               bg-violet-700 hover:bg-violet-600 rounded-lg shadow-sm
               focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-600 focus:ring-offset-white
               transition-all active:scale-95 self-start sm:self-auto whitespace-nowrap">
        <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
        </svg>
        Create Segment
    </button>
</div>

{# ── Stats + Search row ─────────────────────────────────────────────── #}
{% set total = segments | length %}
{% set ns = namespace(included_total=0, excluded_total=0) %}
{% for s in segments %}
{% set ns.included_total = ns.included_total + (s.included | length) %}
{% set ns.excluded_total = ns.excluded_total + (s.excluded | length) %}
{% endfor %}
<div class="flex flex-col lg:flex-row lg:items-center gap-3 mb-4">
    {# Stats — 3 cols on all sizes, sits left on lg+ #}
    <div class="grid grid-cols-3 gap-2 sm:gap-3 lg:shrink-0">
        <div class="bg-white rounded-xl border border-slate-200 px-3 py-2.5 sm:px-4 sm:py-3 flex items-center gap-2 sm:gap-3">
            <div class="hidden sm:flex w-8 h-8 rounded-lg bg-slate-100 items-center justify-center shrink-0">
                <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <div>
                <div class="text-lg sm:text-2xl font-bold text-slate-900 tabular-nums leading-none">{{ total }}</div>
                <div class="text-[10px] sm:text-xs text-slate-500 mt-0.5 leading-tight">Segments</div>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-slate-200 px-3 py-2.5 sm:px-4 sm:py-3 flex items-center gap-2 sm:gap-3">
            <div class="hidden sm:flex w-8 h-8 rounded-lg bg-emerald-50 items-center justify-center shrink-0">
                <svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                </svg>
            </div>
            <div>
                <div class="text-lg sm:text-2xl font-bold text-emerald-600 tabular-nums leading-none">{{ ns.included_total }}</div>
                <div class="text-[10px] sm:text-xs text-slate-500 mt-0.5 leading-tight">Included</div>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-slate-200 px-3 py-2.5 sm:px-4 sm:py-3 flex items-center gap-2 sm:gap-3">
            <div class="hidden sm:flex w-8 h-8 rounded-lg bg-red-50 items-center justify-center shrink-0">
                <svg class="w-4 h-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 7a4 4 0 11-8 0 4 4 0 018 0zM9 14a6 6 0 00-6 6v1h12v-1a6 6 0 00-6-6zM21 12h-6"/>
                </svg>
            </div>
            <div>
                <div class="text-lg sm:text-2xl font-bold text-red-500 tabular-nums leading-none">{{ ns.excluded_total }}</div>
                <div class="text-[10px] sm:text-xs text-slate-500 mt-0.5 leading-tight">Excluded</div>
            </div>
        </div>
    </div>

    {# Search — below stats on mobile, right side on lg+ #}
    {% if segments %}
    <div class="flex items-center gap-2 border border-slate-200 rounded-lg bg-white px-3 py-2
                 focus-within:ring-1 focus-within:ring-violet-500 focus-within:border-violet-500
                 transition-all lg:ml-auto lg:w-64">
        <svg class="w-4 h-4 text-slate-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803 7.5 7.5 0 0016.803 15.803z"/>
        </svg>
        <input type="text"
               name="q"
               placeholder="Search segments…"
               autocomplete="off"
               hx-get="{{ prefix }}/segments/rows"
               hx-trigger="input changed delay:300ms"
               hx-target="#segment-table-body"
               class="flex-1 text-sm bg-transparent outline-none text-slate-700 placeholder:text-slate-400 min-w-0">
    </div>
    {% endif %}
</div>

{# ── Segments table — ALWAYS rendered so #segment-table-body always exists ─ #}
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden switchly-table-outer">
    <div class="scroll-x">
        <table class="w-full text-left min-w-[520px] mobile-cards">
            <thead>
                <tr class="border-b border-slate-200 bg-slate-50">
                    <th class="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest">Key</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest">Name</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest">Included</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest">Excluded</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest hidden md:table-cell">Rules</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest text-right">Actions</th>
                </tr>
            </thead>
            <tbody id="segment-table-body" class="divide-y divide-slate-100">
                {% include "partials/segment_rows.html" with context %}
            </tbody>
        </table>
    </div>
</div>

{% endblock %}