{% extends "base.html" %}
{% block title %}Login — {{ slug }} — Ontoref{% endblock title %}
{% block content %}
<div class="flex justify-center pt-16">
  <div class="card bg-base-200 shadow-xl w-full max-w-sm">
    <div class="card-body gap-4">
      <div class="text-center">
        {% if logo or logo_dark %}
        <div class="flex justify-center mb-2">
          {% if logo %}<img id="login-logo-light" src="{{ logo }}" alt="{{ slug }}" class="h-14 max-w-[12rem] object-contain">{% endif %}
          {% if logo_dark %}<img id="login-logo-dark" src="{{ logo_dark }}" alt="{{ slug }}" class="h-14 max-w-[12rem] object-contain hidden">{% endif %}
        </div>
        {% else %}
        <h1 class="text-2xl font-bold"><span style="color:#C0CCD8;">onto</span><span style="color:#E8A838;">ref</span></h1>
        {% endif %}
        <p class="text-base-content/60 text-sm mt-1 font-mono">{{ slug }}</p>
      </div>
      {% if error %}
      <div class="alert alert-error text-sm py-2">
        <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        Invalid key.
      </div>
      {% endif %}
      <form method="POST" action="/ui/{{ slug }}/login" class="flex flex-col gap-3">
        <div class="form-control">
          <label class="label pb-1">
            <span class="label-text text-xs uppercase tracking-wider text-base-content/50">Access key</span>
          </label>
          <input type="password" name="key" autofocus
                 class="input input-bordered input-sm font-mono"
                 placeholder="••••••••••••">
        </div>
        <button type="submit" class="btn btn-primary btn-sm mt-1">Enter</button>
      </form>
    </div>
  </div>
</div>
{% endblock content %}
{% block scripts %}
{% if logo or logo_dark %}
<script>
(function () {
  var light = document.getElementById("login-logo-light");
  var dark  = document.getElementById("login-logo-dark");
  function apply(theme) {
    if (!light && !dark) return;
    if (light && !dark) { light.classList.remove("hidden"); return; }
    var isDark = theme === "dark";
    if (light) light.classList.toggle("hidden", isDark);
    if (dark)  dark.classList.toggle("hidden", !isDark);
  }
  apply(document.documentElement.getAttribute("data-theme") || "dark");
  new MutationObserver(function(ms) {
    ms.forEach(function(m) {
      if (m.attributeName === "data-theme")
        apply(document.documentElement.getAttribute("data-theme"));
    });
  }).observe(document.documentElement, { attributes: true });
})();
</script>
{% endif %}
{% endblock scripts %}