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

{% block title %}Feature Flags{% endblock %}
{% block page_title %}Feature Flags{% endblock %}
{% block page_subtitle %}Gradual rollouts and feature gating (Layer 5 + A3){% endblock %}
{% block layer_indicator %}L5 Rules · A3 Feature Flags{% endblock %}

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

{% if flags %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {% for flag in flags %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
    <div class="flex items-center justify-between mb-3">
      <h3 class="text-sm font-semibold text-slate-900">{{ flag.feature_name }}</h3>
      {% if flag.enabled %}
      <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-50 text-green-700 ring-1 ring-green-600/20">
        <span class="h-1.5 w-1.5 rounded-full bg-green-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-50 text-slate-500 ring-1 ring-slate-400/20">
        <span class="h-1.5 w-1.5 rounded-full bg-slate-400"></span>
        Disabled
      </span>
      {% endif %}
    </div>

    {% if flag.name != flag.feature_name %}
    <p class="text-xs text-slate-400 mb-3">Rule: {{ flag.name }}</p>
    {% endif %}

    {# Rollout percentage bar #}
    <div class="mb-3">
      <div class="flex items-center justify-between text-xs text-slate-500 mb-1">
        <span>Rollout</span>
        <span class="font-medium">{{ flag.rollout_percentage }}%</span>
      </div>
      <div class="w-full bg-slate-100 rounded-full h-2">
        <div class="h-2 rounded-full transition-all {% if flag.enabled %}bg-green-500{% else %}bg-slate-300{% endif %}" style="width: {{ flag.rollout_percentage }}%"></div>
      </div>
    </div>

    <div class="flex items-center justify-between text-xs text-slate-400 pt-3 border-t border-slate-100">
      <span>{{ flag.binding_count }} binding{{ flag.binding_count|pluralize }}</span>
      <span>Priority {{ flag.priority }}</span>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
{% include "components/_empty_state.html" with title="No feature flags" message="Feature flags are rules with type FEATURE_FLAG. Create flag rules to control feature rollouts." %}
{% endif %}
{% endblock %}