empede/templates/browser.html

56 lines
1.6 KiB
HTML

{# #}
<ul class="breadcrumb">
<li>
<a
href="/?path="
hx-replace-url="/?path="
hx-get="/browser?path="
hx-target=".browser"
>Root</a>
</li>
{% for (i, component) in path.iter().enumerate() %}
<li>
{% if i == path.len() - 1 %}
{{ component }}
{% else %}
<a
href="/?path={{ path[..i + 1].join("/") }}"
hx-replace-url="/?path={{ path[..i + 1].join("/") }}"
hx-get="/browser?path={{ path[..i + 1].join("/") }}" hx-target=".browser"
>{{ component }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
<ul class="dir" hx-boost="true">
{% for entry in entries %}
{% match entry %}
{% when mpd::Entry::Song with { name, path, artist } %}
<li hx-post="/queue?path={{path}}" hx-swap="none" role="button">
<span class="material-symbols-outlined">music_note</span>
<!-- img src="/art?path={{path}}" -->
<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?path={{ path }}"
hx-replace-url="/?path={{ path }}"
hx-target=".browser"
>
<span class="material-symbols-outlined">folder</span>
<div class="song__name">{{ name }}</div>
</li>
{% when mpd::Entry::Playlist with { name, path } %}
<li hx-post="/queue?path={{path}}" hx-swap="none" role="button" >
<span class="material-symbols-outlined">playlist_play</span>
<div class="song">
<div class="song__name">{{ name }}</div>
</a>
</li>
{% endmatch %}
{% endfor %}
</ul>