{% extends "cacsremoteservice/views/layouts/project-view.html" %}

{% block scripts %}
<script>
  {% if feature-flags.project-creation-redesign %}
  codescene.views.projects.newProjectWizard.groups.init({
    mountPoint: document.getElementById('page-body'),
    viewContext: '{{view-context}}',
    groups: {{accessible-groups|json|safe}},
    allowNoGroup: {{allow-no-group?}},
    redirectTo: '{{redirect-to}}'
  });
  document.getElementById('page-body').style.backgroundColor = 'var(--gray-200)';

  {% endif %}
</script>
{% endblock scripts %}

{% block main %}
<div class="project-wizard-view details" id="page-body">
  <div class="title-area">
    <h1>Pick the group to create the project in</h1>
  </div>
  <form action="{{view-context}}/projects/new/specify-group" method="post">
    {% include "cacsremoteservice/views/partials/validation-errors.html" %}

    <div class="page-section">
      <div class="form-group">
        <label for="group-id">Project Group</label>
        <select class="form-control"
                id="group-id"
                name="group-id"
                required>
          {% for group in project-groups %}
          <option value="{{group.id}}"
            {% ifequal default-group group.id %} selected{% endifequal %}>
            {{group.name}}
          </option>
          {% endfor %}
        </select>
      </div>
    </div>
    <button class="default-button" type="submit">Confirm</button>
  </form>
</div>
{% endblock %}