{% 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="modal fade"
         id="loadingModal"
         data-bs-backdrop="static"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-transparent border-0 shadow-none">
                <div class="modal-body">
                    <div class="d-flex justify-content-center align-items-center w-100">
                        <lottie-player src="{{ url_for('static', filename='json/periscop.min.json') }}" background="transparent"  speed="1" style="width: 300px; height: 300px;" class="img-fluid" loop autoplay></lottie-player>
                    </div>
                    <p class="mt-3 text-white text-center"
                       data-i18n="status.pinging_instances">Pinging instances, please wait...</p>
                </div>
            </div>
        </div>
    </div>
    <div class="card table-responsive text-nowrap p-4 pb-8 min-vh-70">
        <input type="hidden" id="instances_number" value="{{ instances|length }}" />
        <textarea type="hidden"
                  id="columns_preferences_defaults"
                  class="visually-hidden">{{ columns_preferences_defaults['instances']|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="instances-waiting"
           class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
           data-i18n="status.loading_instances">Loading instances...</p>
        <table id="instances"
               class="table responsive nowrap position-relative w-100 d-none">
            <thead>
                <tr>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Show the instances' details"
                        data-i18n="tooltip.table.instances.details"></th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Select all instances"
                        data-i18n="tooltip.table.instances.select_all"></th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The hostname of the Instance"
                        data-i18n="tooltip.table.instances.hostname">
                        <span data-i18n="table.header.hostname">Hostname</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The user defined or auto-generated Instance's name"
                        data-i18n="tooltip.table.instances.name">
                        <span data-i18n="table.header.name">Name</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The creation method of the Instance"
                        data-i18n="tooltip.table.instances.method">
                        <span data-i18n="table.header.method">Method</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The Instance's health status"
                        data-i18n="tooltip.table.instances.health">
                        <span data-i18n="table.header.health">Health</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The Instance's type"
                        data-i18n="tooltip.table.instances.type">
                        <span data-i18n="table.header.type">Type</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The date and time when the Instance was created"
                        data-i18n="tooltip.table.instances.created">
                        <span data-i18n="table.header.created">Created</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The date and time when the Instance was last seen"
                        data-i18n="tooltip.table.instances.last_seen">
                        <span data-i18n="table.header.last_seen">Last Seen</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The actions that can be performed on the Instance"
                        data-i18n="tooltip.table.instances.actions">
                        <span data-i18n="table.header.actions">Actions</span>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for instance in instances %}
                    <tr>
                        <td></td>
                        <td></td>
                        <td>{{ instance.hostname }}</td>
                        <td>{{ instance.name }}</td>
                        <td id="method-{{ instance.hostname }}">{{ instance.method }}</td>
                        <td>
                            {% if instance.status == "up" %}
                                <span id="status-{{ instance.hostname }}"
                                      class="badge rounded-pill bg-label-bw-green"
                                      data-i18n="status.up">Up</span>
                            {% elif instance.status == "loading" %}
                                <span id="status-{{ instance.hostname }}"
                                      class="badge rounded-pill bg-label-warning"
                                      data-i18n="status.loading">Loading</span>
                            {% else %}
                                <span id="status-{{ instance.hostname }}"
                                      class="badge rounded-pill bg-label-danger"
                                      data-i18n="status.{{ instance.status }}">{{ instance.status | title }}</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                {% if instance.type == "container" %}
                                    <i class="bx bxl-docker"></i>&nbsp;<span data-i18n="instance.type.container">Container</span>
                                {% elif instance.type == "pod" %}
                                    <i class="bx bxl-kubernetes"></i>&nbsp;<span data-i18n="instance.type.pod">Pod</span>
                                {% else %}
                                    <i class="bx bx-microchip"></i>&nbsp;<span data-i18n="instance.type.static">Static</span>
                                {% endif %}
                            </div>
                        </td>
                        <td class="instance-creation-date">{{ instance.creation_date.astimezone().isoformat() }}</td>
                        <td class="instance-last-seen-date">{{ instance.last_seen.astimezone().isoformat() }}</td>
                        <td>
                            <div class="d-flex justify-content-evenly">
                                {% set can_delete_instance = is_ui_api_method(instance['method']) %}
                                <button type="button"
                                        class="btn btn-primary btn-sm me-1 ping-instance"
                                        data-instance="{{ instance['hostname'] }}"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="bottom"
                                        data-bs-original-title="Ping instance {{ instance['hostname'] }}"
                                        data-i18n="tooltip.button.ping_instance"
                                        data-i18n-options='{"hostname": "{{ instance['hostname'] }}"}'>
                                    <i class="bx bx-bell bx-xs"></i>
                                </button>
                                <div data-bs-toggle="tooltip"
                                     data-bs-placement="bottom"
                                     data-bs-original-title="..."
                                     data-i18n="{% if instance.status != 'up' %}tooltip.instance_not_up{% else %}tooltip.button.reload_instance{% endif %}"
                                     data-i18n-options='{"hostname": "{{ instance['hostname'] }}"}'>
                                    <button type="button"
                                            class="btn btn-outline-secondary btn-sm me-1 reload-instance{% if instance.status != 'up' %} disabled{% endif %}"
                                            data-instance="{{ instance['hostname'] }}">
                                        <i class="bx bx-refresh bx-xs"></i>
                                    </button>
                                </div>
                                <div data-bs-toggle="tooltip"
                                     data-bs-placement="bottom"
                                     data-bs-original-title="..."
                                     data-i18n="{% if instance.status != 'up' %}tooltip.instance_not_up{% else %}tooltip.button.stop_instance{% endif %}"
                                     data-i18n-options='{"hostname": "{{ instance['hostname'] }}"}'>
                                    <button type="button"
                                            class="btn btn-outline-secondary btn-sm me-1 stop-instance{% if instance.status != 'up' %} disabled{% endif %}"
                                            data-instance="{{ instance['hostname'] }}">
                                        <i class="bx bx-stop bx-xs"></i>
                                    </button>
                                </div>
                                {% set delete_tooltip_key = 'tooltip.disabled_readonly' if user_readonly else ('tooltip.disabled_db_readonly' if is_readonly else ('tooltip.disabled_by_method' if not can_delete_instance else 'tooltip.button.delete_instance')) %}
                                {% set delete_tooltip_options = '{"method": "' ~ instance['method'] ~ '"}' if not can_delete_instance and not is_readonly else '{"hostname": "' ~ instance['hostname'] ~ '"}' %}
                                <div data-bs-toggle="tooltip"
                                     data-bs-placement="bottom"
                                     data-bs-original-title="..."
                                     data-i18n="{{ delete_tooltip_key }}"
                                     data-i18n-options='{{ delete_tooltip_options }}'>
                                    <button type="button"
                                            data-instance="{{ instance['hostname'] }}"
                                            class="btn btn-outline-danger btn-sm me-1 delete-instance{% if not can_delete_instance or is_readonly %} disabled{% endif %}">
                                        <i class="bx bx-trash bx-xs"></i>
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
            <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>
        </table>
    </div>
    <div id="feedback-toast"
         class="bs-toast toast fade bg-{% if theme == 'light' %}white{% else %}dark{% endif %} border"
         role="alert"
         aria-live="assertive"
         aria-atomic="true"
         data-bs-autohide="true">
        <div class="toast-header d-flex align-items-center">
            <i class="d-block h-auto rounded tf-icons bx bx-xs bx-bell bx-tada me-2"></i>
            <span class="fw-medium me-auto">BunkerWeb Forever</span>
            <small class="text-body-secondary" data-i18n="flash.time.just_now">just now</small>
            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="toast"
                    aria-label="Close"
                    data-i18n="aria.label.close"></button>
        </div>
        <div class="toast-body" data-i18n="flash.easter_egg">If you read this, it means that you're curious 👀</div>
    </div>
    {% if not is_readonly %}
        <div class="modal fade"
             id="modal-create-instance"
             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.create_new_instance">Create new instance</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("instances") }}/new" method="POST">
                        <div class="modal-body">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <div class="mb-3">
                                <label for="hostname"
                                       class="form-label fw-medium"
                                       data-i18n="form.label.hostname">Hostname</label>
                                <input type="text"
                                       class="form-control form-control-lg mb-3"
                                       id="hostname"
                                       name="hostname"
                                       placeholder="http://bunkerweb:5000"
                                       pattern="^(https?://)?(?!.*\.\.)[^\s\/:]{1,256}(:\d+)?$"
                                       maxlength="256"
                                       required />
                                <div class="alert p-1">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item bg-transparent border-0 d-flex align-items-center">
                                            <i class="bx bx-info-circle me-2"></i>
                                            <span data-i18n="form.help.hostname_length_limit">The hostname is limited to 256 characters long.</span>
                                        </li>
                                        <li class="list-group-item bg-transparent border-0 d-flex align-items-center">
                                            <i class="bx bx-info-circle me-2"></i>
                                            <span data-i18n="form.help.hostname_special_chars">Only <code class="d-inline ms-1 me-1">/</code> and <code class="d-inline ms-1 me-1">:</code> are allowed in protocol/port.</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label" data-i18n="form.label.name">Name</label>
                                <input type="text"
                                       class="form-control"
                                       id="name"
                                       name="name"
                                       placeholder="My Bunker"
                                       maxlength="256"
                                       required />
                            </div>
                            <div class="alert alert-primary text-center"
                                 role="alert"
                                 data-i18n="modal.body.instance_creation_alert">
                                You don't need to provide the port or the server_name. The values of <code>API_HTTP_PORT</code>, <code>API_LISTEN_HTTPS</code>, <code>API_HTTPS_PORT</code>, and <code>API_SERVER_NAME</code> will be used for the instance configuration.
                            </div>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="submit"
                                    class="btn btn-bw-green me-2"
                                    data-i18n="button.create_instance">Create instance</button>
                            <button type="reset"
                                    class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal"
                                    data-i18n="button.close">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal fade"
             id="modal-delete-instances"
             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.delete_instance">Delete instances</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("instances") }}/delete" method="POST">
                        <div class="modal-body">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                            <input type="hidden" id="selected-instances-input" name="instances" value="" />
                            <div class="alert alert-danger text-center"
                                 role="alert"
                                 data-i18n="modal.body.delete_confirmation_alert">
                                Are you sure you want to delete the selected instances?
                            </div>
                            <div id="selected-instances" class="mb-3"></div>
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="submit"
                                    class="btn btn-outline-danger me-2"
                                    data-i18n="button.delete_instance">Delete instances</button>
                            <button type="reset"
                                    class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal"
                                    data-i18n="button.close">Close</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/lottie-player/lottie-player.min.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/pages/instances.js') }}"
            nonce="{{ script_nonce }}"
            defer
            type="module"></script>
{% endblock %}