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

{% block secondary-nav %}
{% include "cacsremoteservice/views/groups/group-configuration-header.html" with group-id=group-id tabs=tabs %}
{% endblock %}

{% block scripts %}
<script>
  codescene.views.groups.init();
  document.getElementById("group-name-title").innerHTML = "";
  codescene.views.groups.initGroupName(
      document.getElementById("edit-group-name"),
      {
        groupId: {{group-id}},
        name: "{{group-name}}",
        titleDOM: document.getElementById("group-name-title")
      },
      "{{ view-context }}"
  );
</script>
{% endblock %}

{% block main %}
<div class="configuration-view" id="page-body">
  {% include "cacsremoteservice/views/partials/validation-errors.html" %}
  <div class="text-content">
    <h1>Group Configuration</h1>

    <h3>General</h3>
    <div id="edit-group-name"></div>

    <div class="form-group">
      <h3>Default CodeScene role</h3>
      <p>The privileges for this role are granted to users not having an explicit role mapping.</p>
      <select class="form-control"
              id="default-role"
              data-group-id="{{group-id}}">
        {% for role in roles %}
        <option value="{{role.id}}"
                {% ifequal role.id default-role-id %}
                selected="selected"
                {% endifequal %}>{{role.name}}</option>
        {% endfor %}
      </select>
    </div>

    <form action="" method="post">
      <h3>Add New Role Mapping</h3>
      <div class="form-group">
        <label for="auth-provider">
          Authentication Provider
        </label>
        <select class="form-control"
                id="auth-provider"
                name="auth-provider"
                required>
          {% for p in providers %}
          <option value="{{p.auth-provider/id}}">
          {{p.auth-provider/type|upper}}
          </option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label for="principal">Principal</label>
        <input class="form-control"
               id="principal"
               type="text"
               name="principal"
               placeholder="jane.doe@example.com / janedoe"
               list="principals"
               required />

        <datalist id="principals">
          {% for principal in principals %}
          <option value="{{principal}}"/>
          {% endfor %}
        </datalist> 
        <p>
          The principal can be either a CodeScene login or a username/group retreived from OAuth2/LDAP.
        </p>
      </div>
      <div class="form-group">
        <label for="role">
          CodeScene role:
        </label>
        <select class="form-control"
                id="role"
                name="role"
                required>
          {% for role in roles %}
          <option value="{{role.id}}">
          {{role.name}}
          </option>
          {% endfor %}
        </select>
      </div>

      <button class="default-button" type="submit">Add</button>
    </form>

    <h3 id="all-users">All Role Mappings</h3>
    {% if users|not-empty %}
    <table class="table table-striped all-users">
      <thead>
        <tr>
          <th>Authentication Provider</th>
          <th>Principal</th>
          <th></th>
          <th>CodeScene Role</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for user in users %}
        <tr data-username="{{user.username}}">
          <td>{{user.provider-name|upper}}</td>
          <td>{{user.username}}</td>
          <td>
            <i class="save-progress-indicator fa"></i>
          </td>
          <td>
            <select class="form-control user-role-select"
                    data-group-id="{{group-id}}"
                    data-provider-id="{{user.provider-id}}"
                    data-username="{{user.username}}"
                    data-role-id="{{user.role-id}}">
              {% for role in roles %}
              <option value="{{role.id}}"
                      {% ifequal role.id user.role-id %}
                      selected="selected"
                      {% endifequal %}>{{role.name}}</option>
              {% endfor %}
            </select>
          </td>
          <td class="column-actions">
            <button class="default-button danger user-delete"
                    data-group-id="{{group-id}}"
                    data-provider-id="{{user.provider-id}}"
                    data-username="{{user.username}}">Delete</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p>You haven't defined any mappings yet. Please add one using the dialog above.</p>
    {% endif %}


  </div>
</div>
{% endblock %}