{% extends "base.html" %}
{% load static %}
{% block title %}Sign in · {{ portal_name }}{% endblock %}
{% block masthead %}{% endblock %}
{% block footer %}{% endblock %}
{% block main_class %} login-page{% endblock %}
{% block head_extra %}{% if opening_url %}
<link rel="preload" as="image" href="{{ opening_url }}" fetchpriority="high">
{% endif %}
<script>
/* The entrance is a greeting, so it plays ONCE per browsing session — not
   again on a back-button return, and not on the re-render after a mistyped
   password, when someone is mid-task and wants the form, not a flourish.
   This has to run in the HEAD: the beats are CSS animations that start at
   first paint, so deciding any later would show a frame of the opening state
   before it could be cancelled. sessionStorage clears when the tab closes,
   which is the right lifetime for "this visit". */
(function () {
  try {
    if (sessionStorage.getItem('bw-entrance-seen')) {
      document.documentElement.classList.add('no-entrance');
    } else {
      sessionStorage.setItem('bw-entrance-seen', '1');
    }
  } catch (e) {}          // private mode / storage off: just play it
})();
</script>
{% endblock %}
{% block content %}

{% if scene_urls %}
  <div class="login-scene" aria-hidden="true"
       data-photos="{{ scene_urls|join:'|' }}"
       data-opening="{{ opening_url }}">
    <div class="login-layer"><div class="login-drift"></div></div>
    <div class="login-layer"><div class="login-drift"></div></div>
    <div class="login-scrim"></div>
  </div>
{% endif %}

<div class="login-card">
  <div class="login-brand">
    {% if brand_logo %}
      <img class="login-mark" src="{% static 'brand/'|add:brand_logo %}" alt="{{ portal_name }}">
    {% else %}
      <span class="login-word">{{ portal_name }}</span>
    {% endif %}
    <span class="login-sub">Owners' portal</span>
  </div>

  <div class="login-body">
   <div class="login-body-inner">
    {% if form.errors %}
      <p class="flash error">{% if lockout_message %}{{ lockout_message }}{% else %}That username and password didn't match. Please try again.{% endif %}</p>
    {% endif %}

    <form method="post" class="stack">
      {% csrf_token %}
      <div class="field">
        <label for="id_username">Username or email</label>
        {{ form.username }}
      </div>
      <div class="field">
        <label for="id_password">Password</label>
        {{ form.password }}
      </div>
      <button type="submit" class="btn">Sign in</button>
      <input type="hidden" name="next" value="{{ next }}">
    </form>

    <p class="auth-foot"><a href="{% url 'password_reset' %}">Reset your password</a></p>
   </div>
  </div>
</div>

{% if scene_urls %}
<script>
/* Two layers, never more. The incoming photograph is DECODED before it is
   shown and only then swept in, so a transition can never race a decode —
   and only two full-size images are ever held in memory, however many
   photographs are in the rotation. Roles live in variables rather than in
   competing classes: the previous version let a leaving slide still be
   marked "leaving" when it was told to arrive, and that class silently
   cancelled the sweep — which is why it worked only about half the time. */
(function () {
  const scene = document.querySelector('.login-scene');
  if (!scene) return;
  const urls = (scene.dataset.photos || '').split('|').filter(Boolean);
  const layers = [...scene.querySelectorAll('.login-layer')];
  if (!urls.length || layers.length < 2) return;

  for (let i = urls.length - 1; i > 0; i--) {          // a different order each visit
    const j = Math.floor(Math.random() * (i + 1));
    [urls[i], urls[j]] = [urls[j], urls[i]];
  }

  /* The server already chose which photograph opens (staff mark the ones that
     make a good first impression) and preloaded it in the head. Honour that
     pick; the rest of the order stays shuffled. */
  const opening = scene.dataset.opening || '';
  const first = urls.indexOf(opening);
  if (first > 0) [urls[0], urls[first]] = [urls[first], urls[0]];

  const paint = (layer, url) => {
    layer.querySelector('.login-drift').style.backgroundImage = 'url("' + url + '")';
  };
  /* Decoding first keeps the first paint smooth, but it must never be
     load-bearing: in a BACKGROUND tab Chrome never settles decode(), which
     left the page with no backdrop at all until the tab was focused. So the
     guard always resolves — but it resolves with WHETHER THE PIXELS ARE
     ACTUALLY THERE, which the caller needs. Sweeping in a photograph that has
     not arrived animates an empty layer and then pops the image in when it
     lands: the same jolt in a different costume, on slow connections. */
  const load = url => new Promise(resolve => {
    let done = false;
    const finish = ok => { if (!done) { done = true; resolve(ok); } };
    const img = new Image();
    img.onload = () => (img.decode ? img.decode().catch(() => {}) : Promise.resolve())
      .then(() => finish(true));
    img.onerror = () => finish(false);
    // Bytes in but decode stalled (the hidden-tab case) still counts as ready.
    setTimeout(() => finish(img.complete && img.naturalWidth > 0), 2500);
    img.src = url;
  });

  let front = layers[0], back = layers[1], at = 0;
  const still = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const root = document.documentElement;

  /* Start a sweep and return how long it lasts. The shine over the logo is
     handed this sweep's OWN delay and duration, read off the animation rather
     than repeated here, so the two can never drift apart — the entrance sweep
     is quicker than a rotation and the shine follows without being told. */
  const sweepIn = (layer, isIntro) => {
    layer.classList.add('is-arriving');
    if (isIntro) layer.classList.add('is-intro');
    const anim = layer.getAnimations().find(a => a.animationName === 'login-sweep');
    const timing = anim && anim.effect.getTiming();
    const delay = timing ? (timing.delay || 0) : 0;
    const duration = timing ? (timing.duration || 0) : 3600;
    root.style.setProperty('--shine-dur', duration + 'ms');
    root.style.setProperty('--shine-delay', delay + 'ms');
    root.classList.remove('is-sweeping');
    void root.offsetWidth;                            // restart, not resume
    root.classList.add('is-sweeping');
    return delay + duration;
  };

  /* The entrance. The brand block is already the same colour as the ground,
     so at this point the visitor sees the logo alone on solid colour; the
     panel opens beneath it in CSS while this sweeps the first photograph in
     behind. Same mechanism as every later transition, just quicker. Timings
     live in the stylesheet, keyed off `--hold`. */
  const intro = load(urls[0]).then(ready => new Promise(done => {
    paint(front, urls[0]);
    // Nothing to sweep if the pixels are not here yet — show it plainly and
    // let the rotation do the sweeping from then on.
    const seen = document.documentElement.classList.contains('no-entrance');
    if (still || !ready || seen) { front.classList.add('is-front'); return done(); }
    const ms = sweepIn(front, true);
    setTimeout(() => {
      front.classList.add('is-front');
      front.classList.remove('is-arriving', 'is-intro');
      done();
    }, ms);
  }));

  if (still) return;
  if (urls.length < 2) return;

  (async function cycle() {
    await intro;                                      // never overlap the entrance
    while (true) {
      await new Promise(r => setTimeout(r, 6000));
      at = (at + 1) % urls.length;
      const url = urls[at];
      if (!await load(url)) continue;                   // never sweep an absent photograph
      paint(back, url);
      await new Promise(r => setTimeout(r, sweepIn(back, false)));
      back.classList.add('is-front');
      back.classList.remove('is-arriving');
      front.classList.remove('is-front');
      [front, back] = [back, front];
    }
  })();
})();
</script>
{% endif %}
{% endblock %}