{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Rules{% endblock %}
{% block page_title %}Rules{% endblock %}
{% block page_subtitle %}Deny-overrides policy engine (Layer 5){% endblock %}
{% block layer_indicator %}L5 Rules{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <div>
    <span class="text-sm text-slate-500">{{ rules|length }} rule{{ rules|length|pluralize }} defined</span>
  </div>
</div>

{# Invariant reminder #}
<div class="mb-6 flex items-start gap-3 p-4 rounded-lg bg-blue-50 border border-blue-200">
  <span class="text-blue-600 text-lg">&#9432;</span>
  <div>
    <p class="text-sm font-medium text-blue-800">Deny always wins (Invariant 6)</p>
    <p class="text-xs text-blue-600 mt-0.5">When ALLOW and DENY rules conflict, DENY overrides. Rules are evaluated by priority (lower number = higher priority).</p>
  </div>
</div>

{% if rules %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <table class="min-w-full divide-y divide-slate-200">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Type</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Effect</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Priority</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Bindings</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Conditions</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Created By</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Created</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for rule in rules %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">
          <span class="text-sm font-medium text-slate-900">{{ rule.name }}</span>
          {% if rule.description %}
          <p class="text-xs text-slate-400 mt-0.5">{{ rule.description|truncatewords:10 }}</p>
          {% endif %}
        </td>
        <td class="px-4 py-3">
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-50 text-slate-600 ring-1 ring-slate-500/20">{{ rule.rule_type }}</span>
        </td>
        <td class="px-4 py-3">
          {% if rule.effect == "ALLOW" %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700 ring-1 ring-green-600/20">ALLOW</span>
          {% elif rule.effect == "DENY" %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-50 text-red-700 ring-1 ring-red-600/20">DENY</span>
          {% else %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 ring-1 ring-blue-600/20">{{ rule.effect }}</span>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm text-slate-600 font-mono">{{ rule.priority }}</td>
        <td class="px-4 py-3">
          <span class="text-sm text-slate-600">{{ rule.binding_count }}</span>
          {% if rule.bindings %}
          <div class="mt-1 space-y-0.5">
            {% for b in rule.bindings %}
            <span class="block text-xs text-slate-400 font-mono">{{ b.target_type }}:{{ b.target_id|truncate_id }}</span>
            {% endfor %}
          </div>
          {% endif %}
        </td>
        <td class="px-4 py-3">
          {% if rule.conditions %}
          <pre class="text-xs text-slate-500 font-mono bg-slate-50 rounded px-2 py-1 max-w-xs overflow-x-auto">{{ rule.conditions|pretty_json }}</pre>
          {% else %}
          <span class="text-xs text-slate-400">None</span>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ rule.created_by|truncate_id }}</td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ rule.created_at|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{% include "components/_empty_state.html" with title="No rules defined" message="Rules control access, rate limits, and feature flags. Create rules to enforce policies." %}
{% endif %}
{% endblock %}