{% extends "base.html" %}

{% block content %}
    <h1 class="mb-4">Approvals</h1>

    {% if error %}
        <div class="alert alert-danger" role="alert">
            {{ error }}
        </div>
    {% else %}
        <div class="card mb-4">
            <div class="card-header">Project Scope</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3"><strong>Project</strong><br>{{ scope.project_id or "n/a" }}</div>
                    <div class="col-md-3"><strong>Repo</strong><br>{{ scope.repo_id or "All" }}</div>
                    <div class="col-md-3"><strong>Context</strong><br>{{ scope.bounded_context or "All" }}</div>
                    <div class="col-md-3"><strong>Environment</strong><br>{{ scope.environment or "All" }}</div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-4"><strong>Status Filter</strong><br>{{ applied_filters.status or "All" }}</div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-7">
                <div class="card mb-4">
                    <div class="card-header">Approval Queue</div>
                    <div class="card-body">
                        {% if approvals %}
                            <div class="table-responsive">
                                <table class="table table-dark table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Status</th>
                                            <th>Operation</th>
                                            <th>Actions</th>
                                            <th>Approver</th>
                                            <th>Detail</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in approvals %}
                                            <tr>
                                                <td><code>{{ item.approval_request_id }}</code></td>
                                                <td>{{ item.status or "unknown" }}</td>
                                                <td>{{ item.operation_type or "n/a" }}</td>
                                                <td>{{ (item.required_action_classes or []) | join(", ") or "n/a" }}</td>
                                                <td>{{ item.approver or "pending" }}</td>
                                                <td>
                                                    <a
                                                        href="{{ url_for('approvals') }}?project_id={{ scope.project_id }}{% if scope.repo_id %}&repo_id={{ scope.repo_id }}{% endif %}{% if scope.bounded_context %}&bounded_context={{ scope.bounded_context }}{% endif %}{% if scope.environment %}&environment={{ scope.environment }}{% endif %}{% if applied_filters.status %}&status={{ applied_filters.status }}{% endif %}&approval_request_id={{ item.approval_request_id }}"
                                                    >View</a>
                                                    |
                                                    <a
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        href="{{ url_for('api_approval_detail', approval_request_id=item.approval_request_id) }}?project_id={{ scope.project_id }}{% if scope.repo_id %}&repo_id={{ scope.repo_id }}{% endif %}{% if scope.bounded_context %}&bounded_context={{ scope.bounded_context }}{% endif %}{% if scope.environment %}&environment={{ scope.environment }}{% endif %}"
                                                    >JSON</a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <p class="mb-0">No approval requests were found for this scope.</p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="col-md-5">
                <div class="card mb-4">
                    <div class="card-header">Approval Detail</div>
                    <div class="card-body">
                        {% if detail %}
                            <p><strong>ID:</strong> <code>{{ detail.approval_request_id }}</code></p>
                            <p><strong>Status:</strong> {{ detail.status or "unknown" }}</p>
                            <p><strong>Operation:</strong> {{ detail.operation_type or "n/a" }}</p>
                            <p><strong>Requested By:</strong> {{ detail.requested_by or "n/a" }}</p>
                            <p><strong>Approver:</strong> {{ detail.approver or "pending" }}</p>
                            <p><strong>Reason:</strong> {{ detail.reason or "n/a" }}</p>
                            <p><strong>Required Actions:</strong> {{ (detail.required_action_classes or []) | join(", ") or "n/a" }}</p>
                            <p><strong>Approved Actions:</strong> {{ (detail.approved_action_classes or []) | join(", ") or "n/a" }}</p>
                            <p><strong>Approved Tools:</strong> {{ (detail.approved_tool_names or []) | join(", ") or "n/a" }}</p>
                            <p><strong>Related Refs:</strong> {{ (detail.related_refs or []) | join(", ") or "n/a" }}</p>
                            {% if detail.description %}
                                <p><strong>Description:</strong><br>{{ detail.description }}</p>
                            {% endif %}
                            <h5 class="mt-3">API Actions</h5>
                            <p class="mb-1">
                                <a
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    href="{{ url_for('api_approval_detail', approval_request_id=detail.approval_request_id) }}?project_id={{ scope.project_id }}{% if scope.repo_id %}&repo_id={{ scope.repo_id }}{% endif %}{% if scope.bounded_context %}&bounded_context={{ scope.bounded_context }}{% endif %}{% if scope.environment %}&environment={{ scope.environment }}{% endif %}"
                                >View JSON</a>
                            </p>
                            <p class="mb-0 text-muted">
                                Use <code>POST {{ url_for('api_approval_decision', approval_request_id=detail.approval_request_id) }}</code>
                                to approve or deny, then <code>POST {{ url_for('api_approval_resume', approval_request_id=detail.approval_request_id) }}</code>
                                to resume approved work.
                            </p>
                        {% else %}
                            <p class="mb-0">Select an approval request from the queue to inspect its details.</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}