{% extends "base.html" %}
{% block title %}Tier — {{ slug }} — Ontoref{% endblock title %}
{% block nav_group_dev %}active{% endblock nav_group_dev %}
{% block nav_tier %}active{% endblock nav_tier %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
  <div>
    <h1 class="text-2xl font-bold">Tier Status</h1>
    <p class="text-base-content/50 text-sm mt-1">
      <span class="font-mono">{{ slug }}</span>
      <span class="mx-1">·</span>
      <span class="badge badge-neutral badge-xs font-mono">{{ tier }}</span>
      {% if phase != "Progressive" or tier == "Tier2" %}
      <span class="mx-1">·</span>
      <span class="badge badge-outline badge-xs font-mono">{{ phase }}</span>
      {% endif %}
    </p>
  </div>
  {% if next_tier %}
  <span class="badge badge-info badge-lg">→ {{ next_tier }} available</span>
  {% else %}
  <span class="badge badge-success badge-lg">Tier2 · max</span>
  {% endif %}
</div>

<!-- capability split ─────────────────────────────────────────────────────── -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">

  <!-- available -->
  <div class="card bg-base-200 rounded-lg">
    <div class="card-body p-4">
      <h2 class="font-bold text-base mb-3 flex items-center gap-2">
        <span class="text-success">✓</span> Available at {{ tier }}
        <span class="badge badge-success badge-xs">{{ available | length }}</span>
      </h2>
      <ul class="space-y-2">
        {% for cap in available %}
        <li class="flex items-start gap-2">
          <span class="text-success mt-0.5 flex-shrink-0">✓</span>
          <div>
            <span class="font-mono text-sm font-medium">{{ cap.label }}</span>
            <p class="text-xs text-base-content/60 mt-0.5">{{ cap.description }}</p>
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <!-- locked -->
  {% if locked %}
  <div class="card bg-base-200 rounded-lg">
    <div class="card-body p-4">
      <h2 class="font-bold text-base mb-3 flex items-center gap-2">
        <span class="text-base-content/40">✗</span> Locked
        <span class="badge badge-neutral badge-xs">{{ locked | length }}</span>
      </h2>
      <ul class="space-y-2">
        {% for cap in locked %}
        <li class="flex items-start gap-2 opacity-50">
          <span class="mt-0.5 flex-shrink-0">✗</span>
          <div>
            <span class="font-mono text-sm font-medium">{{ cap.label }}</span>
            <span class="badge badge-outline badge-xs ml-1 font-mono">{{ cap.min_tier }}</span>
            <p class="text-xs text-base-content/60 mt-0.5">{{ cap.description }}</p>
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endif %}

</div>

<!-- tier next projection ──────────────────────────────────────────────────── -->
{% if next_tier %}
<div class="card bg-base-200 rounded-lg mb-4">
  <div class="card-body p-4">
    <h2 class="font-bold text-base mb-2">What {{ next_tier }} adds</h2>
    <p class="text-sm text-base-content/70 mb-4">{{ narrative }}</p>
    <ul class="space-y-2 mb-4">
      {% for cap in adds %}
      <li class="flex items-start gap-2">
        <span class="text-info mt-0.5 flex-shrink-0">+</span>
        <div>
          <span class="font-mono text-sm font-medium">{{ cap.label }}</span>
          <p class="text-xs text-base-content/60 mt-0.5">{{ cap.description }}</p>
        </div>
      </li>
      {% endfor %}
    </ul>

    <!-- preconditions -->
    <h3 class="font-semibold text-sm mb-2">Preconditions</h3>
    <ul class="space-y-1">
      {% for p in preconditions %}
      <li class="flex items-center gap-2 text-sm font-mono">
        {% if p.ok %}
        <span class="text-success">✓</span>
        {% else %}
        <span class="text-error">✗</span>
        {% endif %}
        <span>{{ p.name }}</span>
        <span class="text-base-content/50">— {{ p.detail }}</span>
      </li>
      {% endfor %}
    </ul>
    {% if transition_ready %}
    <div class="mt-4 text-sm text-success font-mono">→ all preconditions met · run <code>ore tier set {{ next_tier }}</code></div>
    {% else %}
    <div class="mt-4 text-sm text-warning font-mono">→ resolve failing preconditions before <code>ore tier set {{ next_tier }}</code></div>
    {% endif %}
  </div>
</div>
{% endif %}

{% endblock content %}