{% extends "base.html" %}
{% block title %}Approvals | Suvra{% endblock %}
{% block content %}
<section class="page-head">
  <h1>Approvals</h1>
  <p class="muted">Review and decide pending requests.</p>
</section>

{% if message %}
<p class="flash">
  {% if message == "approved" %}
  Approval updated to approved.
  {% elif message == "denied" %}
  Approval updated to denied.
  {% elif message == "executed" %}
  Approval approved and action executed.
  {% elif message == "error" %}
  Failed to update approval{% if error_message %}: {{ error_message }}{% endif %}.
  {% else %}
  {{ message }}
  {% endif %}
</p>
{% endif %}

<section class="panel">
  <nav class="subtabs" aria-label="Approval status filters">
    <a href="/dashboard/approvals?status=pending{% if current_query %}&q={{ current_query }}{% endif %}" class="subtab {% if current_status == 'pending' %}is-active{% endif %}">
      Pending ({{ counts.pending }})
    </a>
    <a href="/dashboard/approvals?status=approved{% if current_query %}&q={{ current_query }}{% endif %}" class="subtab {% if current_status == 'approved' %}is-active{% endif %}">
      Approved ({{ counts.approved }})
    </a>
    <a href="/dashboard/approvals?status=denied{% if current_query %}&q={{ current_query }}{% endif %}" class="subtab {% if current_status == 'denied' %}is-active{% endif %}">
      Denied ({{ counts.denied }})
    </a>
    <a href="/dashboard/approvals?status=all{% if current_query %}&q={{ current_query }}{% endif %}" class="subtab {% if current_status == 'all' %}is-active{% endif %}">
      All ({{ counts.total }})
    </a>
  </nav>

  <form method="get" action="/dashboard/approvals" class="filter-bar">
    <input type="hidden" name="status" value="{{ current_status }}" />
    <label>
      Search
      <input type="text" name="q" placeholder="Search agent, action, target..." value="{{ current_query }}" />
    </label>
    <label>
      Limit
      <input type="number" min="1" max="500" name="limit" value="{{ limit }}" />
    </label>
    <button type="submit" class="btn btn-secondary">Apply</button>
    {% if current_query %}
    <a class="btn btn-secondary" href="/dashboard/approvals?status={{ current_status }}">Clear</a>
    {% endif %}
  </form>
  <p class="muted" style="padding:8px 16px;">Showing {{ result_count }} results</p>

  {% if approvals|length == 0 and selected_status == 'pending' %}
  <p class="muted" style="padding:0 16px 12px;">No pending approvals.</p>
  {% endif %}

  <table class="data-table">
    <thead>
      <tr>
        <th style="width:55%">Request</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for row in approvals %}
      <tr>
        <td>
          <p class="approval-primary">{{ row.action_summary }}</p>
          <p class="approval-secondary">
            Requested {{ row.age_display }}
            {% if row.actor and row.actor != "unknown" %}by {{ row.actor }}{% endif %}
          </p>
          {% if row.has_risk_context %}
          <div class="risk-context-block">
            {% if row.risk_context.matched_rule_name %}
            <p class="risk-line">
              <span class="risk-label">Approval required by:</span>
              <span class="risk-value">{{ row.risk_context.matched_rule_name }}</span>
              {% if row.risk_context.matched_rule_description %}
              <span class="risk-sub muted">{{ row.risk_context.matched_rule_description }}</span>
              {% endif %}
            </p>
            {% endif %}
            {% if row.risk_context.injection_risk is not none and row.risk_context.injection_risk > 0 %}
            <p class="risk-line">
              <span class="risk-label">Input risk score:</span>
              <span class="risk-value injection-risk--{% if row.risk_context.injection_risk >= 0.8 %}high{% elif row.risk_context.injection_risk >= 0.5 %}medium{% else %}low{% endif %}">
                {{ "%.0f" | format(row.risk_context.injection_risk * 100) }}%
              </span>
              {% if row.risk_context.injection_scanner %}
              <span class="risk-sub muted">via {{ row.risk_context.injection_scanner }}</span>
              {% endif %}
            </p>
            {% endif %}
            {% if row.risk_context.anomaly_detected %}
            <p class="risk-line">
              <span class="risk-label">Behavioral anomaly:</span>
              <span class="risk-value anomaly-severity--{{ row.risk_context.anomaly_severity or 'low' }}">
                {{ row.risk_context.anomaly_severity | capitalize if row.risk_context.anomaly_severity else "Detected" }}
                {% if row.risk_context.anomaly_triggered_metrics %}
                &mdash; {{ row.risk_context.anomaly_triggered_metrics | join(", ") }}
                {% endif %}
              </span>
            </p>
            {% endif %}
          </div>
          {% endif %}
        </td>
        <td><span class="badge status-{{ row.status|replace('_', '-') }}">{{ row.status }}</span></td>
        <td class="action-cell">
          {% if row.status == "pending" %}
          <form method="post" action="/dashboard/approvals/{{ row.approval_id }}/approve_execute" class="decision-form inline">
            <input type="hidden" name="csrf" value="1" />
            <input type="hidden" name="status" value="{{ selected_status }}" />
            <input type="hidden" name="limit" value="{{ limit }}" />
            <input type="hidden" name="q" value="{{ current_query }}" />
            <input type="text" name="decided_by" value="admin" placeholder="decided_by" required />
            <input type="text" name="note" placeholder="note" />
            <button type="submit" class="btn btn-primary">Approve &amp; Execute</button>
            <button type="submit" formaction="/dashboard/approvals/{{ row.approval_id }}/approve" class="btn btn-secondary">Approve</button>
            <button type="submit" formaction="/dashboard/approvals/{{ row.approval_id }}/deny" class="btn btn-destructive">Deny</button>
          </form>
          {% else %}
          <span class="muted">Closed</span>
          {% endif %}
          <a class="audit-link" href="/dashboard/audit?action_id={{ row.action_id }}">View audit trail &rarr;</a>
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="3" class="muted">No approvals found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>

<!-- Per-row drawers -->
{% for row in approvals %}
<div class="drawer" id="drawer-approval-{{ row.approval_id }}" role="dialog" aria-modal="false" aria-label="Approval detail">
  <div class="drawer-backdrop"></div>
  <div class="drawer-panel">
    <div class="drawer-header">
      <h2 class="drawer-title">Approval Detail</h2>
      <button class="drawer-close" type="button" aria-label="Close">&times;</button>
    </div>
    <div class="drawer-body">

      <div class="decision-hero">
        <div>
          <p class="decision-kicker">{{ row.decision_display }}</p>
          <h3 class="decision-title">{{ row.demo_summary }}</h3>
          <p class="row-summary">{{ row.explanation_summary }}</p>
        </div>
        <div class="decision-meta">
          {% if row.policy_pack_title %}<span class="badge">{{ row.policy_pack_title }}</span>{% endif %}
          {% if row.matched_policy_id %}<span class="badge">{{ row.matched_policy_id }}</span>{% endif %}
        </div>
      </div>

      <p class="row-summary">{{ row.summary }}</p>

      <dl class="kv">
        {% for label, value in row.key_fields %}
        <dt>{{ label }}</dt>
        <dd>{{ value }}</dd>
        {% endfor %}
      </dl>

      {% if row.explanation_bullets %}
      <h3 class="drawer-title">Why Approval Was Required</h3>
      <ul class="reason-list">
        {% for bullet in row.explanation_bullets %}
        <li>{{ bullet }}</li>
        {% endfor %}
      </ul>
      {% endif %}

      {% if row.action_payload %}
      <h3 class="drawer-title">Action Payload</h3>
      <pre class="code-block">{{ row.action_payload | tojson(indent=2) }}</pre>
      {% endif %}

      {% if row.status == "pending" and ui_permissions.approvals_decide %}
      <div class="drawer-actions">
        <form method="post" action="/dashboard/approvals/{{ row.approval_id }}/approve" style="display:inline">
          <input type="hidden" name="csrf" value="1" />
          <button type="submit" class="btn">Approve</button>
        </form>
        <form method="post" action="/dashboard/approvals/{{ row.approval_id }}/deny" style="display:inline;margin-left:8px">
          <input type="hidden" name="csrf" value="1" />
          <button type="submit" class="btn btn-danger">Deny</button>
        </form>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endfor %}
{% endblock %}