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

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

{% block scripts %}
{% endblock %}

<!-- There is one HTML form for generic configuration templates
     and then one form per provider to avoid conflicts.
     Theoretically we could save everything at once but the required fields would cause problems in that case. -->

{% 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>Settings Presets</h1>
    <h3 class="lead text-muted">
      Create settings presets that can be used when configuring projects
    </h3>
    {% if validation-errors|not-empty %}
    <section>
      <h2 class="validation-errors-heading alert-warning">
        Error
      </h2>
      <ul class="validation-errors">
        {% for error in validation-errors %}
        <li>
          <i class="fa fa-exclamation-triangle"></i>
          {{error}}
        </li>
        {% endfor %}
      </ul>
    </section>
    {% endif %}
    <p class="text-muted">
      Deactivating a settings preset will make it not available in the pickers in project configuration.
    </p>
    <form method="POST">
      <div class="row" style="display: flex; align-content: flex-end">
        <div style="padding: 0 1em">
          <label for="category">Type</label>
          <select class="form-control"
                  id="category"
                  type="text"
                  name="category"
                  required>
            {% for cat in categories %}
            <option value="{{ cat.0 }}">{{ cat.1 }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-xs-2" style="align-content: end">
          <button id="new-settings" class="default-button primary" type="submit">
            New
          </button>
        </div>
      </div>
    </form>
    <table class="table table-striped">
      <colgroup>
        <col>
        <col style="width: 250px">
        <col style="width: min-content">
      </colgroup>
      <thead>
      <tr>
        <th title="Label">Label</th>
        <th title="Type">Type</th>
        <th class="column-actions"></th>
      </tr>
      </thead>
      <tbody>
      {% for item in items %}
      <tr>
        <td style="align-content: center">{{item.label}}</td>
        <td style="align-content: center">{{item.category}}</td>
        <td class="column-actions" style="display: flex">
          <form action="settings/{{item.id}}/deactivate{{query-string}}" method="POST">
            {% if item.active? %}
            <input class="default-button danger" type="submit" value="Deactivate"
                   title="Deactivate"/>
            {% else %}
            <input class="default-button" type="submit" value="Activate" style="width: 127px"
                   title="Activate"/>
            {% endif %}
          </form>
          <a class="default-button" href="settings/{{item.id}}">Edit</a>
        </td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
    <div class="row">
      <div class="col-xs-12" style="display: flex; justify-content: flex-end">
        {% if page > 0 %}
        <a id="prev-page" class="default-button primary" type="submit" href="?page={{ page|add:-1 }}">
          Prev
        </a>
        {% endif %}
        {% if next-page %}
        <a id="next-page" class="default-button primary" type="submit" href="?page={{ page|add:1 }}">
          Next
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}