{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% load static %}
{% block content %}
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-md-4">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <button class="nav-link active" id="nav-ips-24h-tab" data-bs-toggle="tab" data-bs-target="#nav-ips-24h" type="button" role="tab" aria-controls="nav-home1" aria-selected="true">24H</button>
                        <button class="nav-link" id="nav-ips-7d-tab" data-bs-toggle="tab" data-bs-target="#nav-ips-7d" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">7 Days</button>
                        <button class="nav-link" id="nav-ips-30d-tab" data-bs-toggle="tab" data-bs-target="#nav-ips-30d" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">30 Days</button>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-ips-24h" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table id="table-24h" data-toggle="table" class="table">
                            <thead>
                                <tr>
                                    <th colspan="2">Top 10 атакуващи IP-та (24H):</th>
                                </tr>
                                <tr>
                                    <th scope="col">IP</th>
                                    <th scope="col"></th>
                                    <th scope="col">Count</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="d-flex justify-content-center table-24h-spinner">
                            <div class="spinner-border table-24h-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-ips-7d" role="tabpanel" aria-labelledby="nav-profile-tab">
                        <table id="table-7D" data-toggle="table" data-ajax="ajaxRequest7D" class="table">
                            <thead>
                                <tr>
                                    <th colspan="2">Top 10 атакуващи IP-та (7D):</th>
                                </tr>
                                <tr>
                                    <th scope="col">IP</th>
                                    <th scope="col"></th>
                                    <th scope="col">Count</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="d-flex justify-content-center table-7D-spinner">
                            <div class="spinner-border table-7D-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-ips-30d" role="tabpanel" aria-labelledby="nav-contact-tab">
                        <table id="table-30D" data-toggle="table" data-ajax="ajaxRequest30D" class="table">
                            <thead>
                                <tr>
                                    <th colspan="2">Top 10 атакуващи IP-та (30D):</th>
                                </tr>
                                <tr>
                                    <th scope="col">IP</th>
                                    <th scope="col"></th>
                                    <th scope="col">Count</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="d-flex justify-content-center table-30D-spinner">
                            <div class="spinner-border table-30D-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <table class="table" id="table-proto-24h">
                    <thead>
                        <tr>
                            <th colspan="2">Top 10 attacked protocols (24H):</th>
                        </tr>
                        <tr>
                            <th scope="col">Protocol</th>
                            <th scope="col">Count</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="d-flex justify-content-center table-proto-24h-spinner">
                    <div class="spinner-border table-proto-24h-spinner" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-countries-24h-tab" data-bs-toggle="tab" data-bs-target="#nav-countries-24h" type="button" role="tab" aria-controls="nav-home1" aria-selected="true">24H</button>
                    <button class="nav-link" id="nav-countries-7D-tab" data-bs-toggle="tab" data-bs-target="#nav-countries-7D" type="button" role="tab" aria-controls="nav-home2" aria-selected="true">7D</button>
                    <button class="nav-link" id="nav-countries-30D-tab" data-bs-toggle="tab" data-bs-target="#nav-countries-30D" type="button" role="tab" aria-controls="nav-home3" aria-selected="true">30D</button>
                </div>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-countries-24h" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table class="table" id="table-countries-24h">
                            <thead>
                                <tr>
                                    <th colspan="2">Top 10 атакуващи страни (24H):</th>
                                </tr>
                                <tr>
                                    <th scope="col">Country</th>
                                    <th scope="col">Count</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="d-flex justify-content-center table-countries-24h-spinner">
                            <div class="spinner-border table-countries-24h-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-countries-7D" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table class="table" id="table-countries-7D">
                            <thead>
                                <tr>
                                    <th colspan="2">Top 10 атакуващи страни (7D):</th>
                                </tr>
                                <tr>
                                    <th scope="col">Country</th>
                                    <th scope="col">Count</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="d-flex justify-content-center table-countries-7D-spinner">
                            <div class="spinner-border table-countries-7D-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-countries-30D" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table class="table" id="table-countries-30D">
                            <thead>
                                <tr>
                                    <th colspan="2">Top 10 атакуващи страни (30D):</th>
                                </tr>
                                <tr>
                                    <th scope="col">Country</th>
                                    <th scope="col">Count</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="d-flex justify-content-center table-countries-30D-spinner">
                            <div class="spinner-border table-countries-30D-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-md-center">
            <div class="col-md-12">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-types-24h-bg-tab" data-bs-toggle="tab" data-bs-target="#nav-types-24h-bg" type="button" role="tab" aria-controls="nav-home1" aria-selected="true">24H</button>
                    <button class="nav-link" id="nav-types-7D-bg-tab" data-bs-toggle="tab" data-bs-target="#nav-types-7D-bg" type="button" role="tab" aria-controls="nav-home2" aria-selected="true">7D</button>
                    <button class="nav-link" id="nav-types-30D-bg-tab" data-bs-toggle="tab" data-bs-target="#nav-types-30D-bg" type="button" role="tab" aria-controls="nav-home3" aria-selected="true">30D</button>
                </div>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-types-24h-bg" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table class="table table-type-per-server-24H-bg" id="table-type-per-server-24H-bg">
                            <thead>
                                <tr>
                                    <th>Per Server (BULGARIA)</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        {% url 'report_per_server_csv' as the_url %}
                        <a href="{{ the_url }}?filter=24h_bg">CSV</a>
                        <div class="d-flex justify-content-center table-type-per-server-24H-bg-spinner">
                            <div class="spinner-border table-type-per-server-24H-bg-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-types-7D-bg" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table class="table table-type-per-server-7D-bg" id="table-type-per-server-7D-bg">
                            <thead>
                                <tr>
                                    <th>Per Server (BULGARIA)</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        {% url 'report_per_server_csv' as the_url %}
                        <a href="{{ the_url }}?filter=7d_bg">CSV</a>
                        <div class="d-flex justify-content-center table-type-per-server-7D-bg-spinner">
                            <div class="spinner-border table-type-per-server-7D-bg-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-types-30D-bg" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table class="table table-type-per-server-30D-bg" id="table-type-per-server-30D-bg">
                            <thead>
                                <tr>
                                    <th>Per Server (BULGARIA)</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        {% url 'report_per_server_csv' as the_url %}
                        <a href="{{ the_url }}?filter=30d_bg">CSV</a>
                        <div class="d-flex justify-content-center table-type-per-server-30D-bg-spinner">
                            <div class="spinner-border table-type-per-server-30D-bg-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-md-center">
            <div class="col-md-12">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-types-24h-tab" data-bs-toggle="tab" data-bs-target="#nav-types-24h" type="button" role="tab" aria-controls="nav-home1" aria-selected="true">24H</button>
                    <button class="nav-link" id="nav-types-7D-tab" data-bs-toggle="tab" data-bs-target="#nav-types-7D" type="button" role="tab" aria-controls="nav-home2" aria-selected="true">7D</button>
                    <button class="nav-link" id="nav-types-30D-tab" data-bs-toggle="tab" data-bs-target="#nav-types-30D" type="button" role="tab" aria-controls="nav-home3" aria-selected="true">30D</button>
                </div>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-types-24h" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table class="table table-type-per-server-24H" id="table-type-per-server-24H">
                            <thead>
                                <tr>
                                    <th>Per Server (International)</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        {% url 'report_per_server_csv' as the_url %}
                        <a href="{{ the_url }}?filter=24h_all">CSV</a>
                        <div class="d-flex justify-content-center table-type-per-server-24H-spinner">
                            <div class="spinner-border table-type-per-server-24H-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-types-7D" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table class="table table-type-per-server-7D" id="table-type-per-server-7D">
                            <thead>
                                <tr>
                                    <th>Per Server</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        {% url 'report_per_server_csv' as the_url %}
                        <a href="{{ the_url }}?filter=7d_all">CSV</a>
                        <div class="d-flex justify-content-center table-type-per-server-7D-spinner">
                            <div class="spinner-border table-countries-30D-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-types-30D" role="tabpanel" aria-labelledby="nav-home-tab">
                        <table class="table table-type-per-server-30D" id="table-type-per-server-30D">
                            <thead>
                                <tr>
                                    <th>Per Server</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        {% url 'report_per_server_csv' as the_url %}
                        <a href="{{ the_url }}?filter=30d_all">CSV</a>
                        <div class="d-flex justify-content-center table-type-per-server-30D-spinner">
                            <div class="spinner-border table-countries-30D-spinner" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-md-center">
            <div class="col-md-12">
                {% load humanize %}
                <table class="table">
                    <thead>
                        <tr>
                            <th colspan="5">Статус на сървъра</th>
                        </tr>
                        <tr>
                            <th scope="col">Име на сървъра</th>
                            <th scope="col">Описание на сървъра</th>
                            <th scope="col">IP на сървъра</th>
                            <th scope="col">Последно получена информация</th>
                            <th scope="col">Активен ли е?</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if servers %}
                            {% for server in servers %}
                                <tr>
                                    <td>{{ server.1 }}</td>
                                    <td>{{ server.2 }}</td>
                                    <td>{{ server.3 }}</td>
                                    <td>{{ server.6|naturaltime }}</td>
                                    <td>{% if server.4 %}<i class="bi bi-check-circle-fill" style="color: #0f5132"></i>{% else %}<i class="bi bi-dash-circle-fill" style="color: #a52834"></i>{% endif %}</td>
                                    <td><a href="https://{{ server.3 }}:64297" target="_blank"><i class="bi bi-terminal"></i></a></td>
                                </tr>
                            {% endfor %}
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="{% static 'js/home.js' %}"></script>
{% endblock %}


{% block javascript %}

{% endblock %}