{% if action == "enable" %}
  {% set icon_bg    = "bg-emerald-100" %}
  {% set icon_color = "text-emerald-600" %}
  {% set title      = "Re-enable Route" %}
  {% set description = "This route will immediately start serving requests again." %}
  {% set btn_class  = "bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500" %}
  {% set btn_label  = "Enable" %}
  {% set warning    = false %}
{% elif action == "maintenance" %}
  {% set icon_bg    = "bg-amber-100" %}
  {% set icon_color = "text-amber-600" %}
  {% set title      = "Set Maintenance Mode" %}
  {% set description = "All requests to this route will return 503 until re-enabled." %}
  {% set btn_class  = "bg-amber-500 hover:bg-amber-600 focus:ring-amber-400" %}
  {% set btn_label  = "Set Maintenance" %}
  {% set warning    = false %}
{% elif action == "disable" %}
  {% set icon_bg    = "bg-red-100" %}
  {% set icon_color = "text-red-600" %}
  {% set title      = "Disable Route" %}
  {% set description = "This route will be permanently disabled until manually re-enabled." %}
  {% set btn_class  = "bg-red-600 hover:bg-red-700 focus:ring-red-500" %}
  {% set btn_label  = "Disable Route" %}
  {% set warning    = true %}
{% endif %}

<div class="p-6 sm:p-7">

    {# ── Header ───────────────────────────────────────────────── #}
    <div class="flex gap-4 mb-6">
        <div class="shrink-0 w-11 h-11 rounded-xl flex items-center justify-center {{ icon_bg }}">
            {% if action == "enable" %}
            <svg class="w-5 h-5 {{ icon_color }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {% elif action == "maintenance" %}
            <svg class="w-5 h-5 {{ icon_color }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
            </svg>
            {% elif action == "disable" %}
            <svg class="w-5 h-5 {{ icon_color }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
                <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>
            {% endif %}
        </div>
        <div class="min-w-0 pt-0.5">
            <h2 class="text-base font-semibold text-slate-900">{{ title }}</h2>
            <p class="text-sm text-slate-500 mt-0.5 leading-relaxed">{{ description }}</p>
            <div class="mt-2">
                <code class="inline-flex items-center gap-1 text-xs font-mono text-slate-600 bg-slate-100 border border-slate-200 px-2 py-0.5 rounded-md">
                    <svg class="w-2.5 h-2.5 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="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"/>
                    </svg>
                    {{ route_path }}
                </code>
            </div>
        </div>
    </div>

    {# ── Disable warning banner ────────────────────────────────── #}
    {% if warning %}
    <div class="flex gap-2.5 p-3 mb-5 rounded-lg bg-red-50 border border-red-200">
        <svg class="w-4 h-4 text-red-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
        </svg>
        <p class="text-xs text-red-700 leading-relaxed">
            <strong class="font-semibold">Requests will fail immediately.</strong>
            All traffic to this route returns 503 until you explicitly re-enable it.
        </p>
    </div>
    {% endif %}

    {# ── Reason form ──────────────────────────────────────────── #}
    <form hx-post="{{ submit_path }}"
          hx-target="#row-{{ path_slug }}"
          hx-swap="outerHTML"
          hx-on::after-request="document.getElementById('shield-modal').close()">

        <div class="mb-5">
            <label for="modal-reason"
                   class="block text-xs font-semibold text-slate-700 uppercase tracking-wide mb-1.5">
                Reason
                <span class="text-slate-400 font-normal normal-case tracking-normal ml-1">(optional)</span>
            </label>
            <input id="modal-reason"
                   type="text"
                   name="reason"
                   autofocus
                   autocomplete="off"
                   placeholder="e.g. Scheduled downtime, database migration…"
                   class="w-full text-sm border border-slate-300 bg-white rounded-lg px-3 py-2.5 text-slate-800
                          placeholder:text-slate-400 shadow-sm
                          focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500
                          transition-shadow">
        </div>

        <div class="flex items-center justify-end gap-2.5 pt-1">
            <button type="button"
                    onclick="document.getElementById('shield-modal').close()"
                    class="px-4 py-2 text-sm font-medium text-slate-600 bg-white border border-slate-200
                           rounded-lg hover:bg-slate-50 hover:border-slate-300
                           focus:outline-none focus:ring-2 focus:ring-slate-400
                           transition-all active:scale-95 shadow-sm">
                Cancel
            </button>
            <button type="submit"
                    class="px-4 py-2 text-sm font-semibold text-white rounded-lg
                           focus:outline-none focus:ring-2 focus:ring-offset-2
                           transition-all active:scale-95 shadow-sm
                           {{ btn_class }}">
                {{ btn_label }}
            </button>
        </div>
    </form>
</div>