{% from "_macros.html" import icon %}
{#
  The head, the tab strip and whichever file is in front. Everything the panel
  swaps, in one fragment.

  Both together, always: rendering only the body would leave the strip showing a
  tab that is no longer there after a close, and rendering only the strip would
  leave the previous file on screen after a switch.
#}
<div class="panel-head">
  <h2 class="panel-head__title">
    {{ icon("file-text", "icon--sm") }}
    <span>{{ doc.title if doc else "Canvas" }}</span>
    {% if doc and doc.subtitle %}
    <span class="canvas__where" title="{{ doc.subtitle }}">{{ doc.subtitle }}</span>
    {% endif %}
  </h2>

  {% if doc and doc.key.startswith("scratch:") %}
  {# A copy, like every other attach path -- a transcript must not change
     because the pad was edited afterwards. #}
  <button class="btn btn--sm" type="button"
          hx-post="/api/files/from-scratch"
          hx-vals='{"chat_id": "{{ chat.id }}"}'
          hx-target="#attachments" hx-swap="beforeend"
          title="Put this in the message box as an attachment">
    {{ icon("attach", "icon--sm") }} Attach
  </button>
  {% endif %}

  <button class="btn btn--icon btn--sm" type="button" data-toggle="#canvas"
          aria-label="Close canvas">
    {{ icon("x", "icon--sm") }}
  </button>
</div>

{% include "chat/_canvas_tabs.html" %}

{#
  Opening one by hand.

  This was a path box, and it was the one control left in the application that
  asked somebody to remember an absolute path on another machine -- the same
  complaint the folder page's directory field answered with a picker. The model
  opens what it touches, which is still the commonest way a file gets here, but
  "open that other file" should not mean typing it out.

  The dialog itself still takes a typed path, so nothing has been removed: what
  has gone is having to type one when you would rather look.
#}
<div class="canvas__open">
  {% if canvas_agent %}
  {# The profile is what the browse endpoint is hung off, so the button carries
     it. `data-canvas-open` rather than an `hx-` verb because the path is not
     known until the dialog closes -- app.js posts it once it is. #}
  <button class="btn btn--sm" type="button"
          data-canvas-open
          data-profile="{{ agent_profile_id }}"
          data-dir="{{ agent_dir }}"
          data-chat="{{ chat.id }}">
    {{ icon("folder-open", "icon--sm") }} Open a file
  </button>
  {% endif %}

  <button class="btn btn--sm" type="button"
          hx-post="/api/chats/{{ chat.id }}/canvas/tabs"
          hx-vals='{"key": "scratch:{{ chat.id }}"}'
          hx-target="#canvas-inner" hx-swap="innerHTML"
          title="This chat's own working document">
    {{ icon("file-text", "icon--sm") }} Scratch
  </button>
</div>

<div class="canvas__body">
  {% if error %}
  <div class="alert alert--error" role="alert">
    {{ icon("warning", "alert__icon") }} <span>{{ error }}</span>
  </div>
  {% elif conflict %}
    {% include "chat/_canvas_conflict.html" %}
  {% elif doc %}
    {% include "chat/_canvas_doc.html" %}
  {% else %}
  <p class="canvas__empty">
    Nothing open. A file the model reads or writes appears here, and
    {% if canvas_agent %}the @ menu can put one here too.{% else %}notes,
    skills and this chat's own scratch document can be opened from the @ menu.
    {% endif %}
  </p>
  {% endif %}
</div>