{% 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 %}

  <div class="dashboard 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 %}

    {{ ajax_block(partials, updates_url, 'upcoming') }}

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

    {{ ajax_block(partials, updates_url, 'inbox') }}

    <div id="totalMessageChartContainer" data-sms-sent="{{ sms_sent }}" data-sms-allowance-remaining="{{ sms_allowance_remaining }}">
      <h2 id="chartTitle">Total Messages</h2>
      <svg id="totalMessageChart"></svg>
      <div id="message"></div>
    </div>
    <div id="totalMessageTable" class="margin-0"></div>
    <p class="align-with-heading-copy margin-bottom-4">
      What counts as 1 text message part?<br />
      See <a class="usa-link" href="{{ url_for('.pricing') }}">Tracking usage</a>.
    </p>

    <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">
      Activity snapshot
    </h2>
    <div id="activityChartContainer">
      <form class="usa-form">
        <label class="usa-label" for="options">Account</label>
        <select class="usa-select margin-bottom-2" name="options" id="options">
          <option value>- Select -</option>
          <option value="service" selected>{{ current_service.name }}</option>
          <option value="individual">{{ current_user.name }}</option>
        </select>
      </form>
      <div id="activityChart">
        <div class="chart-header">
          <div class="chart-subtitle">{{ current_service.name }} - Last 7 Days</div>
          <div class="chart-legend" aria-label="Legend"></div>
        </div>
        <div class="chart-container" id="weeklyChart"></div>
        <table id="weeklyTable" class="usa-sr-only usa-table"></table>
      </div>
    </div>
    <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>

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

    {{ ajax_block(partials, updates_url, 'template-statistics') }}
    <h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
    <div class="table-overflow-x-auto">
      <table class="usa-table usa-table--borderless job-table">
        <thead class="table-field-headings">
          <tr>
            <th scope="col" class="table-field-heading-first">
              <span>File name</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span>Template</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span>Job status</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span>Sender</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span># of Recipients</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span>Report</span>
            </th>
          </tr>
        </thead>
        <tbody>
          {% if jobs %}
            {% for job in jobs[:5] %}
                {% set notification = job.notifications[0] %}
                <tr id="{{ job.job_id }}">
                  <td class="table-field file-name">
                    {{ job.original_file_name[:12] if job.original_file_name else 'Manually entered number'}}
                    <br>
                    <a class="usa-link file-list-filename" href="{{ job.view_job_link }}">View Batch</a>
                  </td>
                  <td class="table-field template">
                    {{ job.template_name }}
                  </td>
                  <td class="table-field time-sent">
                    {{ (job.processing_finished if job.processing_finished else job.processing_started
                      if job.processing_started else job.created_at)|format_datetime_table }}
                  </td>
                  <td class="table-field sender">
                    {{ job.created_by.name }}
                  </td>
                  <td class="table-field count-of-recipients">
                    {{ job.notification_count}}
                  </td>
                  <td class="table-field report">
                    {% if job.time_left != "Data no longer available" %}
                      <a class="usa-link file-list-filename" href="{{ job.download_link }}">Download</a>
                      <span class="usa-hint">{{ job.time_left }}</span>
                    {% elif job %}
                      <span>{{ job.time_left }}</span>
                    {% endif %}
                  </td>
                </tr>
            {% endfor %}
          {% else %}
            <tr class="table-row">
              <td class="table-empty-message" colspan="10">No batched job messages found &thinsp;(messages are kept for {{ service_data_retention_days }} days).</td>
            </tr>
        {% endif %}
        </tbody>
      </table>
    </div>

    <h2>Recent templates</h2>
    {{ ajax_block(partials, updates_url, 'template-statistics') }}
  </div>

{% endblock %}