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

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

    <h2 class="font-body-2xl line-height-sans-2 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>

    <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">Recent activity</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 disabled>- 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" role="region" 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 %}

    <div class="table-container">
      <div id="table1" class="table-overflow-x-auto hidden">
        <h2 class="margin-top-4 margin-bottom-1">My activity</h2>
        <table class="usa-table job-table">
          <caption class="usa-sr-only">Table showing the sent jobs for {{current_user.name}}</caption>
          <thead class="table-field-headings">
            <tr>
              <th scope="col" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
              <th data-sortable scope="col" class="table-field-heading"><span>Template</span></th>
              <th data-sortable scope="col" class="table-field-heading"><span>Job status</span></th>
              <th data-sortable scope="col" class="table-field-heading"><span># of Recipients</span></th>
            </tr>
          </thead>
          <tbody>
            {% if jobs %}
              {% for job in jobs[:5] %}
                {% if job.created_by.name == current_user.name %}
                  {% set notification = job.notifications[0] %}
                  <tr id="{{ job.job_id }}">
                    <td class="table-field jobid" role="rowheader">
                      <a class="usa-link" href="{{ job.view_job_link }}">
                        {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
                      </a>
                    </td>
                    <td class="table-field template">{{ job.template_name }}</td>
                    <td class="table-field time-sent">Sent on
                      {{ (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 count-of-recipients">{{ job.notification_count }}</td>
                  </tr>
                {% endif %}
              {% 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>

      <div id="table2" class="table-overflow-x-auto visible">
        <h2 class="margin-top-4 margin-bottom-1">Service activity</h2>
        <table class="usa-table job-table">
          <caption class="usa-sr-only">Table showing the sent jobs for this service</caption>
          <thead class="table-field-headings">
            <tr>
              <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Template</span></th>
              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Job status</span></th>
              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Sender</span></th>
              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span># of Recipients</span></th>
            </tr>
          </thead>
          <tbody>
            {% if jobs %}
              {% for job in jobs %}
                {% set notification = job.notifications[0] %}
                <tr id="{{ job.job_id }}">
                  <td class="table-field jobid" role="rowheader">
                    <a class="usa-link" href="{{ job.view_job_link }}">
                      {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
                    </a>
                  </td>
                  <td class="table-field template">{{ job.template_name }}</td>
                  <td class="table-field time-sent">
                    {% if job.scheduled_for and not job.processing_finished %}
                      Scheduled for
                      {{ job.scheduled_for|format_datetime_table }}
                    {% else %}
                        {% if job.processing_finished %}
                          Sent on {{job.processing_finished|format_datetime_table}}
                        {% elif job.processing_started %}
                          Sending since {{job.processing_started|format_datetime_table}}
                        {% else %}
                          Created at {{job.created_at|format_datetime_table}}
                        {% endif %}
                    {% endif %}
                  </td>
                  <td class="table-field sender">{{ job.created_by.name }}</td>
                  <td class="table-field count-of-recipients">{{ job.notification_count }}</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>
    </div>
    {{ ajax_block(partials, updates_url, 'template-statistics') }}
  </div>

{% endblock %}