{% from "_macros.html" import icon %}
{#
  One directory on the far side, inside the composer's directory dialog.

  Swapped in whole on every step rather than filtered in the browser: a
  directory listing is a round trip to somebody else's machine, and there is no
  local copy to filter. `here` is what the Use button submits, so it is carried
  on the container rather than recomputed from whatever row was last clicked.

  Everything here is a name from a remote filesystem, so everything is escaped
  by Jinja's autoescaping and none of it is ever marked safe.
#}
<div id="dir-results" data-here="{{ here }}">
  <p class="dialog__where">
    {{ icon("folder-open", "icon--sm") }}
    <span class="mono">{{ here }}</span>
  </p>

  {% if error %}
  <div class="alert alert--danger">{{ error }}</div>
  {% else %}
  <ul class="picker__list">
    {% if parent %}
    <li>
      <button class="picker__option" type="button" data-dir-open="{{ parent }}">
        {{ icon("chevron-left", "icon--sm") }}
        <span class="picker__option-body">
          <span class="picker__option-name">Up a level</span>
          <span class="picker__option-note mono">{{ parent }}</span>
        </span>
      </button>
    </li>
    {% endif %}

    {% for entry in entries %}
    {# In directory mode files are listed but not selectable: hiding them would
       make a directory of only files look empty, which is worse than showing
       what is there and not letting it be chosen. In file mode they are the
       point, and it is the *directory* that stays a step rather than a choice.
       One fragment for both, because a second copy of this listing is a second
       place for the path arithmetic below to be got subtly differently. #}
    <li>
      {% if entry.is_dir %}
      <button class="picker__option" type="button"
              data-dir-open="{{ (here.rstrip('/') ~ '/' ~ entry.name) if here != '/' else '/' ~ entry.name }}">
        {{ icon("folder", "icon--sm") }}
        <span class="picker__option-body">
          <span class="picker__option-name">{{ entry.name }}</span>
        </span>
        {{ icon("chevron-right", "icon--sm") }}
      </button>
      {% elif pick == "file" %}
      <button class="picker__option" type="button"
              data-file-open="{{ (here.rstrip('/') ~ '/' ~ entry.name) if here != '/' else '/' ~ entry.name }}">
        {{ icon("file-text", "icon--sm") }}
        <span class="picker__option-body">
          <span class="picker__option-name">{{ entry.name }}</span>
        </span>
      </button>
      {% else %}
      <span class="picker__option is-inert">
        {{ icon("file-text", "icon--sm") }}
        <span class="picker__option-body">
          <span class="picker__option-name">{{ entry.name }}</span>
        </span>
      </span>
      {% endif %}
    </li>
    {% endfor %}

    {% if not entries %}
    <li>
      <p class="muted text-sm" style="padding: var(--sp-3)">
        Nothing here.
      </p>
    </li>
    {% endif %}
  </ul>
  {% endif %}
</div>