{% extends "app_base.html" %}

{% block title %}{{ frame.name or "Frame" }} · Whiteboard{% 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>

  {% if frame.mode != 'whiteboard' %}
    <div class="info-box">This frame is currently in <strong>{{ frame.mode|capitalize }}</strong> mode --
      settings below take effect once you switch it to <strong>Whiteboard</strong> mode
      using the selector at the top of the page.</div>
  {% endif %}

  <div class="layout">
    <div class="main-col">
      <section class="card">
        <h2 class="card-title">Whiteboard source</h2>
        <p class="sub">Renders a Nextcloud Whiteboard (or any Excalidraw
          scene) fetched over WebDAV -- credentials set up in
          <a href="/settings">Settings</a>.</p>

        {% if whiteboard_source %}
          <p class="sub" style="margin-top: 10px;">
            Currently showing <strong>{{ whiteboard_source.url }}</strong>
            using <strong>{{ whiteboard_source.display_name }}</strong>'s
            WebDAV account.
            <button type="button" class="btn-inline secondary" id="whiteboard-source-clear">Clear</button>
          </p>
        {% else %}
          <p class="sub" style="margin-top: 10px;">No whiteboard configured yet.</p>
        {% endif %}

        {% if viewer_has_webdav_creds %}
          <form id="whiteboard-source-form" style="margin-top: 16px;">
            <label>{{ "Change to one of your own files" if whiteboard_source else "Use one of your own files" }}
              <input type="text" id="whiteboard-url-input"
                     placeholder="https://cloud.example.com/remote.php/dav/files/you/Boards/family.whiteboard"
                     value="{{ whiteboard_source.url if whiteboard_source and whiteboard_source.user_id == user.id else '' }}">
            </label>
            <p class="sub" style="margin-top: 4px;">The direct WebDAV URL
              to the specific file -- in Nextcloud's Files app, this is
              the file's path under
              <code>remote.php/dav/files/&lt;your-username&gt;/</code>.</p>
            <button type="submit">Save</button>
          </form>
        {% else %}
          <p class="sub" style="margin-top: 10px;">Set up WebDAV credentials
            in <a href="/settings">Settings</a> first to point this frame at
            one of your own files.</p>
        {% endif %}
      </section>
    </div>

    <div class="side-col">
      <section class="card">
        <h2 class="card-title">Preview</h2>
        <p class="sub">How this frame's whiteboard currently renders.</p>
        <img class="preview-img" id="whiteboard-preview" alt="Whiteboard preview">
        <button type="button" class="secondary" id="whiteboard-preview-refresh">Refresh preview</button>
      </section>
    </div>
  </div>

  <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/frame_whiteboard.js"></script>
{% endblock %}