{{ define "templates" }}
  <template id="tpl-user-message">
    <div class="message message--user">
      <div class="message__body">
        <div class="message__content"></div>
        <div class="message__actions">
          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#user"></use></svg>
          <div class="message__actions-buttons">
            <button
              type="button"
              class="message__action-btn message__action-btn--delete"
              data-action="delete"
              aria-label="Delete message"
            >
              <svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="inspect"
              aria-label="Show details"
              aria-expanded="false"
            >
              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="copy"
              aria-label="Copy to clipboard"
            >
              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
            </button>
          </div>
        </div>
        <div class="message__debug">
          <dl class="message__debug-list"></dl>
        </div>
      </div>
    </div>
  </template>

  <template id="tpl-assistant-message">
    <div class="message message--assistant">
      <div class="message__body">
        <div class="message__content"></div>
        <div class="message__actions">
          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
          <div class="message__actions-buttons">
            <button
              type="button"
              class="message__action-btn message__action-btn--play"
              data-action="play"
              aria-label="Play"
            >
              <svg class="icon"><use href="/static/icons.svg#volume"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn message__action-btn--delete"
              data-action="delete"
              aria-label="Delete message"
            >
              <svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="inspect"
              aria-label="Show details"
              aria-expanded="false"
            >
              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="copy"
              aria-label="Copy to clipboard"
            >
              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
            </button>
          </div>
        </div>
        <div class="message__debug">
          <dl class="message__debug-list"></dl>
        </div>
      </div>
    </div>
  </template>

  <template id="tpl-error-message">
    <div class="message message--error message--assistant">
      <div class="message__body">
        <div class="message__content"></div>
        <div class="message__actions">
          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
        </div>
      </div>
    </div>
  </template>

  <template id="tpl-collapsible">
    <details class="collapsible">
      <summary class="collapsible__summary">
        <span class="collapsible__label"></span>
      </summary>
      <div class="collapsible__content">
        <pre></pre>
      </div>
    </details>
  </template>

  <template id="tpl-tool-call">
    <details class="collapsible collapsible--tool">
      <summary class="collapsible__summary">
        <svg class="icon"><use href="/static/icons.svg#tool"></use></svg>
        <span class="collapsible__label"></span>
      </summary>
      <div class="collapsible__content">
        <div class="collapsible__section">
          <div class="collapsible__section-label">Arguments</div>
          <pre class="collapsible__pre" data-args></pre>
        </div>
        <div class="collapsible__section collapsible__section--output" hidden>
          <div class="collapsible__section-label">Output</div>
          <pre class="collapsible__pre" data-output></pre>
        </div>
      </div>
    </details>
  </template>

  <template id="tpl-attachment-chip">
    <div class="compose__attachment">
      <span class="compose__attachment-name"></span>
      <button
        type="button"
        class="compose__attachment-remove"
        aria-label="Remove attachment"
      >
        <svg class="icon"><use href="/static/icons.svg#x-circle"></use></svg>
      </button>
    </div>
  </template>

  <template id="tpl-debug-row">
    <dt></dt>
    <dd></dd>
  </template>
{{ end }}
