{% 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.init({% safe %}'{{custom-report.report_type}}', '{{selected_fields}}'{% endsafe %});
</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>New Custom Report</h1>
    <p class="lead text-muted">
      Create a new custom report
    </p>

    {% include "cacsremoteservice/views/partials/validation-errors.html" %}

    {% if has-architect-access? %}
    <section>
      <form action="{{view-context}}/configuration/custom-reports/{% if custom-report.id %}edit/{{custom-report.id}}{% else %}new{% endif %}" method="post" name="custom-reports-form">
        <div class="form-group">
          <label class="form-group-heading" for="name">Report Name</label>
          <input class="form-control" type="text" name="name" id="name" value="{{custom-report.name}}" required />
          <div class="radio">
            <label>
              <input type="radio" name="report_type" value="file-level"
                {% ifequal custom-report.report_type "file-level" %} checked="checked" {% endifequal %}/>
              File Level
            </label>
            &nbsp;&nbsp;&nbsp;
            <label>
              <input type="radio" name="report_type" value="architectural-level"
                     {% ifequal custom-report.report_type "architectural-level" %} checked="checked" {% endifequal %}/>
              Architectural Level
            </label>
          </div>
          <div id="file-level-fields-toggleable"
               {% ifunequal custom-report.report_type "file-level" %} style="display: none" {% endifunequal %}>
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>
                      <label>
                        <input type="checkbox" class="file-all" name="file-all" value="all"/>&nbsp;&nbsp;Select/Deselect All
                      </label>
                  </th>
                </tr>
              </thead>
              <tbody>
              {% for field in file_level_fields %}
                <tr>
                  <td>
                    <div  class="checkbox">
                      <label>
                        <input type="checkbox" class="file-level-fields {{field}}" name="fields_list" value="{{field}}"/>
                        {{field}}
                      </label>
                    </div>
                  </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
          <div id="architectural-level-fields-toggleable"
               {% ifunequal custom-report.report_type "architectural-level" %} style="display: none" {% endifunequal %}>
            <table class="table table-striped table-hover">
              <thead>
              <tr>
                <th>
                  <label>
                    <input type="checkbox" class="architectural-all" name="architectural-all" value="all"/>&nbsp;&nbsp;Select/Deselect All
                  </label>
                </th>
              </tr>
              </thead>
              <tbody>
              {% for field in architectural_level_fields %}
              <tr>
                <td>
                  <div  class="checkbox">
                    <label>
                      <input type="checkbox" class="architectural-level-fields {{field}}" name="fields_list" value="{{field}}"/>
                      {{field}}
                    </label>
                  </div>
                </td>
              </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
        <div id='save-config-button'>
            <button class="default-button" type="submit">
                <i class="save-progress-indicator fa fa-check"></i>
                <span class="text">Save</span>
            </button>
            <button class="default-button secondary btn-cancel" type="button">
                <i class="fa fa-close"></i>
                <span class="text">Cancel</span>
            </button>
        </div>
      </form>
    </section>
    {% endif %}

  </div>
</div>

{% endblock %}