<h2 class="dialog-title">Whiteboard widget (alpha)</h2>

<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>

  <div id="whiteboard-current-source">
    {% 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 %}
  </div>

  {% if viewer_has_webdav_creds %}
    <form id="whiteboard-source-form" style="margin-top: 16px;">
      <label><span id="whiteboard-source-form-label">{{ "Change to one of your own files" if whiteboard_source else "Use one of your own files" }}</span>
        <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>.
        <button type="button" class="btn-inline secondary" id="whiteboard-browse-toggle">Browse...</button></p>

      <div id="whiteboard-browser" style="display: none; margin-top: 8px; border: 1px solid var(--border-color, #ccc); border-radius: 6px; padding: 8px;">
        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
          <button type="button" class="btn-inline secondary" id="whiteboard-browse-up" disabled>Up</button>
          <span class="sub" id="whiteboard-browse-current" style="word-break: break-all;"></span>
        </div>
        <ul id="whiteboard-browse-list" style="list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto;"></ul>
        <p class="sub" id="whiteboard-browse-error" style="display: none; color: var(--error-color, #c00);"></p>
      </div>

      <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 widget at
      one of your own files.</p>
  {% endif %}
</section>

<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Preview</h2>
  <p class="sub">How this widget currently renders.</p>
  <img class="preview-img" id="whiteboard-preview" alt="Whiteboard preview">
  <button type="button" class="secondary" id="whiteboard-preview-refresh">Refresh now</button>
</section>
