{% extends "base.html" %}

{% block subtitle %}
<p class="sub">{{ frame.name or "Frame" }} &mdash; quick controls</p>
{% endblock %}

{% block content %}
  <div class="layout">
    <div class="main-col">
      <section class="card">
        <h2 class="card-title">Up next</h2>
        <p class="sub">Tap "Show next" to move a photo to the front. The frame
          picks it up on its next refresh. <a href="/login">Log in</a> for full
          settings.</p>
        <div id="upcoming-grid" class="photo-grid"></div>
      </section>
    </div>
    <div class="side-col">
      <section class="card">
        <h2 class="card-title">Now displaying</h2>
        <div id="current-thumb"><p class="sub">Loading...</p></div>
        <div style="display: flex; gap: 8px;">
          <button type="button" class="secondary" id="btn-back">&larr; Previous</button>
          <button type="button" class="secondary" id="btn-advance">Next &rarr;</button>
        </div>
        <p class="sub" style="margin-top: 8px;">Changes what the frame shows on
          its next wake.</p>
      </section>
    </div>
  </div>
  <div id="result"></div>
{% endblock %}

{% block scripts %}
  <script>
    const TOKEN = {{ manage_token | tojson }};
    const resultEl = document.getElementById('result');

    function showStatus(ok, message) {
      resultEl.innerHTML = `<div class="status ${ok ? 'ok' : 'err'}">${message}</div>`;
    }

    async function post(path, body) {
      const resp = await fetch(`/api/m/${TOKEN}/${path}`, {
        method: 'POST',
        headers: body ? { 'Content-Type': 'application/json' } : {},
        body: body ? JSON.stringify(body) : undefined,
      });
      if (!resp.ok) {
        throw new Error(await resp.text());
      }
    }

    async function loadQueue() {
      const currentEl = document.getElementById('current-thumb');
      const grid = document.getElementById('upcoming-grid');
      try {
        const resp = await fetch(`/api/m/${TOKEN}/queue`);
        if (!resp.ok) {
          currentEl.innerHTML = '<p class="sub">This frame isn\'t set up yet.</p>';
          return;
        }
        const data = await resp.json();
        currentEl.innerHTML = '';
        if (data.current) {
          const img = document.createElement('img');
          img.className = 'thumb';
          img.src = data.current.thumbnail_url;
          img.alt = '';
          currentEl.appendChild(img);
        } else {
          currentEl.innerHTML = '<p class="sub">Nothing displayed yet.</p>';
        }
        grid.innerHTML = '';
        for (const item of data.upcoming) {
          const card = document.createElement('div');
          card.className = 'photo-card';
          const img = document.createElement('img');
          img.src = item.thumbnail_url;
          img.alt = '';
          img.draggable = false;
          card.appendChild(img);
          const btn = document.createElement('button');
          btn.type = 'button';
          btn.className = 'show-next';
          btn.textContent = 'Show next';
          btn.addEventListener('click', async () => {
            try {
              await post('promote', { asset_id: item.id });
              showStatus(true, 'Moved to the front.');
              loadQueue();
            } catch (e) {
              showStatus(false, e.message);
            }
          });
          card.appendChild(btn);
          grid.appendChild(card);
        }
      } catch (e) {
        currentEl.innerHTML = '<p class="sub">Could not load.</p>';
      }
    }

    document.getElementById('btn-advance').addEventListener('click', async () => {
      try { await post('advance'); showStatus(true, 'Advanced.'); loadQueue(); }
      catch (e) { showStatus(false, e.message); }
    });
    document.getElementById('btn-back').addEventListener('click', async () => {
      try { await post('back'); showStatus(true, 'Went back.'); loadQueue(); }
      catch (e) { showStatus(false, e.message); }
    });

    loadQueue();
    setInterval(loadQueue, 15000);
  </script>
{% endblock %}