<h1 class="text-center mb-5">{{ heading }}</h1>

<h3>Neuen Code anlegen:</h3>

<form id="registerkey-new-form">
    <div class="row form-row">

        <div class="form-group col-md-6">
          <label class="label-above"  for="input-code">Freischaltcode eingeben:</label>
            <input id="input-code" type="number" min="0" class="form-control" name="code"  placeholder="Freischaltcode" required>
            <span class="invalid-feedback d-none">Bitte geben Sie einen gültigen Freischaltcode ein.</span>
            <span class="invalid-feedback d-none">Bitte geben Sie einen Freischaltcode ein, der noch nicht verwendet wird.</span>
        </div>

        <div class="form-group col-md-6">
          <label class="label-above" for="select-vorlage">Vorlage auswählen: <small class="text-muted">(optional)</small></label>
            <select id="select-vorlage" class="custom-select" name="vorlage_id">
              <option value="0">-</option>
              {% for vorlage in vorlagen %}
                <option value="{{vorlage.id}}">{{vorlage.name}}</option>
              {% endfor %}
            </select>
        </div>

        <div class="form-group col-md-6">
          <label class="label-above" for="maxcount">maximale Anzahl der Anmeldungen:</label>
            <input id="maxcount" type="number" min="1" class="form-control" name="max_count"  placeholder="maximale Anzahl" required>
            <span class="invalid-feedback d-none">Bitte geben Sie eine gültige Anzahl ein.</span>
            <span class="text-muted">Feld leer lassen, um unbegrenzte Anzahl an Anmeldungen zu aktivieren.</span>
        </div>

    </div>

    <div class="accordion mt-2 mb-4" id="registerkeyNewAccordion">
      <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="registerkeyNewAccordionHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#registerkeyNewOptions"
                    aria-expanded="false" aria-controls="registerkeyNewOptions">
                    <i aria-hidden="true" class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="registerkeyNewOptions" class="collapse" aria-labelledby="registerkeyNewAccordionHeading" data-parent="#registerkeyNewAccordion">
            <div class="card-body">
              <div class="row form-row">

                <div class="form-group col-md-6">
                  <label class="label-above" for="select-vorlage-optional">2. Vorlage auswählen: <small class="text-muted">(optional)</small></label>
                  <select id="select-vorlage-optional" class="custom-select" name="vorlage_id_optional">
                      <option value="0">-</option>
                      {% for vorlage in vorlagen %}
                        <option value="{{vorlage.id}}">{{vorlage.name}}</option>
                      {% endfor %}
                  </select>
                  <span class="text-muted">Mit einer zweiten Vorlage können Trainings, beispielsweise im Rahmen von Studien, zufällig an Teilnehmende verteilt werden.</span>
                </div>
                <div class="form-group col-md-6">
                  <label class="label-above" for="studiengruppenid">Studiengruppen-ID: <small class="text-muted">(optional)</small></label>
                  <input id="studiengruppenid" class="form-control" name="studiengruppenid" type="text" placeholder="Studiengruppen-ID" maxlength="128">
                  <span class="text-muted">Alle Teilnehmenden, die sich mit diesem Freischaltcode anmelden, werden automatisch in die Studiengruppe aufgenommen.</span>
                </div>

                <div class="form-group col-md-6">
                  <label class="label-above" for="select-company">Unternehmen auswählen:</label>
                  <select id="select-company" class="custom-select" name="company_id">
                    <option value="0">-</option>
                    {% for company in companies %}
                      <option value="{{company.id}}">{{company.name}}</option>
                    {% endfor %}
                  </select>
                </div>
                  <div class="form-group col-md-6">
                    <label class="label-above" for="select-group">Team auswählen:</label>
                      <select id="select-group" class="custom-select" name="companygroup_id">
                        <option value="0">-</option>
                        {% for company in companies %}
                          <optgroup label="{{company.name}}">
                            {% for group in company.getGroups() %}
                              <option value="{{ group.getId }}" data-companyid="{{ company.id }}" disabled>{{ group.name }}</option>
                            {% endfor %}
                          </optgroup>
                        {% endfor %}
                      </select>
                      <span class="invalid-feedback d-none">Für das ausgewählte Unternehmen wurde noch kein Team angelegt. Diese Auswahl kann nur frei bleiben, wenn mindestens ein Team für das ausgewählte Unternehmen im System vorhanden ist.</span>
                  </div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="row">
        <div class="form-group col-md-4">
          <button class="btn btn-primary" type="button" id="registerkey-new-button" >Anlegen</button>
          {{submitnonce | raw}}
        </div>
    </div>
</form>
<br>