{% extends "admin/base.html" %}
{% load static %}

{% block extrahead %}
    <script type="module" src="{% static 'se/node_modules/chart.js/dist/chart.umd.js' %}"></script>
    <script src="{% static 'se/node_modules/luxon/build/global/luxon.min.js' %}"></script>
    <script type="module" src="{% static 'se/node_modules/chartjs-adapter-luxon/dist/chartjs-adapter-luxon.umd.min.js' %}"></script>
    <script type="module" src="{% static 'se/analytics.js' %}"></script>
{% endblock %}

{% block css %}
    .chart {
        display: inline-block;
        width: 24%;
        vertical-align: middle;
    }
    .crawler_chart {
        display: inline-block;
        width: 32%;
    }
    #top_bar {
        padding-bottom: 0px;
    }
    #lang_chart {
        cursor: pointer;
    }
{% endblock %}

{% block content %}
    <span class="chart card">
        <a href="{% url "admin:se_document_changelist" %}" style="text-decoration: none">
            <div id="doc_count_panel_loader" class="loader" style="display: inline-block; margin-left: 50%; font-size: initial">🪃</div>
            <div id="doc_count" class="card_text">
                <div></div>
                <div>
                    🔤 Documents
                </div>
            </div>
        </a>
    </span>
    <span class="chart card">
        <a href="{% url "admin:crawl_queue" %}" style="text-decoration: none">
            <div id="url_queued_panel_loader" class="loader" style="display: inline-block; margin-left: 50%; font-size: initial">🪃</div>
            <div id="url_queued" class="card_text">
                <div></div>
                <div>
                    <span style="color: #0b0">✔</span> URLs queued
                </div>
            </div>
        </a>
    </span>
    {% if crawlers_count %}
        <span class="chart card">
            <a href="{% url "admin:crawlers" %}" style="text-decoration: none">
                <div class="card_text">
                    <div>{{ crawlers_count }}</div>
                    <div>
                        <span style="color: var(--text)">🕷</span>
                        Crawler{{ crawlers_count|pluralize }}
                    </div>
                </div>
            </a>
        </span>
    {% endif %}
    <h4>Index</h4>
    <span class="chart">
        <div id="hdd_chart_loader" class="loader" style="display: inline-block; margin-left: 50%">🪃</div>
        <div style="position: relative">
            <canvas id="hdd_chart" style="display: none;"></canvas>
        </div>
    </span>
    <span class="chart">
        <div id="lang_chart_loader" class="loader" style="display: inline-block; margin-left: 50%">🪃</div>
        <div style="position: relative">
          <canvas id="lang_chart" style="display: none;"></canvas>
        </div>
    </span>
    <span class="chart">
        <div id="mime_chart_loader" class="loader" style="display: inline-block; margin-left: 50%">🪃</div>
        <div style="position: relative">
          <canvas id="mime_chart" style="display: none;"></canvas>
        </div>
    </span>

    <h4>Crawlers</h4>
    <h5>Last 24h</h5>
    <span class="crawler_chart">
        <div id="doc_count_24_chart_loader" class="loader" style="display: inline-block; margin-left: 50%">🪃</div>
        <canvas id="doc_count_24_chart" style="display: none;"></canvas>
    </span>
    <span class="crawler_chart">
        <div id="speed_24_chart_loader" class="loader" style="display: inline-block; margin-left: 50%">🪃</div>
        <canvas id="speed_24_chart" style="display: none;"></canvas>
    </span>
    <span class="crawler_chart">
        <div id="queue_24_chart_loader" class="loader" style="display: inline-block; margin-left: 50%">🪃</div>
        <canvas id="queue_24_chart" style="display: none;"></canvas>
    </span>
    <br/>
    <h5>Last year</h5>
    <span class="crawler_chart">
        <div id="doc_count_365_chart_loader" class="loader" style="display: inline-block; margin-left: 50%">🪃</div>
        <canvas id="doc_count_365_chart" style="display: none;"></canvas>
    </span>
    <span class="crawler_chart">
        <div id="speed_365_chart_loader" class="loader" style="display: inline-block; margin-left: 50%">🪃</div>
        <canvas id="speed_365_chart" style="display: none;"></canvas>
    </span>
    <span class="crawler_chart">
        <div id="queue_365_chart_loader" class="loader" style="display: inline-block; margin-left: 50%">🪃</div>
        <canvas id="queue_365_chart" style="display: none;"></canvas>
    </span>
{% endblock %}
