{% extends "base.html" %}
{% from "_macros.html" import csrf with context %}
{% set title = "Systeem" %}
{% block content %}
<div class="page-head"><h1>Systeembeheer</h1></div>


<div class="grid grid-2">
  <section class="card">
    <h2>Scherm</h2>
    <form method="post" action="{{ url_for('ui.system_display') }}" class="form">
      {{ csrf() }}
      <label>Rotatie
        <select name="rotation">
          {% for deg, label in [(0, "0° (normaal)"), (90, "90° (rechtsom)"), (180, "180° (ondersteboven)"), (270, "270° (linksom)")] %}
          <option value="{{ deg }}" {% if conf.rotation == deg %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <label>Resolutie
        <select name="resolution">
          <option value="auto" {% if conf.resolution == 'auto' %}selected{% endif %}>Automatisch (voorkeur van het scherm)</option>
          {% for mode in modes %}<option value="{{ mode }}" {% if conf.resolution == mode %}selected{% endif %}>{{ mode }}</option>{% endfor %}
          {% if conf.resolution != 'auto' and conf.resolution not in modes %}<option value="{{ conf.resolution }}" selected>{{ conf.resolution }}</option>{% endif %}
        </select>
        <small>{% if output %}Aangesloten: {{ output.name }}{% if output.current %}, nu {{ output.current }}{% endif %}.{% else %}Schermgegevens verschijnen zodra de kiosk draait.{% endif %}</small>
      </label>
      <label>Zoomfactor
        <input type="number" name="zoom" min="0.25" max="4" step="0.05" value="{{ conf.zoom }}">
        <small>1 = normaal. Groter maakt alles groter (handig op grote tv's).</small>
      </label>
      <label class="check"><input type="checkbox" name="screen_always_on" value="1" {% if conf.screen_always_on %}checked{% endif %} data-toggle-target="#screen-off"> Scherm altijd aan (geen screensaver of energiebeheer)</label>
      <label id="screen-off">Scherm uitschakelen na (minuten zonder invoer)
        <input type="number" name="screen_off_minutes" min="1" max="240" value="{{ conf.screen_off_minutes }}">
      </label>
      <label class="check"><input type="checkbox" name="apply_now" value="1" checked> Direct toepassen (Chromium herstart)</label>
      <button type="submit" class="btn btn-primary">Opslaan</button>
    </form>
  </section>

  <section class="card">
    <h2>Hostname</h2>
    <form method="post" action="{{ url_for('ui.system_hostname') }}" class="form">
      {{ csrf() }}
      <label>Hostname
        <input type="text" name="hostname" value="{{ hostname }}" required maxlength="63" pattern="[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?" autocomplete="off" spellcheck="false">
        <small>De beheerinterface is daarna bereikbaar via <code>http://&lt;hostname&gt;.local:{{ conf.admin_port }}</code>. Geef iedere kiosk op hetzelfde netwerk een unieke naam.</small>
      </label>
      <button type="submit" class="btn btn-primary">Hostname wijzigen</button>
    </form>

    <h2 class="mt">Beheerinterface</h2>
    <form method="post" action="{{ url_for('ui.system_admin') }}" class="form" data-confirm="Als je poort of HTTPS wijzigt, herstart de beheerinterface en word je doorgestuurd naar het nieuwe adres." data-confirm-title="Beheerinterface aanpassen">
      {{ csrf() }}
      <label>Poort
        <input type="number" name="admin_port" min="1024" max="65535" value="{{ conf.admin_port }}">
      </label>
      <label class="check"><input type="checkbox" name="admin_https" value="1" {% if conf.admin_https %}checked{% endif %}> HTTPS gebruiken (zelfondertekend certificaat)</label>
      <label class="check"><input type="checkbox" name="admin_allow_public" value="1" {% if conf.admin_allow_public %}checked{% endif %}> Toegang vanaf publieke IP-adressen toestaan <span class="muted">(afgeraden; gebruik liever VPN)</span></label>
      <button type="submit" class="btn btn-secondary">Opslaan</button>
    </form>
  </section>
</div>

<section class="card">
  <h2>Systeeminformatie</h2>
  <dl class="kv">
    <dt>Versie</dt><dd>VoxIP Kiosk OS {{ s.version }}</dd>
    <dt>Besturingssysteem</dt><dd>{{ s.os }}</dd>
    <dt>Hardware</dt><dd>{{ s.model }}</dd>
    <dt>Uptime</dt><dd>{{ s.uptime }}</dd>
  </dl>
  <p><a href="{{ url_for('ui.logs', source='system') }}">Systeemlogs bekijken →</a></p>
</section>
{% endblock %}