{% 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 }}" />
    <!-- Flatpickr -->
    <link rel="preload"
          href="{{ url_for('static', filename='libs/flatpickr/flatpickr.min.css') }}"
          as="style" />
    <link rel="stylesheet"
          href="{{ url_for('static', filename='libs/flatpickr/flatpickr.min.css') }}"
          nonce="{{ style_nonce }}" />
    <link rel="stylesheet"
          href="{{ url_for('static', filename='libs/flatpickr/themes/airbnb.css') }}"
          nonce="{{ style_nonce }}" />
    {% if theme == 'dark' %}
        <link rel="stylesheet"
              href="{{ url_for('static', filename='libs/flatpickr/themes/airbnb.dark.css') }}"
              nonce="{{ style_nonce }}" />
    {% endif %}
{% 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['bans']|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="bans-waiting"
           class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
           data-i18n="status.loading_bans">Loading bans...</p>
        <table id="bans"
               class="table responsive nowrap position-relative w-100 d-none">
        </table>
        <span class="position-absolute bottom-0 start-50 translate-middle badge rounded-pill bg-secondary">
            TZ: <script nonce="{{ script_nonce }}">document.write(Intl.DateTimeFormat().resolvedOptions().timeZone);</script>
        </span>
    </div>
    {% if not is_readonly %}
        <div class="modal modal-xl fade"
             id="modal-ban-ips"
             data-bs-backdrop="static"
             tabindex="-1"
             aria-hidden="true"
             role="dialog">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" data-i18n="modal.title.add_bans">Add Ban(s)</h5>
                        <button id="add-ban"
                                type="button"
                                class="btn btn-text-bw-green rounded-pill p-0 ms-4 me-2">
                            <i class="bx bx-plus-circle"></i>&nbsp;<span data-i18n="button.add">INSERT</span>
                        </button>
                        <button id="clear-bans"
                                type="button"
                                class="btn btn-text-danger rounded-pill p-0 ms-4">
                            <i class="bx bx-trash"></i>&nbsp;<span data-i18n="button.clear">CLEAR</span>
                        </button>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"
                                data-i18n="aria.label.close"></button>
                    </div>
                    <form id="bans-form" action="{{ url_for("bans") }}/ban" method="POST">
                        <div class="modal-body justify-content-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <ul id="bans-container" class="list-group rounded-top w-100">
                                <li id="bans-header" class="list-group-item bg-secondary text-white">
                                    <div class="row">
                                        <div class="col-12 col-md-5 text-center fw-bold"
                                             data-i18n="modal.section.ban_details">Ban Details</div>
                                        <div class="col-12 col-md-6 border-start text-center fw-bold"
                                             data-i18n="modal.section.ban_scope">Ban Scope</div>
                                        <div class="col-12 col-md-1 border-start text-center fw-bold"
                                             data-i18n="modal.section.delete">Delete</div>
                                    </div>
                                </li>
                                <li id="ban-1" class="list-group-item rounded-0 ban-item">
                                    <div class="row g-3">
                                        <div class="col-12 col-md-5">
                                            <div class="card shadow-sm border-0 h-100">
                                                <div class="card-body p-3">
                                                    <div class="mb-3">
                                                        <label for="ip" class="form-label" data-i18n="form.label.ip_address">IP Address</label>
                                                        <input type="text"
                                                               name="ip"
                                                               class="form-control"
                                                               placeholder="127.0.0.1"
                                                               required />
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="datetime" class="form-label" data-i18n="form.label.end_date">End Date</label>
                                                        <input type="flatpickr-datetime"
                                                               name="datetime"
                                                               class="form-control"
                                                               required />
                                                    </div>
                                                    <div class="mb-3 form-check">
                                                        <input type="checkbox"
                                                               class="form-check-input permanent-ban-checkbox"
                                                               id="permanentBan-1"
                                                               name="permanent">
                                                        <label class="form-check-label"
                                                               for="permanentBan-1"
                                                               data-i18n="form.label.permanent_ban">Ban Forever</label>
                                                        <div class="form-text text-muted" data-i18n="form.help.permanent_ban">
                                                            If checked, the ban will never expire until manually removed
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <label for="reason" class="form-label" data-i18n="form.label.reason">Reason</label>
                                                        <input type="text" name="reason" class="form-control" value="ui" required />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="card shadow-sm border-0 h-100">
                                                <div class="card-body p-3">
                                                    <div class="mb-3">
                                                        <label for="ban_scope" class="form-label" data-i18n="form.label.ban_scope">Ban Scope</label>
                                                        <select name="ban_scope" class="form-select ban-scope-select">
                                                            <option value="global" selected data-i18n="scope.global_all_services">Global (all services)</option>
                                                            <option value="service" data-i18n="scope.service_specific">Service-specific</option>
                                                        </select>
                                                    </div>
                                                    <div class="service-field mb-3">
                                                        <label for="service" class="form-label" data-i18n="form.label.service_name">Service Name</label>
                                                        <select name="service" class="form-select">
                                                            <option value=""
                                                                    disabled
                                                                    selected
                                                                    data-i18n="form.placeholder.select_service">
                                                                Select a service
                                                            </option>
                                                            {% for service in services %}<option value="{{ service }}">{{ service }}</option>{% endfor %}
                                                        </select>
                                                        <div class="form-text text-muted"
                                                             data-i18n="form.help.ban_specific_service">
                                                            Ban will apply only to this specific service
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-1 d-flex align-items-center justify-content-center">
                                            <button type="button"
                                                    class="btn btn-outline-danger btn-sm disabled"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-placement="right"
                                                    title="Can't delete the original Ban"
                                                    data-i18n="tooltip.cannot_delete_original_ban">
                                                <i class="bx bx-trash bx-xs"></i>
                                            </button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="modal-footer justify-content-center flex-wrap gap-2">
                            <button type="submit" class="btn btn-danger" data-i18n="button.ban">Ban</button>
                            <button type="reset"
                                    class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal"
                                    data-i18n="button.cancel">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal modal-lg fade"
             id="modal-unban-ips"
             data-bs-backdrop="static"
             tabindex="-1"
             aria-hidden="true"
             role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" data-i18n="modal.title.confirm_unban">Confirm Unban</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"
                                data-i18n="aria.label.close"></button>
                    </div>
                    <form action="{{ url_for("bans") }}/unban" method="POST">
                        <div class="modal-body">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <input type="hidden" id="selected-ips-input-unban" name="ips" value="" />
                            <div class="alert alert-danger text-center"
                                 role="alert"
                                 data-i18n="modal.body.unban_confirmation_alert">
                                Are you sure you want to unban the selected IP addresses?
                            </div>
                            <ul id="selected-ips-unban" class="list-group w-100 mb-3">
                            </ul>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="submit" class="btn btn-danger me-2" data-i18n="button.unban">Unban</button>
                            <button type="reset"
                                    class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal"
                                    data-i18n="button.cancel">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal modal-lg fade"
             id="modal-update-duration"
             data-bs-backdrop="static"
             tabindex="-1"
             aria-hidden="true"
             role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" data-i18n="modal.title.update_duration">Update Ban Duration</h5>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close"
                                data-i18n="aria.label.close"></button>
                    </div>
                    <form action="{{ url_for("bans") }}/update_duration" method="POST">
                        <div class="modal-body">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <input type="hidden"
                                   id="selected-ips-input-update-duration"
                                   name="updates"
                                   value="" />
                            <div class="alert alert-info text-center"
                                 role="alert"
                                 data-i18n="modal.body.update_duration_alert">
                                Select a new duration for the selected bans:
                            </div>
                            <ul id="selected-ips-update-duration" class="list-group w-100 mb-3">
                            </ul>
                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="duration-select"
                                           class="form-label"
                                           data-i18n="form.label.new_duration">New Duration</label>
                                    <select id="duration-select" name="duration" class="form-select" required>
                                        <option value="1h" data-i18n="duration.1_hour">1 Hour</option>
                                        <option value="24h" data-i18n="duration.24_hours">24 Hours</option>
                                        <option value="1w" data-i18n="duration.1_week">1 Week</option>
                                        <option value="permanent" data-i18n="duration.permanent">Permanent</option>
                                        <option value="custom" data-i18n="duration.custom">Custom</option>
                                    </select>
                                </div>
                            </div>
                            <div id="custom-duration-fields"
                                 class="row g-3 mt-2"
                                 style="display: none">
                                <div class="col-12">
                                    <label for="custom-end-date"
                                           class="form-label"
                                           data-i18n="form.label.custom_end_date">Custom End Date</label>
                                    <input type="flatpickr-datetime-update"
                                           id="custom-end-date"
                                           name="custom_end_date"
                                           class="form-control"
                                           placeholder="Select end date and time" />
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="submit"
                                    class="btn btn-warning me-2"
                                    data-i18n="button.update_duration">Update Duration</button>
                            <button type="reset"
                                    class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal"
                                    data-i18n="button.cancel">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {% endif %}
    <!-- / Content -->
{% 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='libs/flatpickr/flatpickr.min.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='libs/flatpickr/plugins/minMaxTimePlugin.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='libs/ipaddr.js/ipaddr.min.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/pages/bans.js') }}"
            nonce="{{ script_nonce }}"
            defer
            type="module"></script>
{% endblock %}