{% extends 'settings/layout.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block title %}{% trans "Dashboard" %}{% endblock %}

{% block header %}{% trans "Dashboard" %}{% endblock %}

{% block panel %}

<div class="columns block has-text-centered">
    <div class="column is-3">
        <div class="notification">
            <h3>{% trans "Total users" %}</h3>
            <p class="title is-5">{{ users|intcomma }}</p>
        </div>
    </div>
    <div class="column is-3">
        <div class="notification">
            <h3>{% trans "Active this month" %}</h3>
            <p class="title is-5">{{ active_users|intcomma }}</p>
        </div>
    </div>
    <div class="column is-3">
        <div class="notification">
            <h3>{% trans "Statuses" %}</h3>
            <p class="title is-5">{{ statuses|intcomma }}</p>
        </div>
    </div>
    <div class="column is-3">
        <div class="notification">
            <h3>{% trans "Works" %}</h3>
            <p class="title is-5">{{ works|intcomma }}</p>
        </div>
    </div>
</div>

<div class="columns block is-multiline">
    {% if reports %}
    <div class="column">
        <a href="{% url 'settings-reports' %}" class="notification is-warning is-block">
            {% blocktrans trimmed count counter=reports with display_count=reports|intcomma %}
            {{ display_count }} open report
            {% plural %}
            {{ display_count }} open reports
            {% endblocktrans %}
        </a>
    </div>
    {% endif %}
    {% if not site.allow_registration and site.allow_invite_requests and invite_requests %}
    <div class="column">
        <a href="{% url 'settings-invite-requests' %}" class="notification is-block is-success is-light">
            {% blocktrans trimmed count counter=invite_requests with display_count=invite_requests|intcomma %}
            {{ display_count }} invite request
            {% plural %}
            {{ display_count }} invite requests
            {% endblocktrans %}
        </a>
    </div>
    {% endif %}
</div>

<div class="block content">
    <h2>{% trans "Instance Activity" %}</h2>
    <div class="columns">
        <div class="column">
            <div class="box">
                <canvas id="user_stats"></canvas>
            </div>
        </div>
        <div class="column">
            <div class="box">
                <canvas id="status_stats"></canvas>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<script>
const labels = [{% for label in user_stats.labels %}"{{ label }}",{% endfor %}];
const data = {
    labels: labels,
    datasets: [{
        label: '{% trans "Total" %}',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: {{ user_stats.total }},
    }, {
        label: '{% trans "Active this month" %}',
        backgroundColor: 'rgb(75, 192, 192)',
        borderColor: 'rgb(75, 192, 192)',
        data: {{ user_stats.active }},
    }]
};
// === include 'setup' then 'config' above ===

const config = {
    type: 'line',
    data: data,
    options: {}
};

var userStats = new Chart(
    document.getElementById('user_stats'),
    config
);
</script>

<script>
const status_labels = [{% for label in status_stats.labels %}"{{ label }}",{% endfor %}];
const status_data = {
    labels: status_labels,
    datasets: [{
        label: '{% trans "Statuses posted" %}',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: {{ status_stats.total }},
    }]
};
// === include 'setup' then 'config' above ===

const status_config = {
    type: 'bar',
    data: status_data,
    options: {}
};

var statusStats = new Chart(
    document.getElementById('status_stats'),
    status_config
);
</script>
{% endblock %}

{% block scripts %}
<script src="{% static 'js/vendor/chart.min.js' %}?v={{ js_cache }}"></script>
{% endblock %}