{% extends "withnav_template.html" %}

{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading,
hidden_field_heading, row_heading, notification_status_field, notification_carrier_field,
notification_carrier_message_field %}
{% from "components/ajax-block.html" import ajax_block %}

{% block service_page_title %}
Dashboard
{% endblock %}

{% block maincolumn_content %}
<script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>


<div class="dashboard margin-top-0 margin-bottom-2">

    <h1 class="usa-sr-only">Dashboard</h1>
    {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
    {% include 'views/dashboard/write-first-messages.html' %}
    {% endif %}

    {% include 'views/dashboard/_upcoming.html' %}

    <h2 class="font-body-2xl line-height-sans-2 margin-top-0">{{ current_service.name }} Dashboard</h2>

    <div id="totalMessageChartContainer" data-messages-sent="{{ messages_sent }}" data-messages-remaining="{{ messages_remaining }}">
        <div class="grid-row flex-align-center">
            <h2 id="chartTitle" class="margin-right-1">Total messages</h2>
            <button
            type="button"
            class="usa-tooltip usa-tooltip__information margin-right-0"
            data-position="top"
            title="Total messages track the sum of messages for the service: pending, failed, or delivered"
            >
            <span class="usa-sr-only">More information</span>
            i
            </button>
        </div>
        <svg id="totalMessageChart"></svg>
        <div id="message"></div>
    </div>
    <div id="totalMessageTable" class="margin-0"></div>
    {% include 'views/dashboard/activity-table.html' %}

    {% if current_user.has_permissions('manage_service') %}{% endif %}

    {% include 'views/dashboard/most-used-templates.html' %}

</div>

{% endblock %}