{% extends "pages/sandbox_base.html" %}
{% block title %}Approvals — {{ sandbox_name }} — Shoreguard{% endblock %}

{% block breadcrumb_tail %}
<li class="breadcrumb-item active">Approvals</li>
{% endblock %}

{% block content %}
<div x-data='approvalsPage({{ sandbox_name|tojson }})' x-init="init()" id="approvals-content">
    <!-- Loading -->
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading approvals...
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <!-- Empty state -->
    <div x-show="!loading && !error && $empty(chunks)" x-cloak class="text-center text-muted py-4">
        <i class="bi bi-shield-check fs-1 d-block mb-2"></i>
        <p>No draft policy recommendations.</p>
    </div>

    <!-- Approvals table -->
    <template x-if="!loading && !error && $notEmpty(chunks)">
        <div>
            <!-- Multi-stage approval banner -->
            <div x-show="workflow" x-cloak class="alert alert-primary d-flex align-items-center py-2 mb-3">
                <i class="bi bi-people-fill me-2"></i>
                <span>
                    Multi-stage approval active —
                    <strong x-text="workflow && workflow.required_approvals"></strong> distinct vote(s) required
                    <template x-if="workflow && workflow.required_roles && workflow.required_roles.length">
                        <span> (roles: <span x-text="workflow.required_roles.join(', ')"></span>)</span>
                    </template>
                </span>
                <template x-if="$isAdmin">
                    <button class="btn btn-sm btn-outline-primary ms-auto" @click="openWorkflowConfig()">
                        <i class="bi bi-gear me-1"></i>Configure
                    </button>
                </template>
            </div>

            <!-- Security-flagged warning banner -->
            <div x-show="securityFlaggedPendingCount > 0" x-cloak class="alert alert-warning d-flex align-items-center py-2 mb-3">
                <i class="bi bi-shield-exclamation me-2"></i>
                <span x-text="securityFlaggedPendingCount + ' security-flagged chunk(s) require review'"></span>
                <button class="btn btn-sm btn-outline-warning ms-auto" @click="filterSecurityFlagged = true">
                    Show only flagged
                </button>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted" x-text="pendingCount + ' pending of ' + chunks.length + ' total'"></span>
                    <!-- Security-flagged filter chip -->
                    <button class="btn btn-sm"
                            :class="filterSecurityFlagged ? 'btn-warning' : 'btn-outline-secondary'"
                            @click="filterSecurityFlagged = !filterSecurityFlagged"
                            x-show="chunks.some(c => c.security_notes && c.security_notes.trim())"
                            x-cloak>
                        <i class="bi bi-shield-exclamation me-1"></i>Security-flagged
                        <span class="badge bg-dark ms-1" x-text="securityFlaggedPendingCount"></span>
                    </button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-secondary" @click="showHistory()" title="History">
                        <i class="bi bi-clock-history me-1"></i>History
                    </button>
                    <template x-if="$isAdmin && !workflow">
                        <button class="btn btn-outline-primary" @click="openWorkflowConfig()" title="Configure workflow">
                            <i class="bi bi-people-fill me-1"></i>Workflow
                        </button>
                    </template>
                    <template x-if="$isOperator">
                        <button class="btn btn-success" @click="approveAll()">
                            <i class="bi bi-check-all me-1"></i>Approve All
                        </button>
                    </template>
                    <template x-if="$isOperator">
                        <button class="btn btn-outline-secondary" @click="clearAll()">
                            Clear All
                        </button>
                    </template>
                    <button class="btn btn-outline-secondary"
                            :class="sortPersistentFirst ? 'active' : ''"
                            @click="sortPersistentFirst = !sortPersistentFirst"
                            title="Sort persistent denials first">
                        <i class="bi bi-arrow-repeat me-1"></i>Persistent first
                    </button>
                </div>
            </div>

            <div x-show="rollingSummary" class="alert alert-info small py-2 mb-3">
                <i class="bi bi-lightbulb me-1"></i><span x-text="rollingSummary"></span>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover table-sm align-middle">
                    <thead>
                        <tr>
                            <th>Status</th>
                            <th>Rule</th>
                            <th>Binary</th>
                            <th>Endpoints</th>
                            <th class="text-end">Hits</th>
                            <th>Seen</th>
                            <th class="text-center">Confidence</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="chunk in sortedChunks" :key="chunk.id">
                            <tr :id="'chunk-row-' + chunk.id"
                                :class="highlightChunkId === chunk.id ? 'table-warning' : ''">
                                <!-- Main row -->
                                <td>
                                    <span class="badge" :class="SG.badges.approval[chunk.status] || 'text-bg-secondary'" x-text="chunk.status"></span>
                                    <span x-show="chunk.security_notes && chunk.security_notes.trim()" x-cloak
                                          class="badge text-bg-danger ms-1" title="Security flagged">
                                        <i class="bi bi-shield-exclamation"></i>
                                    </span>
                                </td>
                                <td @click="hasDetail(chunk) && toggleDetail(chunk.id)" class="sg-cursor-pointer" :class="hasDetail(chunk) ? 'table-clickable' : ''">
                                    <strong x-text="chunk.rule_name"></strong>
                                    <i x-show="hasDetail(chunk)" class="bi ms-1 small"
                                       :class="isExpanded(chunk.id) ? 'bi-chevron-down' : 'bi-chevron-right'"></i>
                                    <!-- Detail (inline) -->
                                    <div x-show="isExpanded(chunk.id)" x-cloak class="mt-2">
                                        <p x-show="chunk.rationale" class="small text-muted mb-1">
                                            <i class="bi bi-chat-quote me-1"></i><span x-text="chunk.rationale"></span>
                                        </p>
                                        <div x-show="chunk.security_notes" class="alert alert-warning small py-1 px-2 mb-2">
                                            <i class="bi bi-exclamation-triangle me-1"></i><span x-text="chunk.security_notes"></span>
                                        </div>
                                        <div x-show="chunk.stage" class="small text-muted mb-1">
                                            <span class="fw-semibold">Stage:</span>
                                            <code x-text="chunk.stage"></code>
                                        </div>
                                        <div x-show="$gt(($prop(chunk, 'denial_summary_ids') || []).length, 0)" class="small text-muted mb-2">
                                            <span class="fw-semibold">Related denials:</span>
                                            <template x-for="id in ($prop(chunk, 'denial_summary_ids') || [])" :key="id">
                                                <code class="me-1 px-1 bg-body-secondary rounded small" x-text="id"></code>
                                            </template>
                                        </div>
                                        <!-- Denial context enrichment -->
                                        <div x-show="chunk.denial_context && chunk.denial_context.ancestors && chunk.denial_context.ancestors.length > 0" class="small text-muted mb-1">
                                            <span class="fw-semibold">Process chain:</span>
                                            <code x-text="ancestryBreadcrumb(chunk.denial_context)"></code>
                                        </div>
                                        <div x-show="chunk.denial_context && chunk.denial_context.binary_sha256" class="small text-muted mb-1">
                                            <span class="fw-semibold">SHA256:</span>
                                            <code class="font-monospace px-1 bg-body-secondary rounded small sg-cursor-pointer"
                                                  :title="chunk.denial_context && chunk.denial_context.binary_sha256"
                                                  @click.stop="navigator.clipboard.writeText(chunk.denial_context ? chunk.denial_context.binary_sha256 : '')"
                                                  x-text="truncatedSha(chunk.denial_context)"></code>
                                            <i class="bi bi-clipboard ms-1 small text-muted"></i>
                                        </div>
                                        <div x-show="chunk.denial_context && chunk.denial_context.persistent" class="small mb-1">
                                            <span class="badge text-bg-warning"><i class="bi bi-arrow-repeat me-1"></i>Persistent</span>
                                        </div>
                                        <div x-show="chunk.denial_context && chunk.denial_context.l7_request_samples && chunk.denial_context.l7_request_samples.length > 0" class="small mb-2">
                                            <span class="fw-semibold text-muted">L7 Request Samples:</span>
                                            <table class="table table-sm table-bordered mt-1 mb-0" style="max-width:500px">
                                                <thead>
                                                    <tr class="small text-muted">
                                                        <th>Method</th><th>Path</th><th>Decision</th><th class="text-end">Count</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <template x-for="sample in (chunk.denial_context ? chunk.denial_context.l7_request_samples : [])" :key="sample.path + sample.method">
                                                        <tr class="small">
                                                            <td><code x-text="sample.method"></code></td>
                                                            <td class="font-monospace" x-text="sample.path"></td>
                                                            <td>
                                                                <span class="badge" :class="sample.decision === 'allow' ? 'text-bg-success' : 'text-bg-danger'" x-text="sample.decision"></span>
                                                            </td>
                                                            <td class="text-end" x-text="sample.count"></td>
                                                        </tr>
                                                    </template>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div>
                                            <button class="btn btn-sm btn-outline-secondary"
                                                    @click.stop="goToLogs(chunk)"
                                                    title="Open sandbox logs filtered by binary/host">
                                                <i class="bi bi-arrow-up-right-square me-1"></i>View in logs
                                            </button>
                                        </div>
                                    </div>
                                </td>
                                <td class="font-monospace small text-muted" x-text="chunk.binary || '\u2014'"></td>
                                <td>
                                    <template x-for="badge in endpointBadges($prop(chunk.proposed_rule, 'endpoints'))" :key="badge">
                                        <span class="badge endpoint-badge me-1" x-text="badge"></span>
                                    </template>
                                    <span x-show="$gt(endpointMore($prop(chunk.proposed_rule, 'endpoints')), 0)"
                                          class="badge text-bg-secondary"
                                          x-text="'+' + endpointMore($prop(chunk.proposed_rule, 'endpoints'))"></span>
                                    <span x-show="$empty($prop(chunk.proposed_rule, 'endpoints'))" class="text-muted">&mdash;</span>
                                </td>
                                <td class="text-end" x-text="$gt(chunk.hit_count, 1) ? chunk.hit_count : '\u2014'"></td>
                                <td class="small text-muted" x-text="formatSeen(chunk)"></td>
                                <td class="text-center">
                                    <template x-if="$gt(chunk.confidence, 0)">
                                        <div class="progress confidence-bar d-inline-flex" :title="confidencePercent(chunk) + '%'">
                                            <div class="progress-bar bg-info" :style="'width:' + confidencePercent(chunk) + '%'"></div>
                                        </div>
                                    </template>
                                    <span x-show="!chunk.confidence" class="text-muted">&mdash;</span>
                                </td>
                                <td class="text-end">
                                    <!-- Vote progress badge (shown only under an active workflow) -->
                                    <template x-if="workflow && $eq(chunk.status, 'pending')">
                                        <div class="small text-muted mb-1"
                                             :title="(decisionsByChunk[chunk.id] || []).map(d => voterLabel(d) + ': ' + d.decision).join('\\n')">
                                            <i class="bi bi-people-fill me-1"></i>
                                            <span x-text="voteCount(chunk.id) + '/' + workflow.required_approvals"></span>
                                            <span x-show="hasVoted(chunk.id)" class="badge text-bg-info ms-1">voted</span>
                                        </div>
                                    </template>
                                    <template x-if="$eq(chunk.status, 'pending') && $isOperator">
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-secondary" @click.stop="openEdit(chunk.id)" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button class="btn btn-success"
                                                    @click.stop="approve(chunk.id)"
                                                    :disabled="workflow && hasVoted(chunk.id)"
                                                    :title="workflow ? 'Vote to approve' : 'Approve'">
                                                <i class="bi bi-check"></i>
                                            </button>
                                            <button class="btn btn-outline-danger" @click.stop="reject(chunk.id)" title="Reject">
                                                <i class="bi bi-x"></i>
                                            </button>
                                        </div>
                                    </template>
                                    <template x-if="$eq(chunk.status, 'approved') && $isOperator">
                                        <button class="btn btn-outline-secondary btn-sm" @click.stop="undo(chunk.id)" title="Undo">
                                            <i class="bi bi-arrow-counterclockwise"></i>
                                        </button>
                                    </template>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </template>
</div>
{% endblock %}

{% block modals %}
{% include "components/approval_modal.html" %}
{% endblock %}

{% block sandbox_js %}
<script src="/static/js/approvals.js"></script>
{% endblock %}