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

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

{% block main %}
<div class="configuration-view" id="page-body">
  <div class="text-content">
    <h1>Project Groups</h1>
    {% comment %} Mount point for javascript {% endcomment%}
    <div class='manage-existing-groups'></div>

    {% if is-admin %}
    <h2>Add new group</h2>
    <form action="" method="post">
      <div class="page-section">
        <div class="form-group">
          <label for="group-name">Group Name</label>
          <input class="form-control"
                 type="text"
                 id="group-name"
                 name="group-name"
                 placeholder="Enter the name of the group..."
                 value="{{group-name}}"
                 autofocus
                 required />
        </div>
        
        {% if feature-flags.sub-groups %}
        <div class="form-group">
          <label for="group-id">Parent Group</label>
          <select class="form-control"
                  id="parent-id"
                  name="parent-id"
                  required>
            {% for group in project-groups %}
              <option value="{{group.id}}"
                {% ifequal default-group group.id %} selected{% endifequal %}>
              {{group.name}}
              </option>
            {% endfor %}
          </select>
        </div>
        {% endif %}
      </div>
      <button class="default-button" type="submit">
        <span class="text">Add</span>
      </button>
    </form>
    {% endif %}
  </div>
</div>
<script>
  codescene.views.groups.initGroupControls(
    'enterprise',
    '{{ view-context }}',
    $('.manage-existing-groups').get(0),
    {{ configurable-groups|json|safe }},
    {{ is-admin }}
  );
</script>
{% endblock %}