{% extends "base.html" %}

{% block main %}

  <h1>Settings</h1>

  <ul class="nav nav-tabs" id="settingsTabContent" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="settings-account-tab" data-bs-toggle="tab" data-bs-target="#settings-account-tab-pane" type="button" role="tab" aria-controls="settings-account-tab-pane" aria-selected="true">My Account</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="settings-password-tab" data-bs-toggle="tab" data-bs-target="#settings-password-tab-pane" type="button" role="tab" aria-controls="settings-password-tab-pane" aria-selected="false">Password</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="settings-touchkey-tab" data-bs-toggle="tab" data-bs-target="#settings-touchkey-tab-pane" type="button" role="tab" aria-controls="settings-touchkey-tab-pane" aria-selected="false">Touchkey</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="settings-tokens-tab" data-bs-toggle="tab" data-bs-target="#settings-tokens-tab-pane" type="button" role="tab" aria-controls="settings-tokens-tab-pane" aria-selected="false">Tokens</button>
    </li>
  </ul>

  <div class="tab-content" id="settingsTabContent">

  <section class="tab-pane fade pt-3 show active" id="settings-account-tab-pane" role="tabpanel">
    <h2>My Account</h2>

    <div class="row itemlist">
      <div class="col-xl-1 col-md-2 col-sm-3 col-4 mb-3">
	      <div class="card text-bg-light">
	        <div class="card-header">{{ authuser.name }}</div>
	        <img class="card-img-bottom" draggable="false" src="/static/upload/thumbnails/users/{{ authuser.id }}.png?cacheBuster={{ now }}" alt="Avatar of {{ authuser.name }}">
	      </div>
      </div>
    </div>

    <form id="settings-myaccount-form" method="post" action="/settings?change=account" accept-charset="UTF-8">
      <div class="row g-2">
        <div class="col-md">
          <div class="form-floating">
            <input class="form-control" id="settings-myaccount-username" type="text" name="username" value="{{ authuser.name }}">
            <label for="settings-myaccount-username">Username</label>
          </div>
        </div>
        <div class="col-md">
          <div class="form-floating">
            <input class="form-control" id="settings-myaccount-email" type="email" name="email" value="{% if authuser.email is not none %}{{ authuser.email }}{% endif %}">
            <label for="settings-myaccount-email">E-Mail</label>
          </div>
        </div>
        {% if config_smtp_enabled == '1' %}
        <div class="col-md">
          <div class="form-floating">
            <select class="form-select" id="settings-myaccount-receipt-pref" name="receipt_pref">
            {% for pref in receipt_preference_class %}
              <option value="{{ pref.value }}" {% if authuser.receipt_pref == pref %} selected {% endif %}>{{ pref.human_readable }}</option>
            {% endfor %}
            </select>
            <label for="settings-myaccount-receipt-pref">Receipts</label>
          </div>
        </div>
        {% endif %}
      </div>
      <div class="row g-2">
        <div class="col">
          <div class="form-check">
            <input class="form-check-input" id="settings-myaccount-ismember" type="checkbox" disabled="disabled" {% if authuser.is_member %} checked="checked" {% endif %}>
            <label class="form-check-label" for="settings-myaccount-ismember">Member</label>
          </div>
        </div>
        <div class="col">
          <div class="form-check">
            <input class="form-check-input" id="settings-myaccount-isadmin" type="checkbox" disabled="disabled" {% if authuser.is_admin %} checked="checked" {% endif %}>
            <label class="form-check-label" for="settings-myaccount-isadmin">Admin</label>
          </div>
        </div>
        <div class="col">
          <div class="form-check">
            <input class="form-check-input" id="settings-myaccount-logout-after-purchase" type="checkbox" name="logout_after_purchase" {% if authuser.logout_after_purchase %} checked="checked" {% endif %}>
            <label class="form-check-label" for="settings-myaccount-logout-after-purchase">Logout after purchase</label>
          </div>
        </div>
      </div>
      <div class="row g-2">
        <div class="col">
          <input class="btn btn-primary" type="submit" value="Save changes">
        </div>
      </div>
    </form>

    <h2>Avatar</h2>

    <form id="settings-avatar-form" method="post" action="/settings?change=avatar" enctype="multipart/form-data" accept-charset="UTF-8">
      <label class="form-label" for="settings-avatar-avatar">Upload new file: </label>
      <input class="form-control" id="settings-avatar-avatar" type="file" name="avatar" accept="image/*" /><br/>

      <input class="btn btn-primary" type="submit" value="Save changes" />
    </form>
  </section>

  <section class="tab-pane fade pt-3" id="settings-password-tab-pane" role="tabpanel">
    <h2>Password</h2>

    <form id="settings-password-form" method="post" action="/settings?change=password" accept-charset="UTF-8">
      <label class="form-label" for="settings-password-oldpass">Current password: </label>
      <input class="form-control" id="settings-password-oldpass" type="password" name="oldpass" /><br/>

      <label class="form-label" for="settings-password-newpass">New password: </label>
      <input class="form-control" id="settings-password-newpass" type="password" name="newpass" /><br/>

      <label class="form-label" for="settings-password-newpass2">Repeat password: </label>
      <input class="form-control" id="settings-password-newpass2" type="password" name="newpass2" /><br/>

      <input class="btn btn-primary" type="submit" value="Save changes" />
    </form>

  </section>
  <section class="tab-pane fade pt-3" id="settings-touchkey-tab-pane" role="tabpanel">
    <h2>Touchkey</h2>

    <form id="settings-touchkey-form" method="post" action="/settings?change=touchkey" accept-charset="UTF-8">
      Draw a new touchkey (leave empty to disable):
      <br/>
      <svg id="touchkey-svg" width="400" height="400"></svg>
      <br/>
      <input id="settings-touchkey-touchkey" type="hidden" name="touchkey" value="" />

      <input class="btn btn-primary" type="submit" value="Save changes" />
    </form>

    <script src="/static/js/touchkey.js" ></script>
    <script>
      initTouchkey(true, 'touchkey-svg', null, 'settings-touchkey-touchkey');
    </script>
  </section>

  <section class="tab-pane fade pt-3" id="settings-tokens-tab-pane" role="tabpanel">
    <h2>Tokens</h2>

    <strong>Warning:</strong>
    Login tokens are a convenience feature that if used may weaken security.
    Make sure you only use tokens not easily accessible to other people.

    <form id="settings-newtoken-form" method="post" action="/settings?change=addtoken" accept-charset="UTF-8">
      <table class="table table-striped">
	<tr>
	  <th>Token</th>
	  <th>Name</th>
	  <th>Created</th>
	  <th>Actions</th>
	</tr>
	<tr>
	  <td><input class="form-control" id="settings-newtoken-token" type="password" name="token" value="" placeholder="Scan to insert EAN"></td>
	  <td><input class="form-control" id="settings-newtoken-name" type="text" name="name" value="" placeholder="New token name"></td>
	  <td></td>
	  <td><input class="btn btn-success" type="submit" value="Create Token"></td>
	</tr>
	{% for token in tokens %}
	  <tr>
	    <td>••••••••</td>
	    <td>{{ token.name }}</td>
	    <td>{{ token.date }}</td>
	    <td><a class="btn btn-danger" href="/settings?change=deltoken&token={{ token.id }}">Delete</a></td>
	  </tr>
	{% endfor %}
      </table>
    </form>
  </section>


  {{ super() }}

{% endblock %}

{% block eanwebsocket %}
  let tokeninput = document.getElementById("settings-newtoken-token");
  tokeninput.value = e.data;
  tokeninput.select();
  tokeninput.scrollIntoView();
{% endblock %}