{% set admin_page = "flags" %}
{% extends "admin/base_admin.html" %}

{% block title %}Feature Flags - {{ config.APP_NAME }} Admin{% endblock %}
{% block topbar_title %}Feature Flags{% endblock %}

{% block admin_content %}
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
    <div>
      <h2 class="text-xl" style="margin:0;">Feature Flags</h2>
      <p class="text-sm text-slate" style="margin:4px 0 0;">
        DB-backed toggles. Changes take effect immediately — no restart needed.
      </p>
    </div>
    <button onclick="document.getElementById('create-flag-form').classList.toggle('open')" class="btn btn-sm">
      + New Flag
    </button>
  </div>

  <div id="create-flag-form" class="card" style="display:none;margin-bottom:16px;padding:16px;">
    <style>#create-flag-form.open { display:block; }</style>
    <p class="text-sm" style="font-weight:600;margin:0 0 12px;">Create feature flag</p>
    <form method="post" action="{{ url_for('admin.flag_create') }}" style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div>
        <label class="text-sm" style="display:block;margin-bottom:4px;color:#475569;">Name <span style="color:#94A3B8;font-size:11px;">(snake_case)</span></label>
        <input type="text" name="name" placeholder="e.g. dark_mode" required
               style="border:1px solid #CBD5E1;border-radius:6px;padding:6px 10px;font-size:13px;width:200px;">
      </div>
      <div>
        <label class="text-sm" style="display:block;margin-bottom:4px;color:#475569;">Description <span style="color:#94A3B8;font-size:11px;">(optional)</span></label>
        <input type="text" name="description" placeholder="What does this flag do?"
               style="border:1px solid #CBD5E1;border-radius:6px;padding:6px 10px;font-size:13px;width:280px;">
      </div>
      <button type="submit" class="btn btn-sm">Create</button>
    </form>
  </div>

  <div class="card" style="padding:0;overflow:hidden;">
    {% if flags %}
    <table class="table">
      <thead>
        <tr>
          <th>Flag</th>
          <th>Description</th>
          <th>State</th>
          <th>Updated</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for flag in flags %}
        <tr>
          <td>
            <code style="font-size:12px;color:#0F172A;background:#F1F5F9;padding:2px 6px;border-radius:4px;">
              {{ flag.name }}
            </code>
          </td>
          <td><span class="text-sm text-slate">{{ flag.description or "—" }}</span></td>
          <td>
            {% if flag.enabled %}
            <span class="badge-success">enabled</span>
            {% else %}
            <span style="display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;background:#F1F5F9;color:#64748B;">disabled</span>
            {% endif %}
          </td>
          <td class="mono text-sm">{{ flag.updated_at[:16] }}</td>
          <td>
            <form method="post" action="{{ url_for('admin.flag_toggle') }}" class="m-0">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <input type="hidden" name="name" value="{{ flag.name }}">
              <button type="submit" class="btn-outline btn-sm"
                      style="{% if flag.enabled %}color:#EF4444;border-color:#EF4444;{% endif %}">
                {{ "Disable" if flag.enabled else "Enable" }}
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div style="padding:40px;text-align:center;">
      <p class="text-slate text-sm">No feature flags yet. Create one above.</p>
    </div>
    {% endif %}
  </div>
{% endblock %}
