{# #}
<div class="header">
  <ul class="breadcrumb">
    <li>
      <a
        href="/" 
        hx-replace-url="/" 
        hx-get="/browser" 
        hx-vals='{"path": ""}'
        hx-target=".browser"
      >Root</a>
    </li>
    {% for (i, component) in path.iter().enumerate() %}
    <li>
      {% if i == path.len() - 1 %}
      {{ component }}
      {% else %}
      <a
        {% let encoded = path[..i + 1].join("/")|urlencode %}
        href="/?path={{ encoded }}" 
        hx-replace-url="/?path={{ encoded }}" 
        hx-get="/browser"
        hx-vals='{"path": "{{ encoded }}"}'
        hx-target=".browser"
      >{{ component }}</a>
      {% endif %}
    </li>
    {% endfor %}
  </ul>

  <div class="buttons">
    {% let encoded = path.join("/")|urlencode %}
    <button hx-delete="/queue" hx-swap="none" hx-post="/queue?path={{ encoded }}">
      <span class="material-symbols-outlined">playlist_add</span>
      Queue all
    </button>
    <button hx-delete="/queue" hx-swap="none" hx-post="/queue?path={{ encoded }}&replace=true&play=true">
      <span class="material-symbols-outlined">playlist_play</span>
      Play all
    </button>
    <button hx-delete="/queue" hx-swap="none" hx-post="/queue?path={{ encoded }}&next=true">
      <span class="material-symbols-outlined">playlist_add</span>
      Play next
    </button>
  </div>
</div>

<ul class="dir" hx-boost="true" tabindex="-1">
  {% for entry in entries %}
  {% match entry %}
  {% when mpd::Entry::Song with { name, path, artist } %}
  <li 
    hx-post="/queue?path={{ path|urlencode }}"
    hx-trigger="click,keyup[key=='Enter']"
    hx-swap="none" 
    role="button"
    tabindex="0"
  >
    <span class="material-symbols-outlined" title="Song">music_note</span>
    <div class="albumart">
      <img src="/art?path={{ path|urlencode }}" onerror="this.style.visibility = 'hidden'">
    </div>
    <div class="song">
      <div class="song__name">{{ name }}</div>
      <div class="song__artist">{{ artist }}</div>
    </a>
  </li>
  {% when mpd::Entry::Directory with { name, path } %}
  <li
    hx-get="/browser"
    hx-vals='{"path": "{{ path|urlencode }}"}'
    hx-replace-url="/?path={{ path|urlencode }}"
    hx-target=".browser"
    role="link"
  >
    <span class="material-symbols-outlined" title="Directory">folder</span>
    <div class="song__name">
      <a href="/?path={{ path|urlencode }}" hx-get="/browser" hx-sync="closest li:abort">
        {{ name }}
      </a>
    </div>
  </li>
  {% when mpd::Entry::Playlist with { name, path } %}
  <li hx-post="/queue?path={{ path|urlencode }}" hx-swap="none" role="button" >
    <span class="material-symbols-outlined" title="Playlist">playlist_play</span>
    <div class="song">
      <div class="song__name">{{ name }}</div>
    </a>
  </li>
  {% endmatch %}
  {% endfor %}
</ul>