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

{% block extrahead %}
  <link rel="stylesheet" href="{% static 'ddm_core/css/bootstrap/bootstrap-table.min.css' %}" />
  <link rel="stylesheet" href="{% static 'ddm_core/css/bootstrap/bootstrap-table-filter-control.min.css' %}" />
{% endblock extrahead %}

{% block page_title %}Project Exception Logs{% endblock page_title %}

{% block main_heading %}Project Exception Logs{% endblock main_heading %}

{% block sub_heading %}
  Exception logs track errors and extraction outcomes
  during data donation processing, both from the server and client side.
{% endblock sub_heading %}

{% block main_body %}

  <div id="error-logs" class="ddm-section-container">
    <div class="row">

      <table data-classes="table table-sm table-striped table-hover small-font small-inputs"
             data-toggle="table"
             data-filter-control="true"
             data-show-export="true"
             data-export-types="['csv', 'json']"
             data-export-data-type="all"
             data-export-options='{"fileName": "DDM_ExceptionLogs_{{ project.url_id }}"}'
             data-pagination="true"
             data-page-size="10"
             data-buttons-class="transparent"
             data-side-pagination="server"
             data-url="{% url 'ddm_logging:exception_logs_api' project.url_id %}"
             data-query-params="queryParams">
        <thead>
        <tr>
          <th data-field="date" data-filter-control="input" data-sortable="true">Date</th>
          <th data-field="participant" data-filter-control="input" data-sortable="true">Participant</th>
          <th data-field="exception_type" data-filter-control="select" data-filter-data="var:typesSelect" data-sortable="true">Type</th>
          <th data-field="raised_by" data-filter-control="select" data-filter-data="var:raisedBySelect" data-sortable="true">Raised by</th>
          <th data-field="blueprint" data-filter-control="select" data-filter-data="var:blueprintsSelect" data-sortable="true">Related Blueprint</th>
          <th data-field="message" data-filter-control="input" data-sortable="true">Message</th>
        </tr>
        </thead>
      </table>
    </div>
  </div>
{% endblock main_body %}

{% block scripts %}
  {{ block.super }}
  <script src="{% static 'ddm_core/js/filesaver/FileSaver.min.js' %}"></script>
  <script src="{% static 'ddm_core/js/jquery/tableExport.min.js' %}"></script>
  <script src="{% static 'ddm_core/js/bootstrap/bootstrap-table.min.js' %}"></script>
  <script src="{% static 'ddm_core/js/bootstrap/bootstrap-table-filter-control.min.js' %}"></script>
  <script src="{% static 'ddm_core/js/bootstrap/bootstrap-table-export.min.js' %}"></script>
  <script src="{% static 'ddm_logging/js/bootstrap-table-query-params.js' %}"></script>
  <script>
    var typesSelect = ['', {% for t in types_select %}'{{ t }}'{% if not forloop.last %}, {% endif %}{% endfor %}];
    var raisedBySelect = ['', {% for r in raised_by_select %}'{{ r }}'{% if not forloop.last %}, {% endif %}{% endfor %}];
    var blueprintsSelect = ['', {% for b in blueprints_select %}{% if b %}'{{ b }}'{% if not forloop.last %}, {% endif %}{% endif %}{% endfor %}];
  </script>
{% endblock scripts %}