{#include base.html}
{#user_active}active{/}
{#contents}

{#if is_admin??}
  <h2>Admin-Konfiguration</h2>
<div class="mt-2">

  <h3>Benutzer</h3>
  <table class="table table-striped table-bordered">
    <thead>
    <tr>
      <th scope="col">Username</th>
      <th scope="col">Raum</th>
      <th scope="col"/>
    </tr>
    </thead>
    <tbody>
    {#for user in users}
    <tr>
      <td>
        {user.username}
      </td>
      <td>
        {user.room.name??}
      </td>
      <td style="width:1px; white-space:nowrap;">
        <a class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#userModal{count}" role="button">Edit</a>
        {#include user-modal.html rooms=rooms update=true id=count user=user}{/include}
      </td>
    </tr>
    {/for}
    </tbody>
  </table>
  <a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal" role="button">neuer Benutzer</a>
  {#include user-modal.html rooms=rooms user=current_user}{/include}
</div>
{/if}

<div class="mt-4">
  <h3>Verkehrsinfos</h3>
  <div class="mx-auto">
    <form class="row g-3 mt-2" action="/user/traffic/config" method="POST" name="trafficAdminForm" enctype="multipart/form-data">
      <div class="col-md-4">
        <div class="form-floating">
          <input type="text" name="googleapikey" class="form-control" id="key" placeholder="google-API-Key" value="{google_api_key}" required>
          <label for="key">google-API-Key</label>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-floating">
          <input type="text" name="officeaddress" class="form-control" id="office" placeholder="Büroadresse" value="{office_address}"
                 required>
          <label for="home">Büroadresse</label>
        </div>
      </div>

      <div class="col-md-1 mt-4">
      <button type="submit" class="btn btn-primary">Speichern</button>
      </div>

    </form>
  </div>
</div>

<hr class="mz-4">

<div class="mt-5">
  <h2>Persönliche Konfiguration von {current_user.username}</h2>
  <a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#passwordModal" role="button">Passwort ändern</a>
  {#include password-modal.html}{/include}
</div>
<div class="mt-4">
  <h3>Verkehrsinfos</h3>
  Die Fahrzeit wird über die googlemaps-API ermittelt und bei Überschreitung des Grenzwerts via E-Mail gewarnt.
  <div class="mx-auto">
    <form class="row g-3 mt-2" action="/user/traffic/config/{current_user.username}" method="POST" name="trafficUserForm"
          enctype="multipart/form-data">
      <div class="col-md-4">
        <div class="form-floating">
          <input type="email" name="traffic_email" class="form-control" id="email" placeholder="E-Mail-Adresse"
                 value="{traffic_email ?: ''}" required>
          <label for="email">E-Mail-Adresse</label>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-floating">
          <input type="text" name="traffic_address" class="form-control" id="home" placeholder="Heimatadresse"
                 value="{traffic_address ?: ''}" required>
          <label for="home">Heimatadresse</label>
        </div>
      </div>

      <div class="col-md-2">
        <div class="form-floating">
          <input type="time" name="traffic_away" class="form-control" id="away" value="{traffic_away ?: ''}" required>
          <label for="away">Hinfahrt</label>
        </div>
      </div>

      <div class="col-md-2">
        <div class="form-floating">
          <input type="time" name="traffic_back" class="form-control" id="back" value="{traffic_back ?: ''}" required>
          <label for="back">Rückfahrt</label>
        </div>
      </div>

      <div class="col-md-3">
        <div class="form-floating">
          <input type="number" min="1" max="999" name="traffic_duration" class="form-control" placeholder="Grenzwert Fahrzeit" id="duration"
                 value="{traffic_duration ?: ''}" required>
          <label for="duration">Grenzwert Fahrzeit</label>
        </div>
      </div>

      <div class="col-md-12">
        <div class="form-check form-switch">
          <input id="trafficswitch" class="form-check-input" type="checkbox" name="traffic_active"
                 {#if traffic_active??}checked{/if} value="true" >
          <label class="form-check-label" for="trafficswitch">Verkehrsinfos via google-API aktiv</label>
        </div>
      </div>

      <div class="col-md-1 mt-4">
        <button type="submit" class="btn btn-primary">Speichern</button>
      </div>

    </form>
  </div>
</div>
{/contents}
{/include}