{% 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. A path box rather than a file browser: the model opens
  what it touches, which is the path this feature is really for, and a second
  directory browser beside the one the composer already has would be a lot of
  interface for the rarer case. A relative path resolves against the project
  directory, exactly as it does for the model.
#}
<div class="canvas__open">
  {% if canvas_agent %}
  {# Its own form. A second control named `key` in the same one -- the Scratch
     button below -- would send two values for one field, and which of them the
     server took would be an accident. #}
  <form class="canvas__open-form"
        hx-post="/api/chats/{{ chat.id }}/canvas/tabs"
        hx-target="#canvas-inner" hx-swap="innerHTML">
    <input class="input input--mono canvas__path" type="text" name="key"
           placeholder="agent:path/to/file" aria-label="Open a file"
           autocomplete="off" spellcheck="false">
    <button class="btn btn--sm" type="submit">Open</button>
  </form>
  {% 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>