{% 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" id="updates">
  <h2>Software-updates</h2>
  <dl class="kv">
    <dt>Geïnstalleerd</dt><dd>Daynivo Kiosk OS {{ s.version }}</dd>
    <dt>Nieuwste versie</dt>
    <dd>
      {% if update.check_error %}<span class="muted">Onbekend — controleren mislukt: {{ update.check_error }}</span>
      {% elif update.latest %}{{ update.latest }}{% if update.available %} <strong>— beschikbaar</strong>{% else %} <span class="muted">(je bent bij)</span>{% endif %}
      {% else %}<span class="muted">Nog niet gecontroleerd</span>{% endif %}
    </dd>
    {% if update.checked %}<dt>Gecontroleerd</dt><dd>{{ update.checked }}</dd>{% endif %}
    {% if update.running %}<dt>Status</dt><dd>Bezig met bijwerken naar {{ update.target }}…</dd>
    {% elif update.status == 'failed' %}<dt>Laatste update</dt><dd>Mislukt{% if update.finished %} op {{ update.finished }}{% endif %}: {{ update.install_error }}</dd>
    {% elif update.status == 'done' and update.finished %}<dt>Laatste update</dt><dd>Gelukt op {{ update.finished }}</dd>{% endif %}
  </dl>

  <form method="post" action="{{ url_for('ui.system_updates') }}" class="form mt-sm">
    {{ csrf() }}
    <label class="check"><input type="checkbox" name="auto_update" value="1" {% if conf.auto_update %}checked{% endif %}> Automatisch bijwerken <span class="muted">(elke nacht tussen 03:00 en 05:00, als er een nieuwe versie is)</span></label>
    <button type="submit" class="btn btn-secondary">Opslaan</button>
  </form>

  <div class="actions-row mt-sm">
    <form method="post" action="{{ url_for('ui.system_update_check') }}" class="inline-form">{{ csrf() }}<button type="submit" class="btn btn-secondary">Nu controleren</button></form>
    {% if update.available and not update.running %}
    <form method="post" action="{{ url_for('ui.system_update_install') }}" class="inline-form"
          data-confirm="Daynivo Kiosk OS wordt bijgewerkt naar {{ update.latest }}. Het scherm en de beheerinterface zijn een paar minuten niet beschikbaar." data-confirm-title="Nu bijwerken">
      {{ csrf() }}<button type="submit" class="btn btn-primary">Bijwerken naar {{ update.latest }}</button>
    </form>
    {% endif %}
  </div>
  <p class="muted small">De configuratie blijft behouden en wordt voor elke update eerst bewaard in <code>/var/backups</code>.</p>
</section>

<section class="card">
  <h2>Systeeminformatie</h2>
  <dl class="kv">
    <dt>Versie</dt><dd>Daynivo 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 %}