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

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'django_aws_ses/css/send_stats.css' %}">
{% endblock %}

{% block extrahead %}
    <script src="{% static 'django_aws_ses/js/chart.min.js' %}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const ctx = document.getElementById('chart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [{% for dp in datapoints %}'{% if local_time %}{{ dp.Timestamp }}{% else %}{{ dp.Timestamp|slice:"11:19" }} {{ dp.Timestamp|slice:":10" }}{% endif %}'{% if not forloop.last %},{% endif %}{% endfor %}],
                    datasets: [
                        {
                            label: 'Delivery Attempts',
                            data: [{% for dp in datapoints %}{{ dp.DeliveryAttempts }}{% if not forloop.last %},{% endif %}{% endfor %}],
                            borderColor: '#4bc0c0',
                            fill: false
                        },
                        {
                            label: 'Bounces',
                            data: [{% for dp in datapoints %}{{ dp.Bounces }}{% if not forloop.last %},{% endif %}{% endfor %}],
                            borderColor: '#ff6384',
                            fill: false
                        },
                        {
                            label: 'Complaints',
                            data: [{% for dp in datapoints %}{{ dp.Complaints }}{% if not forloop.last %},{% endif %}{% endfor %}],
                            borderColor: '#ffcd56',
                            fill: false
                        },
                        {
                            label: 'Rejects',
                            data: [{% for dp in datapoints %}{{ dp.Rejects }}{% if not forloop.last %},{% endif %}{% endfor %}],
                            borderColor: '#36a2eb',
                            fill: false
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { position: 'bottom' },
                        title: { display: true, text: 'Sending Stats' }
                    },
                    scales: {
                        x: { display: false }
                    }
                }
            });
        });
    </script>
{% endblock %}

{% block bodyclass %}dashboard{% endblock %}
{% block content_title %}<h1>SES Stats</h1>{% endblock %}

{% block content %}
<div id="content-main">
    <div class="module">
        <table id="quota">
            <caption>Quotas</caption>
            <thead>
                <tr>
                    <th>24h Quota</th>
                    <th>24h Sent</th>
                    <th>Quota Remaining</th>
                    <th>Per/s Quota</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ 24hour_quota|floatformat:0 }}</td>
                    <td>{{ 24hour_sent|floatformat:0 }}</td>
                    <td>{{ 24hour_remaining|floatformat:0 }}</td>
                    <td>{{ persecond_rate|floatformat:2 }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="module">
        <table id="sending_totals">
            <caption>Sending Stats</caption>
            <thead>
                <tr>
                    <th>Delivery Attempts</th>
                    <th>Bounces</th>
                    <th>Complaints</th>
                    <th>Rejected</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ summary.DeliveryAttempts|default:0 }}</td>
                    <td>{{ summary.Bounces|default:0 }}</td>
                    <td>{{ summary.Complaints|default:0 }}</td>
                    <td>{{ summary.Rejects|default:0 }}</td>
                </tr>
            </tbody>
        </table>
        <canvas id="chart"></canvas>
    </div>

    <div class="module">
        <table id="sending_stats">
            <caption>Sending Activity</caption>
            <thead>
                <tr>
                    <th>Delivery Attempts</th>
                    <th>Bounces</th>
                    <th>Complaints</th>
                    <th>Rejected</th>
                    <th>{% if local_time %}Local Time{% else %}Timestamp{% endif %}</th>
                </tr>
            </thead>
            <tbody>
                {% for datapoint in datapoints %}
                <tr>
                    <td>{{ datapoint.DeliveryAttempts|default:0 }}</td>
                    <td>{{ datapoint.Bounces|default:0 }}</td>
                    <td>{{ datapoint.Complaints|default:0 }}</td>
                    <td>{{ datapoint.Rejects|default:0 }}</td>
                    <td>{{ datapoint.Timestamp|escape }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block sidebar %}
<div id="content-related">
    <div class="module" id="recent-actions-module">
        <h2>Verified Emails</h2>
        <table id="verified_emails">
            <thead>
                <tr>
                    <th>Email Address</th>
                </tr>
            </thead>
            <tbody>
                {% for email_address in verified_emails %}
                <tr>
                    <td>{{ email_address|escape }}</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr><td><strong>{{ verified_emails|length }}</strong></td></tr>
            </tfoot>
        </table>
    </div>
</div>
{% endblock %}