{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% block meta_title %}{{ 'Security Dashboard'|trans }}{% endblock %}

{% set active_menu = 'security' %}
{% set params = admin.system_get_params %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <div>
                <h3 class="card-title">{{ 'Security Dashboard'|trans }}</h3>
                <p class="card-subtitle">{{ 'Run built-in security checks and review the current status of key platform safeguards.'|trans }}</p>
            </div>
            <div class="card-actions">
                <a class="btn btn-primary btn-3" href="{{ 'security/run_checks'|api_url }}" {{ fb_api_link({callback: 'setResults'}) }}>{{ "Run All Checks"|trans }}</a>
            </div>
        </div>
        <div class="card-body border-top border-bottom py-3">
            <p class="text-secondary mb-0">{{ 'Run all checks for a full snapshot, or execute individual checks while investigating one specific area.'|trans }}</p>
        </div>
        <div class="table-responsive">
            <table class="table card-table table-vcenter sortable">
                <thead>
                    <tr>
                        <th scope="col">{{ "Name"|trans }}</th>
                        <th scope="col">{{ "Description"|trans }}</th>
                        <th scope="col">{{ "Result"|trans }}</th>
                        <th scope="col" class="no-sort w-1"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for check in admin.security_list_checks() %}
                    <tr>
                        <td scope="row">{{ check.name }}</td>
                        <td scope="row">{{ check.description }}</td>
                        <td id="{{ check.id }}" scope="row">
                            <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded border text-secondary bg-body-tertiary">
                                <span class="badge bg-secondary-lt text-secondary">{{ 'Not Run'|trans }}</span>
                            </div>
                        </td>
                        <td class="text-end" scope="row">
                            <a class="btn btn-outline-secondary btn-sm text-nowrap" href="{{ 'security/run_check'|api_url(query: { 'id': check.id, 'throw': true }) }}" {{ fb_api_link({callback: 'setResult'}) }}>{{ 'Run Check'|trans }}</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block js %}
<script>
    function setResults(results) {
        Object.entries(results).forEach(([id, result]) => {
            setResult(result);
        });
    }

    function setResult(result) {
        const existingDiv = document.getElementById(result.id);
        let badgeClass = 'bg-danger-lt text-danger';
        let label = `{{ 'Failed'|trans }}`;
        const message = document.createElement('div');

        message.className = 'small text-body-secondary';
        message.textContent = result.message;

        if (result.result === 'passed') {
            badgeClass = 'bg-success-lt text-success';
            label = `{{ 'Passed'|trans }}`;
        } else if (result.result === 'warning') {
            badgeClass = 'bg-warning-lt text-warning';
            label = `{{ 'Warning'|trans }}`;
        }

        existingDiv.innerHTML = `
            <div class="d-flex flex-column gap-2 rounded border p-3 bg-body-tertiary">
                <div><span class="badge ${badgeClass}">${label}</span></div>
            </div>
        `;
        existingDiv.querySelector('.d-flex').appendChild(message);
        message.style.whiteSpace = 'pre-line';
    }
</script>
{% endblock %}
