{% extends 'edc_dashboard/base.html' %}
{% load static %}

{% block extrastyle %}{{ block.super }}
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
  <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
{% endblock extrastyle %}

{% block document_ready %}{{ block.super }}
  <script>
    $(document).ready(function () {
      var table = $('#review_queue_table').DataTable({
        order: [[2, 'desc']],
        pageLength: 25,
        columnDefs: [{orderable: false, targets: 6}]
      });

      function exactColumnFilter(selectId, columnIndex) {
        $(selectId).on('change', function () {
          var v = this.value;
          table
            .column(columnIndex)
            .search(v ? '^' + $.fn.dataTable.util.escapeRegex(v) + '$' : '', true, false)
            .draw();
        });
      }

      exactColumnFilter('#site_filter', 1);
      exactColumnFilter('#uploaded_filter', 3);

      // Reset filters on (re)load so the dropdowns match the unfiltered table,
      // even when the browser restores form state from bfcache.
      $('#site_filter, #uploaded_filter').val('');
    });
  </script>
{% endblock document_ready %}

{% block main %}

{{ block.super }}

  <div class="col-sm-1">&nbsp;</div>
  <div class="col-sm-10">
    <div class="panel panel-default">
      <div class="panel-heading">
        <i class="fas fa-eye fa-lg fa-fw"></i> DICOM Review Queue
        <span class="pull-right">
          <a href="{% url 'edc_retinopathy:reviewed-queue' %}">
            <i class="fas fa-check-circle fa-fw"></i> Reviewed</a>
          &nbsp;|&nbsp;
          <a href="{% url 'edc_retinopathy:home_url' %}">
            <i class="fas fa-reply fa-fw"></i> Back</a>
        </span>
      </div>
      <div class="panel-body">
        <form class="form-inline" style="margin-bottom:12px;">
          <div class="form-group">
            <label>Site</label>
            <select id="site_filter" class="form-control input-sm" autocomplete="off">
              <option value="">All sites</option>
              {% for site_title in site_choices %}
                <option value="{{ site_title }}">{{ site_title }}</option>
              {% endfor %}
            </select>
          </div>
          &nbsp;&nbsp;
          <div class="form-group">
            <label>Uploaded</label>
            <select id="uploaded_filter" class="form-control input-sm" autocomplete="off">
              <option value="">All</option>
              <option value="YES">YES</option>
              <option value="OD-ONLY">OD-ONLY</option>
              <option value="OS-ONLY">OS-ONLY</option>
              <option value="No">No</option>
            </select>
          </div>
        </form>
        <table id="review_queue_table" class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Subject</th>
              <th>Site</th>
              <th>Session date</th>
              <th>Uploaded</th>
              <th>OD</th>
              <th>OS</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for session in sessions %}
            <tr>
              <td>{{ session.subject_identifier }}</td>
              <td>{{ session.site_title }}</td>
              <td data-order="{{ session.report_datetime|date:'U' }}">
                <a href="{% url 'edc_retinopathy_admin:edc_retinopathy_camerasession_change' session.pk %}?next=edc_retinopathy:review-queue">
                  {{ session.report_datetime|date:"Y-m-d H:i" }}
                </a>
              </td>
              {% if session.od_dicom_count and session.os_dicom_count %}
              <td data-order="3" data-search="YES"><span class="label label-success">YES</span></td>
              {% elif session.od_dicom_count %}
              <td data-order="2" data-search="OD-ONLY"><span class="label label-info">OD-ONLY</span></td>
              {% elif session.os_dicom_count %}
              <td data-order="1" data-search="OS-ONLY"><span class="label label-info">OS-ONLY</span></td>
              {% else %}
              <td data-order="0" data-search="No"><span class="label label-default">No</span></td>
              {% endif %}
              <td>{{ session.od_dicom_count }}</td>
              <td>{{ session.os_dicom_count }}</td>
              <td>
                {% if session.uploaded %}
                <a href="{% url 'edc_retinopathy:review-detail' session.pk %}"
                   class="btn btn-sm btn-primary">
                  <i class="fas fa-search fa-fw"></i> Review</a>
                {% else %}
                <span class="text-muted">
                  <i class="fas fa-hourglass-half fa-fw"></i> Awaiting images</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-sm-1">&nbsp;</div>

{% endblock main %}