{% from "_macros.html" import icon %}
{#
  The canvas panel: files, open beside the conversation.

  Built the way the terminal panel is -- a child of .shell, `hidden` until a
  toggle removes it, its own drag handle, the shared panel head. Filled the way
  the *inspector* is, though: `hx-trigger="intersect once"`, because a hidden
  element never intersects, so a panel nobody opens costs one element and no
  round trip to somebody's machine. There is nothing heavy to construct here,
  which is the whole reason it does not need the terminal's lazy-build dance.

  Everything shown inside came off somebody else's disk, or out of a model. It
  is rendered through pygments (which escapes), through render_markdown (the one
  path allowed to emit HTML), or into a <textarea>, whose contents Jinja escapes
  and which cannot contain markup by construction.
#}
<aside class="canvas" id="canvas" hidden aria-label="Canvas"
       data-canvas
       data-chat="{{ chat.id if chat else "" }}"
       data-resize-target>
  {# The left edge, dragged. A separator rather than a decoration: it takes
     focus and answers the arrow keys, or the panel is only resizable with a
     mouse and the grip is a focus trap that does nothing. #}
  <div class="panel-resize" data-resize="--canvas-width" data-resize-min="384"
       role="separator" aria-orientation="vertical" tabindex="0"
       aria-label="Resize the canvas">
    {{ icon("grip", "icon--sm") }}
  </div>

  <div class="canvas__inner" id="canvas-inner"
       {# Before a chat exists this fetches nothing until `draft.js` rewrites it,
     which is what "intersect once" gives for free: the panel is hidden until
     it is opened, so the trigger has not fired yet. #}
       hx-get="{{ "/api/chats/" ~ chat.id ~ "/canvas" if chat else "" }}"
       hx-trigger="intersect once"
       hx-target="this" hx-swap="innerHTML">
    <div class="panel-head">
      <h2 class="panel-head__title">
        {{ icon("file-text", "icon--sm") }}
        <span>Canvas</span>
      </h2>
      <button class="btn btn--icon btn--sm" type="button" data-toggle="#canvas"
              aria-label="Close canvas">
        {{ icon("x", "icon--sm") }}
      </button>
    </div>
    <div class="canvas__body">
      <p class="canvas__empty">Opening…</p>
    </div>
  </div>
</aside>