{% from "_macros.html" import icon %}
{#
  What `@` offers: a page to read, and what is already in this chat. A device
  chat's files are the other source, asked of the device by the composer
  beside this. Swapped in whole on every keystroke.

  Every name here came off somebody's filesystem, so all of it is escaped by
  autoescaping and none of it is marked safe.
#}
<div id="mention-results">
  {% if not attachments and not website and not tree_files %}
  <p class="muted text-sm u-pad-3">
    {% if q %}
      {{ t("Nothing matches “%(q)s”.", q=q) }}
    {% else %}
      {{ t("Nothing to mention yet.") }}
    {% endif %}
  </p>
  {% else %}

  {% if website %}
  <p class="picker__group">{{ t("A page to read") }}</p>
  <ul class="picker__list">
    <li>
      <button class="picker__option" type="button"
              data-mention-url="{{ website }}" data-mention-token="{{ website }}">
        {{ icon("link", "icon--sm") }}
        <span class="picker__option-body">
          <span class="picker__option-name">{{ t("Fetch this page") }}</span>
          <span class="picker__option-note mono">{{ website }}</span>
        </span>
      </button>
    </li>
  </ul>
  {% endif %}

  {#- Files in the tree the chat can read: the path goes into the message,
      and the model reads the file itself. -#}
  {% if tree_files %}
  <p class="picker__group">{{ t("Files") }}</p>
  <ul class="picker__list">
    {% for node in tree_files %}
    <li>
      <button class="picker__option" type="button" data-testid="mention-tree"
              data-mention-tree data-mention-token="{{ node.path }}">
        {{ icon("file-text", "icon--sm") }}
        <span class="picker__option-body">
          <span class="picker__option-name">{{ node.name }}</span>
          <span class="picker__option-note mono">{{ node.path }}</span>
        </span>
      </button>
    </li>
    {% endfor %}
  </ul>
  {% endif %}

  {% if attachments %}
  <p class="picker__group">{{ t("Already in this chat") }}</p>
  <ul class="picker__list">
    {% for attachment in attachments %}
    <li>
      <button class="picker__option" type="button"
              data-mention-attachment="{{ attachment.id }}"
              data-mention-token="{{ attachment.filename }}">
        {{ icon("attach", "icon--sm") }}
        <span class="picker__option-body">
          <span class="picker__option-name">{{ attachment.filename }}</span>
          <span class="picker__option-note">{{ attachment.human_size }}</span>
        </span>
      </button>
    </li>
    {% endfor %}
  </ul>
  {% endif %}

  {% endif %}
</div>