{% extends "cacsremoteservice/views/layouts/master.html" %}

{% block site-nav %}
{% include "cacsremoteservice/views/partials/site-nav.html" with active="configuration" %}
{% endblock %}

{% block scripts %}
<script type="text/javascript">
    codescene.views.configurations.custom_reports.initList();
</script>
{% endblock %}


{% block main %}
{% include "cacsremoteservice/views/configuration/config-header.html" with configuration-tabs=configuration-tabs %}

<div id="page-body" class="configuration-view">
  <div class="text-content">
    <h1>Custom Reports</h1>
    <p class="lead text-muted">
      This is the list of custom reports
    </p>

    <div class="custom-reports-view">
      <table class="table table-striped table-hover"
             id="custom-reports-table">
        <thead>
        <tr>
          <th>Report Name</th>
          <th>Type</th>
          <th> </th>
        </tr>
        </thead>
        <tbody>
        {% for cr in custom-reports %}
        <tr data-custom-report-id="{{cr.id}}">
          <td>{{cr.name}}</td>
          <td>{{cr.report_type}}</td>
          <td>
            <button class="default-button custom-report-edit" data-custom-report-id="{{cr.id}}">Change</button>
            <button class="default-button danger custom-report-delete" data-custom-report-id="{{cr.id}}" data-custom-report-name="{{cr.name}}">Delete</button>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    <p class="lead text-muted">
      * when a custom report is deleted, all related scheduling will also be canceled.
    </p>
  </div>
</div>

{% endblock %}