{% extends "app_base.html" %}

{% block title %}{{ frame.name or "Frame" }} · Photos{% endblock %}
{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
{% block mode_picker %}{% include "_frame_mode_picker.html" %}{% endblock %}

{% block device_status %}{% include "_device_status_bar.html" %}{% endblock %}
{% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}

{% block content %}
  <div id="control-banner" class="control-banner" style="display: none;">
    <span id="control-holder"></span>
    <button type="button" id="take-control" class="btn-inline">Take control</button>
  </div>

  <div class="layout">
    <div class="main-col">
      <section class="card">
        <h2 class="card-title">Album</h2>
        <form id="photos-form">
          <label>Album
            <select id="album_id">
              {% if frame.album_id %}<option value="{{ frame.album_id }}" selected>(current selection -- Load Albums to change)</option>{% endif %}
            </select>
          </label>
          <label>Upcoming photos to show
            <select id="queue_target_len">
              {% for n in [5, 10, 15, 20, 25, 30, 40, 50] %}
                <option value="{{ n }}" {% if frame.queue_target_len == n %}selected{% endif %}>{{ n }}</option>
              {% endfor %}
            </select>
          </label>
          <label>Order
            <select id="order">
              <option value="sequential" {% if frame.order == "sequential" %}selected{% endif %}>Sequential</option>
              <option value="shuffle" {% if frame.order == "shuffle" %}selected{% endif %}>Shuffle</option>
            </select>
          </label>
          <label>Display mode
            <select id="display_mode">
              {% for mode, label in display_mode_labels.items() %}
                <option value="{{ mode }}" {% if frame.display_mode == mode %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </label>
          <p class="sub" style="margin-top: 8px;">How a photo's aspect ratio
            is reconciled with the panel's: <strong>Crop to fill</strong>
            trims the excess; <strong>Crop to faces</strong> does the same
            but shifts the crop to keep people on screen; <strong>Stretch to
            fill</strong> fills the panel exactly without cropping (photos
            not matching the panel's aspect ratio look stretched);
            <strong>Shrink to fit</strong> shows the whole photo, letterboxed
            if needed.</p>
          <button type="button" class="secondary" id="load-albums">Load Albums</button>
          <button type="submit">Save</button>
        </form>
      </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>
      </section>
    </div>
  </div>

  <section class="card" style="margin-top: 20px;">
    <h2 class="card-title">Upcoming</h2>
    <p class="sub">Drag a photo to reorder (on touch, hold briefly first so a
      normal scroll still works), "Show next" to jump it to the front, or
      the &times; to remove it from rotation entirely.</p>
    <div id="upcoming-grid" class="photo-grid"></div>
  </section>

  <div id="result"></div>
{% endblock %}

{% block scripts %}
  <script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
  <script src="/static/device_status_bar.js"></script>
  <script src="/static/frame_header.js"></script>
  <script src="/static/queue.js"></script>
  <script src="/static/frame_photos.js"></script>
{% endblock %}