{% set _colour = flag_type_colours.get(flag.type.value, 'slate') %}
<tr id="flag-row-{{ flag.key }}" class="group hover:bg-slate-50 transition-colors">

    {# ── Key ─────────────────────────────────────────────────────────── #}
    <td class="px-5 py-3.5" data-label="Key">
        <a href="{{ prefix }}/flags/{{ flag.key }}"
           class="font-mono text-sm text-violet-600 hover:text-violet-800 hover:underline transition-colors">
            {{ flag.key }}
        </a>
    </td>

    {# ── Type badge ───────────────────────────────────────────────────── #}
    <td class="px-4 py-3.5" data-label="Type">
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                     bg-{{ _colour }}-50 text-{{ _colour }}-700 ring-1 ring-inset ring-{{ _colour }}-200">
            {{ flag.type.value }}
        </span>
    </td>

    {# ── Status ───────────────────────────────────────────────────────── #}
    <td class="px-4 py-3.5" data-label="Status">
        {% if flag.enabled %}
        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium
                     bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>Enabled
        </span>
        {% else %}
        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium
                     bg-slate-100 text-slate-500 ring-1 ring-inset ring-slate-200">
            <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>Disabled
        </span>
        {% endif %}
    </td>

    {# ── Variations ───────────────────────────────────────────────────── #}
    <td class="px-4 py-3.5 hidden md:table-cell" data-label="Variations">
        {% if flag.variations %}
        {% set names = flag.variations | map(attribute='name') | list %}
        <span class="text-sm text-slate-500">
            {{ names[:4] | join(', ') }}{% if names | length > 4 %}&nbsp;<span class="text-slate-400">…</span>{% endif %}
        </span>
        {% else %}
        <span class="text-slate-400">—</span>
        {% endif %}
    </td>

    {# ── Fallthrough ──────────────────────────────────────────────────── #}
    <td class="px-4 py-3.5 hidden lg:table-cell" data-label="Fallthrough">
        {% if flag.fallthrough is string %}
        <span class="text-sm text-slate-500 font-mono">{{ flag.fallthrough }}</span>
        {% elif flag.fallthrough is iterable %}
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-violet-50 text-violet-700 ring-1 ring-inset ring-violet-200">rollout</span>
        {% else %}
        <span class="text-slate-400">—</span>
        {% endif %}
    </td>

    {# ── Actions ──────────────────────────────────────────────────────── #}
    <td class="px-4 py-3.5" data-label="Actions">

        <div class="flex flex-wrap justify-end gap-1.5 w-full">
            {# Eval #}
            <button
                hx-get="{{ prefix }}/modal/flag/{{ flag.key }}/eval"
                hx-target="#switchly-modal"
                hx-swap="innerHTML"
                title="Evaluate flag"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium
                       text-violet-700 bg-violet-50 border border-violet-200 rounded-md
                       hover:bg-violet-100 hover:border-violet-300 transition-all active:scale-95">
                <svg class="w-3 h-3 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z"/>
                </svg>
                Eval
            </button>

            {# View #}
            <a href="{{ prefix }}/flags/{{ flag.key }}"
               class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium
                      text-slate-600 bg-white border border-slate-200 rounded-md
                      hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95">
                <svg class="w-3 h-3 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                View
            </a>

            {# Enable / Disable #}
            {% if flag.enabled %}
            <button
                onclick="switchlyConfirmToggle({key:'{{ flag.key }}', action:'disable', url:'{{ prefix }}/flags/{{ flag.key }}/disable', targetId:'flag-row-{{ flag.key }}', swap:'outerHTML'})"
                title="Disable flag"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium
                       text-amber-700 bg-amber-50 border border-amber-200 rounded-md
                       hover:bg-amber-100 hover:border-amber-300 transition-all active:scale-95">
                <svg class="w-3 h-3 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                </svg>
                Disable
            </button>
            {% else %}
            <button
                onclick="switchlyConfirmToggle({key:'{{ flag.key }}', action:'enable', url:'{{ prefix }}/flags/{{ flag.key }}/enable', targetId:'flag-row-{{ flag.key }}', swap:'outerHTML'})"
                title="Enable flag"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium
                       text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-md
                       hover:bg-emerald-100 hover:border-emerald-300 transition-all active:scale-95">
                <svg class="w-3 h-3 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                </svg>
                Enable
            </button>
            {% endif %}

            {# Delete #}
            <button
                onclick="switchlyConfirmDelete({key:'{{ flag.key }}',url:'{{ prefix }}/flags/{{ flag.key }}',targetId:'flag-row-{{ flag.key }}'})"
                title="Delete flag"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium
                       text-red-500 bg-transparent border border-transparent rounded-md
                       hover:bg-red-50 hover:border-red-200 transition-all active:scale-95">
                <svg class="w-3 h-3 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
                </svg>
                Delete
            </button>
        </div>

    </td>
</tr>