{% extends "dashboard.html" %}
{% block head %}
    <link rel="preload"
          href="{{ url_for('static', filename='libs/apexcharts/apexcharts.min.css') }}"
          as="style" />
    <link rel="stylesheet"
          href="{{ url_for('static', filename='libs/apexcharts/apexcharts.min.css') }}"
          nonce="{{ style_nonce }}" />
    <link rel="preload"
          href="{{ url_for('static', filename='libs/leaflet/leaflet.css') }}"
          as="style" />
    <link rel="stylesheet"
          href="{{ url_for('static', filename='libs/leaflet/leaflet.css') }}"
          nonce="{{ style_nonce }}" />
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/pages/home.css') }}"
          nonce="{{ style_nonce }}" />
{% endblock %}
{% block content %}
    <!-- Content -->
    <div class="home-period-floating" role="status" aria-live="polite">
        <div class="home-period-floating__card shadow-sm">
            <i class='bx bx-calendar-event home-period-floating__icon'></i>
            <div class="home-period-floating__text">
                <span class="home-period-floating__label"
                      data-i18n="dashboard.window.title">Dashboard window</span>
                <strong data-i18n="dashboard.window.last_days"
                        data-i18n-options='{"days": {{ home_stats_days }}}'>Last {{ home_stats_days }} days</strong>
            </div>
        </div>
    </div>
    <div class="row g-4">
        <div class="col-md-3 mb-2">
            <div class="card p-4 position-relative shadow-sm rounded-3 h-100 text-white {% if is_pro_version %}bg-primary{% else %}bg-bw-green{% endif %}">
                {% if is_pro_version %}
                    <img class='position-absolute top-0 end-0 m-3'
                         src="{{ pro_diamond_url }}"
                         alt="Pro plugin"
                         width="24px">
                {% else %}
                    <i class='bx bxs-rocket bx-sm position-absolute top-0 end-0 m-3'></i>
                {% endif %}
                <p class="ps-4 fs-4 mb-2 text-white h-100">
                    <span data-i18n="dashboard.card.plan.title">Plan</span>
                    <br />
                    <span class="fs-3 fw-bold don-jose">
                        {% if is_pro_version %}
                            <span data-i18n="plan.pro">PRO</span>
                        {% else %}
                            <span data-i18n="plan.free">FREE</span>
                        {% endif %}
                    </span>
                </p>
                <a class="ps-4 text-underline text-white-80" href="{{ url_for('pro') }}">
                    {% if is_pro_version %}
                        <span data-i18n="link.more_info">More info</span>
                    {% else %}
                        <span data-i18n="link.upgrade">Upgrade?</span>
                    {% endif %}
                </a>
            </div>
        </div>
        <div class="col-md-3 mb-2">
            <div class="card p-4 position-relative shadow-sm rounded-3 {% if memory_info.memory_state == 'danger' %}bg-danger{% elif memory_info.memory_state == 'low' %}bg-warning{% elif memory_info.memory_state == 'medium' %}bg-secondary{% else %}bg-bw-green{% endif %} text-white h-100">
                <i class='bx bx-chip bx-sm position-absolute top-0 end-0 m-3 text-white'></i>
                <p class="ps-4 fs-4 mb-2">
                    <span data-i18n="dashboard.card.ram.title">System RAM</span>
                    <br />
                    <span class="fs-3 don-jose">{{ memory_info.used_gb }}GB / {{ memory_info.total_gb }}GB</span>
                </p>
                <small class="ps-4 text-white-80 mt-0">
                    <span data-i18n="dashboard.card.ram.usage"
                          data-i18n-options='{"percent": {{ memory_info.used_percent|round(1) }}}'>{{ memory_info.used_percent|round(1) }}% used</span>
                    {% if memory_info.memory_state == 'danger' %}
                        <br />
                        <i class='bx bxs-radiation'></i> <span data-i18n="dashboard.card.ram.critical_high">Critical: System is running out of memory!</span>
                    {% elif memory_info.memory_state == 'low' %}
                        <br />
                        <i class='bx bx-error-alt'></i> <span data-i18n="dashboard.card.ram.warning_low">Warning: Low memory may affect performance</span>
                    {% elif memory_info.memory_state == 'medium' %}
                        <br />
                        <i class='bx bx-info-circle'></i> <span data-i18n="dashboard.card.ram.info_medium">Consider upgrading to 16GB+ for production use</span>
                    {% else %}
                        <br />
                        <i class='bx bx-check-circle'></i> <span data-i18n="dashboard.card.ram.good_high">Excellent memory for production environments</span>
                    {% endif %}
                </small>
            </div>
        </div>
        <div class="col-md-2 mb-2">
            <a role="button"
               href="{{ url_for('instances') }}"
               class="card p-4 position-relative shadow-sm rounded-3 h-100">
                <i class='bx bx-server bx-sm position-absolute top-0 end-0 m-3 text-secondary'></i>
                <p class="ps-4 fs-4 mb-2 h-100">
                    <span data-i18n="dashboard.card.instances.title">Instances</span>
                    <br />
                    <span class="fs-3 don-jose">
                        {{ '0' if instances|length < 10 else '' }}{{ instances|length }}
                    </span>
                </p>
                <small class="ps-4 text-muted mt-0">
                    {% set ns = namespace(up_instances=0, down_instances=0, loading_instances=0) %}
                    {% for instance in instances %}
                        {% if instance['status'] == 'up' %}
                            {% set ns.up_instances = ns.up_instances + 1 %}
                        {% elif instance['status'] == 'down' %}
                            {% set ns.down_instances = ns.down_instances + 1 %}
                        {% else %}
                            {% set ns.loading_instances = ns.loading_instances + 1 %}
                        {% endif %}
                    {% endfor %}
                    <span data-i18n="dashboard.card.instances.status"
                          data-i18n-options='{"up": {{ ns.up_instances }}, "down": {{ ns.down_instances }}, "loading": {{ ns.loading_instances }}}'>{{ ns.up_instances }} up / {{ ns.down_instances }} down / {{ ns.loading_instances }} loading</span>
                </small>
            </a>
        </div>
        <div class="col-md-2 mb-2">
            <a role="button"
               href="{{ url_for('services') }}"
               class="card p-4 position-relative shadow-sm rounded-3 h-100">
                <i class='bx bx-cube bx-sm position-absolute top-0 end-0 m-3 text-secondary'></i>
                <p class="ps-4 fs-4 mb-2 h-100">
                    <span data-i18n="dashboard.card.services.title">Services</span>
                    <br />
                    <span class="fs-3 don-jose">
                        {{ '0' if services|length < 10 else '' }}{{ services|length }}
                    </span>
                </p>
                <small class="ps-4 text-muted mt-0">
                    {% set ns = namespace(online_services=0, draft_services=0) %}
                    {% for service in services %}
                        {% if service['is_draft'] %}
                            {% set ns.draft_services = ns.draft_services + 1 %}
                        {% else %}
                            {% set ns.online_services = ns.online_services + 1 %}
                        {% endif %}
                    {% endfor %}
                    <span data-i18n="dashboard.card.services.status"
                          data-i18n-options='{"online": {{ ns.online_services }}, "draft": {{ ns.draft_services }}}'>{{ ns.online_services }} online / {{ ns.draft_services }} draft</span>
                </small>
            </a>
        </div>
        <div class="col-md-2 mb-2">
            <a role="button"
               href="{{ url_for('plugins') }}"
               class="card p-4 position-relative shadow-sm rounded-3 h-100">
                <i class='bx bx-plug bx-sm position-absolute top-0 end-0 m-3 text-secondary'></i>
                <p class="ps-4 fs-4 mb-2 h-100">
                    <span data-i18n="dashboard.card.plugins.title">Plugins</span>
                    <br />
                    <span class="fs-3 don-jose">
                        {{ '0' if plugins|length < 10 else '' }}{{ plugins|length }}
                    </span>
                </p>
                <small class="ps-4 text-muted mt-0">
                    {% set ns = namespace(core_plugins=0, external_plugins=0, pro_plugins=0) %}
                    {% for plugin in plugins.values() %}
                        {% if plugin['type'] == 'core' %}
                            {% set ns.core_plugins = ns.core_plugins + 1 %}
                        {% elif plugin['type'] == 'pro' %}
                            {% set ns.pro_plugins = ns.pro_plugins + 1 %}
                        {% else %}
                            {% set ns.external_plugins = ns.external_plugins + 1 %}
                        {% endif %}
                    {% endfor %}
                    <span data-i18n="dashboard.card.plugins.status"
                          data-i18n-options='{"core": {{ ns.core_plugins }}, "pro": {{ ns.pro_plugins }}, "external": {{ ns.external_plugins }}}'>{{ ns.core_plugins }} core / {{ ns.pro_plugins }} PRO / {{ ns.external_plugins }} external</span>
                </small>
            </a>
        </div>
        <div class="col-md-6 mb-2">
            <div class="card p-4 position-relative shadow-sm rounded-3 bg-secondary text-white h-100">
                <i class='bx bx-broadcast bx-sm position-absolute top-0 end-0 m-3 text-white'></i>
                <p class="ps-4 fs-4 mb-2">
                    <span data-i18n="dashboard.card.total_requests.title">Total Requests</span>
                    <br />
                    <span class="fs-3 don-jose">{{ human_readable_number(request_errors.values() |sum) }}</span>
                </p>
            </div>
        </div>
        <div class="col-md-3 mb-2">
            <a role="button"
               class="card p-4 position-relative shadow-sm rounded-3 h-100 text-color-hover-danger"
               href="{{ url_for('loading', next=url_for('reports') ) }}">
                <i class='bx bx-block bx-sm position-absolute top-0 end-0 m-3 text-danger'></i>
                <p class="ps-4 fs-4 mb-2">
                    <span data-i18n="dashboard.card.blocked_requests.title">Blocked Requests</span>
                    <br />
                    <span class="fs-3 don-jose">
                        {% set ns = namespace(blocked_requests=0) %}
                        {% for status, count in request_errors.items() %}
                            {% if status in (403, 429, 444) %}
                                {% set ns.blocked_requests = ns.blocked_requests + count %}
                            {% endif %}
                        {% endfor %}
                        {{ human_readable_number(ns.blocked_requests) }}
                    </span>
                </p>
            </a>
        </div>
        <div class="col-md-3 mb-2">
            <div class="card p-4 position-relative shadow-sm rounded-3 h-100">
                <i class='bx bx-globe bx-sm position-absolute top-0 end-0 m-3 text-danger'></i>
                <p class="ps-4 fs-4 mb-2">
                    <span data-i18n="dashboard.card.blocked_unique_ips.title">Blocked Unique IPs</span>
                    <br />
                    <span class="fs-3 don-jose">{{ human_readable_number(blocked_unique_ips) }}</span>
                </p>
            </div>
        </div>
        <div class="col-md-7 row g-4 m-0 p-0">
            <div class="col-12 col-lg-6 mt-2 mb-2">
                <div class="card p-4 position-relative shadow-sm rounded-3 h-100">
                    <div class="card-header p-2">
                        <div class="card-title mb-0">
                            <h5 class="mb-1 me-2 don-jose"
                                data-i18n="dashboard.chart.request_status.title">Request status</h5>
                        </div>
                    </div>
                    <div class="card-body d-flex align-items-center justify-content-center">
                        <div id="requests-data" class="visually-hidden">{{ request_errors|tojson }}</div>
                        <div id="requests-stats"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6 mt-2 mb-2">
                <div class="card p-4 position-relative shadow-sm rounded-3 h-100">
                    <div class="card-header p-2">
                        <div class="card-title mb-0">
                            <h5 class="mb-1 me-2 don-jose"
                                data-i18n="dashboard.chart.top_blocked_ips.title">Top 10 - Blocked IPs</h5>
                        </div>
                    </div>
                    <div class="card-body d-flex align-items-center justify-content-center">
                        {% if request_ips %}
                            <div id="requests-ips-data" class="visually-hidden">{{ request_ips|tojson }}</div>
                            <div id="requests-ips"></div>
                        {% else %}
                            <div class="text-center mt-2">
                                <p class="g-3 p-2 text-primary rounded-lg fw-bold"
                                   data-i18n="status.no_data">No data to show</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-12 mt-2 mb-2">
                <div class="card p-4 position-relative shadow-sm rounded-3 h-100">
                    <div class="card-header p-2">
                        <div class="card-title mb-0">
                            <h5 class="me-2 don-jose mb-0"
                                data-i18n="dashboard.chart.blocked_request_countries.title">
                                Blocked Requests countries
                            </h5>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div id="requests-map-data" class="visually-hidden">{{ request_countries|tojson }}</div>
                        <div id="requests-map" class="rounded h-100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5 mt-2 mb-2">
            <div class="card p-4 position-relative shadow-sm rounded-3 h-100">
                <div class="card-header p-2">
                    <div class="card-title mb-0 d-flex justify-content-between">
                        <h5 class="don-jose mb-0" data-i18n="dashboard.card.news.title">News</h5>
                        <a class="text-decoration-underline link-underline-primary"
                           href="https://www.bunkerweb.io/blog?utm_campaign=self&utm_source=ui"
                           target="_blank"
                           rel="noopener"
                           data-i18n="link.see_more">See more</a>
                    </div>
                </div>
                <div class="bg-bw-green position-relative w-100 p-2 text-white rounded fw-bold overflow-hidden">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1 overflow-hidden me-2">
                            <div id="banner-container">
                                <p id="banner-text" class="mb-0 slide-in">
                                    <span data-i18n="banner.pro">Get the most of BunkerWeb by upgrading to the PRO version. More info and free trial</span> <a class="light-href text-white-80"
    target="_blank"
    rel="noopener"
    href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=banner#pro"
    data-i18n="banner.link.here">here</a>.
                                </p>
                            </div>
                        </div>
                        <i id="next-news" role="button" class='bx bx-sm bx-chevron-right'></i>
                    </div>
                </div>
                <div id="data-news-container-home" class="mt-3">
                    <p class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
                       data-i18n="status.news_connection_error">Impossible to connect to blog news.</p>
                </div>
            </div>
        </div>
        <div class="col-12 mt-2 mb-2">
            <div class="card p-4 position-relative shadow-sm rounded-3">
                <div class="card-header p-2">
                    <div class="card-title mb-0">
                        <h5 class="mb-1 me-2 don-jose"
                            data-i18n="dashboard.chart.blocking_status.title">Blocking status</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <div id="requests-blocking-data" class="visually-hidden">{{ time_buckets|tojson }}</div>
                        <div id="requests-blocking" class="w-100"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- / Content -->
{% endblock %}
{% block scripts %}
    <script src="{{ url_for('static', filename='libs/apexcharts/apexcharts.min.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='libs/leaflet/leaflet.min.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='libs/topojson-client/topojson-client.min.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/pages/home.js') }}"
            nonce="{{ script_nonce }}"
            defer
            type="module"></script>
{% endblock %}