{% extends "dashboard.html" %}
{% block head %}
    <!-- Datatables -->
    <link rel="preload"
          href="{{ url_for('static', filename='libs/datatables/datatables.min.css') }}"
          as="style" />
    <link rel="stylesheet"
          href="{{ url_for('static', filename='libs/datatables/datatables.min.css') }}"
          nonce="{{ style_nonce }}" />
{% endblock %}
{% block content %}
    <!-- Content -->
    <div class="card table-responsive text-nowrap p-4 pb-8 min-vh-70">
        {% set base_flags_url = url_for('static', filename='img/flags') %}
        <input type="hidden" id="base_flags_url" value="{{ base_flags_url }}" />
        <textarea type="hidden" id="columns_preferences_defaults" class="visually-hidden">
{{ columns_preferences_defaults['reports']|tojson }}</textarea>
        <textarea type="hidden" id="columns_preferences" class="visually-hidden">
{{ columns_preferences|tojson }}</textarea>
        <input type="hidden"
               id="csrf_token"
               name="csrf_token"
               value="{{ csrf_token() }}" />
        <p id="reports-waiting"
           class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
           data-i18n="status.loading_reports">Loading reports...</p>
        <table id="reports"
               class="table responsive nowrap position-relative w-100 d-none">
        </table>
        <div class="d-flex flex-column flex-sm-row align-items-center gap-3 mt-4 pt-3 border-top border-light-subtle small text-muted w-100">
            <div class="flex-grow-1 text-center">
                <span class="badge rounded-pill bg-secondary">
                    TZ:
                    <script nonce="{{ script_nonce }}">document.write(Intl.DateTimeFormat().resolvedOptions().timeZone);</script>
                </span>
            </div>
            <a href="https://db-ip.com"
               class="link-secondary text-decoration-none ms-sm-auto"
               target="_blank"
               rel="noopener noreferrer">IP Geolocation by DB-IP</a>
        </div>
    </div>
    <!-- / Content -->
    <!-- Full URL Modal -->
    <div class="modal fade"
         id="fullUrlModal"
         tabindex="-1"
         aria-labelledby="fullUrlModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="fullUrlModalLabel">Full URL</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <span id="fullUrlContent" class="text-break"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            id="copyUrlBtn"
                            class="btn btn-sm btn-outline-primary me-1">
                        <span class="tf-icons bx bx-copy me-1"></span>Copy
                    </button>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary"
                            data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Security Report Data Modal -->
    <div class="modal fade"
         id="dataModal"
         tabindex="-1"
         aria-labelledby="dataModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dataModalLabel">
                        <span class="tf-icons bx bx-shield-alt-2 me-2"></span>Security Report
                        Details
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="dataContent" class="report-data-content"></div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            id="copyDataBtn"
                            class="btn btn-sm btn-outline-primary me-1">
                        <span class="tf-icons bx bx-copy me-1"></span>Copy Raw Data
                    </button>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary"
                            data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
    <script src="{{ url_for('static', filename='libs/datatables/datatables.min.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='libs/datatables/plugins/ip-address.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/dataTableInit.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/pages/reports.js') }}"
            nonce="{{ script_nonce }}"
            defer
            type="module"></script>
{% endblock %}