{% extends "base.html" %}

{% block content %}
  <div class="row g-4">
    <div class="col-12 col-lg-3">
      <div class="card shadow-sm">
        {% with staff_nav_active="rate_limits" %}
          {% include "partials/staff_sidebar.html" %}
        {% endwith %}
      </div>
    </div>
    <div class="col-12 col-lg-9">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% with breadcrumbs=[
            {"name": "Staff", "href": "/staff"},
            {"name": "Rate Limits"}
          ] %}
            {% include "partials/breadcrumbs.html" %}
          {% endwith %}
          <h1 class="h3 mb-1">Rate Limits</h1>
          <p class="text-muted mb-0">Manage stored rate limit rules and the global enforcement toggle.</p>
        </div>
        <a class="btn btn-primary" href="/staff/rate-limits/new">New Rate Limit</a>
      </div>
      {% with staff_site_settings_tab_active="rate_limits" %}
        {% include "partials/staff_site_settings_tabs.html" %}
      {% endwith %}
      {% if notice %}
        <div class="alert alert-success">{{ notice }}</div>
      {% endif %}
      {% if error %}
        <div class="alert alert-danger">{{ error }}</div>
      {% endif %}
      <div class="card shadow-sm mb-4">
        <div class="card-body">
          <form method="post" action="/staff/rate-limits/settings">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="rate_limits_enabled" name="rate_limits_enabled" value="true" {% if settings.rate_limits_enabled %}checked{% endif %} />
              <label class="form-check-label" for="rate_limits_enabled">Enable rate limit enforcement</label>
            </div>
            <div class="form-text text-muted mb-3">When disabled, stored rules remain editable but are not enforced anywhere yet.</div>
            <button type="submit" class="btn btn-primary">Save settings</button>
          </form>
        </div>
      </div>
      <div class="card shadow-sm">
        <div class="card-body">
          <div class="table-responsive">
            <table class="table align-middle mb-0">
              <thead>
                <tr>
                  <th scope="col">Scope</th>
                  <th scope="col">Limit</th>
                  <th scope="col">Window</th>
                  <th scope="col">Status</th>
                  <th scope="col" class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                {% if page.results %}
                  {% for rule in page.results %}
                    <tr>
                      <td><a class="text-decoration-none" href="/staff/rate-limits/{{ rule.uuid }}">{{ rule.scope }}</a></td>
                      <td>{{ rule.max_requests }}</td>
                      <td>{{ rule.window_seconds }}s</td>
                      <td>
                        {% if rule.is_enabled %}
                          <span class="badge text-bg-success">Enabled</span>
                        {% else %}
                          <span class="badge text-bg-secondary">Disabled</span>
                        {% endif %}
                      </td>
                      <td class="text-end"><a class="btn btn-sm btn-outline-secondary" href="/staff/rate-limits/{{ rule.uuid }}">Edit</a></td>
                    </tr>
                  {% endfor %}
                {% else %}
                  <tr>
                    <td colspan="5" class="text-muted">No rate limits configured yet.</td>
                  </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}