{% extends "base.html" %}
{% import "macros/ui.html" as m %}
{% block title %}Reflection Modes{% endblock %}
{% block nav_modes %}btn-active{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold font-mono mb-2">Reflection Modes</h1>
<p class="text-base-content/50 text-sm mb-6">
  Run structured on+re sessions against the provisioning domain.
  Each mode executes <code class="font-mono">provisioning run &lt;mode-id&gt;</code>.
</p>

{% if not has_root %}
<div class="alert alert-warning mb-6">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-2.194-.833-2.964 0L3.232 16.5c-.77.833.192 2.5 1.732 2.5z"/>
  </svg>
  <span>
    <strong>--project-root not set.</strong>
    Start the daemon with <code class="font-mono">--project-root /path/to/provisioning</code>
    to discover reflection modes.
  </span>
</div>
{% endif %}

{% if modes %}
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
  {% for mode in modes %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <div class="flex items-start justify-between gap-2">
        <span class="font-mono text-sm font-semibold text-primary">{{ mode.id }}</span>
      </div>
      <p class="text-xs text-base-content/40 font-mono truncate mt-1">{{ mode.path }}</p>
      {% if can_operate %}
      <form action="/ui/modes/run" method="post" class="mt-3">
        <input type="hidden" name="mode_id" value="{{ mode.id }}">
        <button type="submit" class="btn btn-xs btn-outline btn-primary w-full">
          ▶ Run
        </button>
      </form>
      {% else %}
      <div class="mt-3">
        <span class="btn btn-xs btn-disabled w-full cursor-not-allowed opacity-40" title="Requires operator role">
          ▶ Run
        </span>
      </div>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% elif has_root %}
<div class="alert">
  <span class="text-sm">No reflection modes found in <code class="font-mono">reflection/modes/</code>.</span>
</div>
{% endif %}
{% endblock %}