{% extends "admin/base_admin.html" %}

{% block admin_head %}
<style>
  .flags-table { width: 100%; border-collapse: collapse; }
  .flags-table th, .flags-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #E2E8F0; }
  .flags-table th { font-size: 0.75rem; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; }
  .flag-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
  .flag-badge--on { background: #DCFCE7; color: #166534; }
  .flag-badge--off { background: #FEE2E2; color: #991B1B; }
  .flag-dot { width: 8px; height: 8px; border-radius: 50%; }
  .flag-dot--on { background: #22C55E; }
  .flag-dot--off { background: #EF4444; }
  .flag-toggle-btn {
    padding: 6px 14px; border-radius: 6px; font-size: 0.8125rem; font-weight: 500;
    border: 1px solid #E2E8F0; cursor: pointer; transition: all 0.15s;
  }
  .flag-toggle-btn--enable { background: #F0FDF4; color: #166534; border-color: #BBF7D0; }
  .flag-toggle-btn--enable:hover { background: #DCFCE7; }
  .flag-toggle-btn--disable { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
  .flag-toggle-btn--disable:hover { background: #FEE2E2; }
  .flag-name { font-weight: 600; color: #0F172A; }
  .flag-desc { font-size: 0.8125rem; color: #64748B; }
  .flag-updated { font-size: 0.75rem; color: #94A3B8; }
</style>
{% endblock %}

{% block admin_content %}
<h1 style="font-size:1.5rem; font-weight:700; margin-bottom:0.5rem;">Feature Flags</h1>
<p style="color:#64748B; margin-bottom:1.5rem; font-size:0.875rem;">
  Toggle features on/off without redeployment. Changes take effect immediately.
</p>

<table class="flags-table">
  <thead>
    <tr>
      <th>Flag</th>
      <th>Description</th>
      <th>Status</th>
      <th>Last Updated</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for f in flags %}
    <tr>
      <td><span class="flag-name">{{ f.name }}</span></td>
      <td><span class="flag-desc">{{ f.description or '—' }}</span></td>
      <td>
        {% if f.enabled %}
          <span class="flag-badge flag-badge--on"><span class="flag-dot flag-dot--on"></span> Enabled</span>
        {% else %}
          <span class="flag-badge flag-badge--off"><span class="flag-dot flag-dot--off"></span> Disabled</span>
        {% endif %}
      </td>
      <td><span class="flag-updated">{{ f.updated_at or '—' }}</span></td>
      <td>
        <form method="POST" action="{{ url_for('admin.flag_toggle') }}" style="display:inline;">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="name" value="{{ f.name }}">
          {% if f.enabled %}
            <button type="submit" class="flag-toggle-btn flag-toggle-btn--disable">Disable</button>
          {% else %}
            <button type="submit" class="flag-toggle-btn flag-toggle-btn--enable">Enable</button>
          {% endif %}
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}
