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

<div class="row">
  <div class="col-12 mb-4">
    <p>Neue Zugänge zur Plattform können an dieser Stelle über eine komma- oder semikolonseparierte CSV-Datei angelegt werden. Die Datei muss in die folgende Form gebracht werden:</p>

    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>E-Mail-Adresse</th>
            <th>Unternehmen</th>
            <th>Team</th>
            <th>Studien-ID</th>
            <th>Studiengruppen-ID</th>
            <th>Freischaltecode</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Vorname Nachname</td>
            <td>vorname.nachname@mail.de</td>
            <td>Testfirma</td>
            <td>Testabteilung</td>
            <td>123</td>
            <td>SG1</td>
            <td>0000</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <p>Es steht eine <a target="_blank" href="{{demofile}}">Beispiel CSV-Datei</a> zur Verfügung, die bereits diese Form
      aufweist und lediglich mit den realen Daten gefüllt werden muss.<br>
  </div>
</div>

<div class="row">
  <div class="col-12 col-lg-6">
    <div class="card h-100" id="csvImportUploadArea">
      <div class="card-header">
        <h4 class="m-0"><i class="fas fa-upload"></i>&nbsp;Datei hochladen</h4>
      </div>
      <div class="card-body">
          <div class="input-group">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" id="csvImportRemoveFile" type="button" data-toggle="tooltip" title="Datei entfernen"><i class="fas fa-trash-alt"></i></button>
            </div>
            <div class="custom-file">
              <input id="csvImportFileInput" type="file" accept=".csv" class="cursor-pointer custom-file-input">
              <label style="font-size: 1rem" class="cursor-pointer custom-file-label m-0" for="csvImportFileInput">CSV-Datei auswählen</label>
            </div>
          </div>
          <div class="mb-0 mt-2">
            <small>
              Laden Sie hier Ihre Datei hoch. Mit einem Klick auf Datei prüfen wird die Datei auf Gültigkeit überprüft. Wenn die Datei gültig ist, kann der eigentliche Import der neuen Benutzer mit einem Klick auf Datei importieren gestartet werden.
            </small>
          </div>
          <div id="csvImportAdvanced">
            <div class="card mb-0 mt-3">
              <div class="card-header px-3 py-1" id="csvImportAdvancedHeading">
                <button class="btn btn-link m-0 p-0" data-toggle="collapse" data-target="#csvImportAdvancedOptions" aria-expanded="false" aria-controls="csvImportAdvancedOptions">
                  <i class="fas fa-plus ts-accordion-plus"></i> <i class="fas fa-cogs"></i>&nbsp;Erweiterte Einstellungen
                </button>
              </div>
              <div id="csvImportAdvancedOptions" class="collapse" aria-labelledby="csvImportAdvancedHeading" data-parent="#csvImportAdvanced">
                <div class="card-body p-2">
                  <div class="form-group">
                    <label for="csvImportBatchSize" class="ml-0"><small>Batch-Größe für den Import:</small></label>
                    <input type="number" min="1" max="1000" step="1" value="50" class="form-control form-control-sm" id="csvImportBatchSize">
                  </div>
                  <div class="alert alert-warning mb-0" role="alert">
                    <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
                    <p>
                      <small>
                        <b>Wichtig:</b> Ändern Sie diesen Wert nur, wenn Sie wissen, was Sie tun!<br>
                        Je nach Größe zu zuzuweisenden Trainings und der Leistung des Servers kann die Anzahl der an den Sever zum Import zu sendenden Datensätze variiert werden. Eine erfahrungsgemäß gute Startgröße liegt bei <b>50</b>.<br>
                        Bei Bedarf muss der Parameter <code>max_execution_time</code> des Servers (kurzzeitig) erhöht werden.
                      </small>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="csvImportErrorArea" class="d-none alert alert-warning mt-3 mb-0"></div>
      </div>
      <div class="card-footer d-flex align-items-center justify-content-between">
        <button class="btn btn-primary" type="button" id="csvImportCheckSubmit" disabled><i class="fas fa-check"></i>&nbsp;Datei prüfen</button>
        <button class="btn btn-primary" type="button" id="csvImportSubmit" disabled><i class="fas fa-file-import"></i>&nbsp;Datei importieren</button>
      </div>
    </div>
  </div>


  <div class="col-12 col-lg-6">
    <div class="card h-100 mb-0 border-0">
      <div class="card-body p-0">
        <div class="alert alert-info m-0" role="alert">
          <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweise</h5>
          <ul class="pl-4 mb-0">
            <li>Beachten Sie, dass die Datei eine Header-Zeile beeinhalten muss.</li>
            <li>Ein Name und eine E-Mail-Adresse müssen mindestens eingetragen sein.</li>
            <li>Eine E-Mail-Benachrichtung wird automatisch gesendet.</li>
            <li>Bei der Verwendung von Freischaltcodes ist darauf zu achten, dass noch eine ausreichende Anzahl an verbleibenden
              Einlösungen zur Verfügung steht.</li>
            <li>Eine Zuordnung anhand des Freischaltcodes zu Unternehmen/Teams ist bei der Nutzung des
              CSV-Imports <b>nicht</b> möglich. Dafür sind die entsprechenden Spalten zu nutzen. </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 mt-4" id="csvImportTestArea"></div>
</div>

<style>
  .custom-file-label::after {
    content: "Durchsuchen";
  }
</style>
