{% extends "base.html" %}
{% from "_macros.html" import badge, csrf with context %}
{% set title = "Kiosk" %}
{% block content %}
<div class="page-head">
  <h1>Kioskbeheer</h1>
  {{ badge(s.browser.status, s.browser.label) }}
</div>


<div class="grid grid-2">
  <section class="card">
    <h2>Instellingen</h2>
    <form method="post" action="{{ url_for('ui.kiosk_settings') }}" class="form">
      {{ csrf() }}
      <label>Kiosk-URL
        <input type="url" name="url" value="{{ conf.url }}" required pattern="https://.+" maxlength="2048" autocomplete="off" spellcheck="false">
        <small>Alleen HTTPS. Een toegangstoken in de URL (zoals <code>?token=</code> van Daynivo) wordt elders afgeschermd getoond.</small>
      </label>
      <label>Apparaatnaam
        <input type="text" name="device_name" value="{{ conf.device_name }}" required maxlength="64">
      </label>
      <label>Automatisch verversen
        <select name="refresh_interval">
          {% set intervals = [(0, "Uit"), (60, "Elke minuut"), (300, "Elke 5 minuten"), (900, "Elk kwartier"), (1800, "Elk half uur"), (3600, "Elk uur"), (21600, "Elke 6 uur"), (86400, "Elke dag")] %}
          {% set known = intervals|map(attribute=0)|list %}
          {% for value, label in intervals %}<option value="{{ value }}" {% if conf.refresh_interval == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
          {% if conf.refresh_interval not in known %}<option value="{{ conf.refresh_interval }}" selected>Elke {{ conf.refresh_interval }} seconden</option>{% endif %}
        </select>
        <small>Wordt overgeslagen zolang de URL niet bereikbaar is, zodat een offline werkende pagina blijft staan.</small>
      </label>
      <label>Browserprofiel
        <select name="browser_profile">
          <option value="persistent" {% if conf.browser_profile == 'persistent' %}selected{% endif %}>Bewaren (cookies en offline-cache blijven na herstart)</option>
          <option value="ephemeral" {% if conf.browser_profile == 'ephemeral' %}selected{% endif %}>Alleen in werkgeheugen (schoon bij iedere start)</option>
        </select>
      </label>
      <label class="check"><input type="checkbox" name="browser_restart" value="1" {% if conf.browser_restart %}checked{% endif %}> Chromium automatisch herstarten na een crash</label>
      <button type="submit" class="btn btn-primary">Opslaan</button>
    </form>
  </section>

  <section class="card">
    <h2>Huidig scherm</h2>
    <div class="screenshot" data-screenshot="{{ url_for('ui.kiosk_screenshot') }}">
      <p class="muted" data-screenshot-msg>Klik op ‘Screenshot maken’ om te zien wat de kiosk nu toont.</p>
      <img alt="Screenshot van het kioskscherm" hidden>
    </div>
    <button type="button" class="btn btn-secondary" data-screenshot-btn>Screenshot maken</button>
    <dl class="kv kv-tight">
      <dt>Ingestelde URL</dt><dd class="break">{{ masked_url }}</dd>
      <dt>Getoonde pagina</dt><dd class="break">{{ agent.page_url or "–" }}</dd>
      <dt>Laatste controle</dt><dd>{% if agent.checked_at %}<time data-epoch="{{ agent.checked_at }}"></time> — {% if agent.target_reachable %}bereikbaar{% else %}{{ agent.reason or "niet bereikbaar" }}{% endif %}{% else %}–{% endif %}</dd>
      {% if agent.offline_since %}<dt>Offline sinds</dt><dd><time data-epoch="{{ agent.offline_since }}"></time></dd>{% endif %}
    </dl>
  </section>
</div>

<section class="card">
  <h2>Laatste meldingen</h2>
  {% if errors %}
  <pre class="log log-short">{% for line in errors %}{{ line }}
{% endfor %}</pre>
  {% else %}
  <p class="muted">Geen waarschuwingen of fouten.</p>
  {% endif %}
  <p><a href="{{ url_for('ui.logs', source='kiosk') }}">Alle kiosklogs bekijken →</a></p>
</section>
{% endblock %}