{% extends "app_base.html" %}

{% block title %}{{ frame.name or "Frame" }} · Layout{% endblock %}
{% block page_title %}{% include "_frame_name_edit.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">
        <div class="card-title-row">
          <h2 class="card-title">Widgets</h2>
          <button type="button" id="clear-all-widgets" class="secondary btn-inline">Clear all</button>
        </div>
        <p class="sub">Drag a widget to move it, drag its bottom-right corner
          to resize it -- like arranging widgets on a phone's home screen.
          Widgets can't overlap. Click a widget's gear icon for its own
          settings (which album, which calendars, etc.).</p>
        <div id="widget-canvas-wrap">
          <div id="widget-canvas"></div>
        </div>
        <p class="sub" id="widget-canvas-empty-hint" style="display: none; margin-top: 10px;">
          Nothing placed yet -- add a widget below.</p>
      </section>

      <section class="card" style="margin-top: 20px;">
        <h2 class="card-title">Add a widget</h2>
        <div id="add-widget-buttons" class="checkbox-row" style="gap: 10px; flex-wrap: wrap;"></div>
        <p class="sub" id="add-widget-hint" style="margin-top: 8px;"></p>
      </section>

      <section class="card" style="margin-top: 20px;">
        <h2 class="card-title">Saved layouts</h2>
        <p class="sub">Save this whole arrangement -- widgets, their settings, and button
          assignments -- under a name, then switch back to it any time. Saved layouts are
          yours across every frame you control with a matching orientation, not just this one.</p>
        <div class="saved-layout-add">
          <input type="text" id="saved-layout-name" placeholder="Layout name" maxlength="60">
          <button type="button" id="save-layout-btn" class="secondary">Save current as...</button>
        </div>
        <ul class="saved-layout-list" id="saved-layout-list" style="margin-top: 14px;"></ul>
        <p class="sub" id="saved-layout-empty-hint" style="margin-top: 10px;">No saved layouts yet.</p>
      </section>
    </div>
  </div>

  <dialog id="widget-dialog">
    <button type="button" id="widget-dialog-close" class="icon-btn" aria-label="Close" title="Close">&times;</button>
    <div id="widget-dialog-body"><p class="sub">Loading...</p></div>
    <div class="dialog-result"></div>
  </dialog>

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

{% block scripts %}
  <script>
    window.FRAME_BASE_API = window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};
    window.FRAME_ID = {{ frame.id | tojson }};
  </script>
  <script src="/static/device_status_bar.js"></script>
  <script src="/static/frame_header.js"></script>
  <script src="/static/widget_dialog_photos.js"></script>
  <script src="/static/queue.js"></script>
  <script src="/static/widget_dialog_calendar.js"></script>
  <script src="/static/widget_dialog_whiteboard.js"></script>
  <script src="/static/widget_dialog_tasks.js"></script>
  <script src="/static/widget_dialog_static.js"></script>
  <script src="/static/widget_dialog_text.js"></script>
  <script src="/static/widget_dialog_weather.js"></script>
  <script src="/static/widget_dialog_battery.js"></script>
  <script src="/static/widget_dialog_border.js"></script>
  <script src="/static/widget_dialog_font_scale.js"></script>
  <script src="/static/widget_dialog_button_actions.js"></script>
  <script src="/static/frame_layout.js"></script>
  <script src="/static/saved_layouts.js"></script>
{% endblock %}