{% from "player/_icons.html" import delete_icon, play_icon, queue_add_icon, search_icon, star_icon %}

<div class="view-page" data-page="{{ page_key }}">
  <header class="view-header">
    {% include "player/_page_title.html" %}

    {% if show_filter_form %}
      <form id="filters" class="filters" action="{{ filter_action_url }}" method="get" data-filter-form
        data-default-sort="{{ sort_options[0][0] }}">
        <input type="hidden" name="per_page" value="{% if query.per_page != default_per_page %}{{ query.per_page }}{% endif %}">
        {% for artist in query.artists %}
          <input type="hidden" name="artist" value="{{ artist }}">
        {% endfor %}
        <div class="search-controls">
          {% if show_filter_controls %}
          <details class="filter-menu" data-dropdown-menu>
            <summary data-filter-summary="genres" data-summary-label="Genres">Genres{% if selected_genre_filter_count %}: {{ selected_genre_filter_count_label }}{% endif %}</summary>
            <div class="filter-options">
              {% for group in filters.genre_groups %}
                {% set group_index = loop.index0 %}
                <div class="filter-group">
                  <label class="filter-option filter-option-parent">
                    <input type="hidden" name="genre[{{ group_index }}][p]" value="{{ group.genre }}" data-genre-parent-param {% if group.genre not in selected_genres %}disabled{% endif %}>
                    <input type="checkbox" value="{{ group.genre }}" data-genre-parent-control {% if (group.styles and group.genre in checked_genres) or (not group.styles and group.genre in selected_genres) %}checked{% endif %}>
                    <span>{{ group.genre }}</span>
                  </label>
                  {% for style in group.styles %}
                    <label class="filter-option filter-option-child">
                      <input type="checkbox" name="genre[{{ group_index }}][c][]" value="{{ style }}" data-genre-child-control {% if style in selected_styles %}checked{% endif %}>
                      <span>{{ style }}</span>
                    </label>
                  {% endfor %}
                </div>
              {% else %}
                <div class="empty-small">No genres found.</div>
              {% endfor %}
            </div>
          </details>
          {% endif %}
          <details class="filter-menu search-menu" data-dropdown-menu data-search-menu>
            <summary data-filter-summary="search" data-summary-label="Search"
              title="{% if query.search %}Search: {{ query.search }}{% else %}Search{% endif %}">
              <span class="search-menu-label">Search{% if query.search %}:{% endif %}</span>
              {% if query.search %}
                <span class="search-menu-value">{{ query.search }}</span>
              {% endif %}
            </summary>
            <div class="filter-options search-options">
              <div class="search-submit-group">
                <label class="search-field">
                  <span class="visually-hidden">Search</span>
                  <input type="search" name="search" value="{{ query.search or '' }}"
                    placeholder="{{ search_placeholder }}" autocomplete="off" spellcheck="false"
                    data-initial-focus>
                </label>
                <button class="search-button" type="submit" aria-label="Search" title="Search">
                  {{ search_icon("search-submit-icon") }}
                </button>
              </div>
            </div>
          </details>
          {% if show_sort_controls %}
          {% set selected_sort = namespace(label=sort_options[0][1]) %}
          {% for value, label in sort_options %}
            {% if query.sort == value %}
              {% set selected_sort.label = label %}
            {% endif %}
          {% endfor %}
          <details class="filter-menu sort-menu" data-dropdown-menu>
            <summary data-filter-summary="sort" data-summary-label="Sort"
              title="Sort: {{ selected_sort.label }}">
              <span class="sort-menu-label">Sort:</span>
              <span class="sort-menu-value">{{ selected_sort.label }}</span>
            </summary>
            <div class="filter-options sort-options">
              {% for value, label in sort_options %}
                <label class="filter-option">
                  <input type="radio" name="sort" value="{{ value }}" {% if query.sort == value %}checked{% endif %}>
                  <span>{{ label }}</span>
                </label>
              {% endfor %}
            </div>
          </details>
          {% endif %}
          <a class="button-link clear-filter-button" href="{{ clear_url }}" data-nav aria-label="Clear" title="Clear">
            {{ delete_icon("clear-icon") }}<span class="visually-hidden">Clear</span>
          </a>
        </div>
      </form>
    {% endif %}
  </header>

  <div data-library-results>
    {% if albums %}
      <div class="album-grid">
        {% for album in albums %}
          <div class="album-card{% if album.is_playlist %} playlist-card{% endif %}" data-album-playback-source
            {% if album.is_playlist and album.playlist_id is not none %}data-playlist-id="{{ album.playlist_id }}"{% else %}data-album-id="{{ album.album_id }}"{% endif %}>
            <div class="album-cover-wrap">
              <a class="album-card-cover" href="{{ album|album_url }}" data-nav data-album-nav>
                {% set art_url = album|album_art_url %}
                {% if art_url %}
                  <img class="album-cover{% if album.is_playlist %} playlist-cover-image{% endif %}" src="{{ art_url }}" alt="" loading="lazy">
                {% else %}
                  <span class="album-cover-placeholder" aria-hidden="true"></span>
                {% endif %}
              </a>
              {% if album.track_count %}
                <div class="album-cover-actions">
                  <button class="album-cover-action play-icon-button" type="button" data-play-album
                    aria-label="Play {{ album.artist }} - {{ album.album|display_album_title }}"
                    title="Play">{{ play_icon() }}</button>
                  <button class="album-cover-action queue-icon-button" type="button" data-queue-album data-queue-append
                    aria-label="Add {{ album.artist }} - {{ album.album|display_album_title }} to the queue"
                    title="Add to queue">{{ queue_add_icon() }}</button>
                </div>
              {% endif %}
            </div>
            <span class="album-copy">
              <span class="album-title-line">
                <a class="album-card-link" href="{{ album|album_url }}" data-nav data-album-nav
                  aria-label="{{ album.album|display_album_title }} by {{ album.artist }}">
                  <span class="album-name" title="{{ album.album|display_album_title }}">{{ album.album|display_album_title }}</span>
                </a>
                {% if not album.is_playlist %}
                  <button class="album-star-toggle{% if album.starred_at %} starred{% endif %}" type="button"
                    data-album-star-toggle data-album-id="{{ album.album_id }}"
                    data-album-title="{{ album.album|display_album_title }}"
                    aria-pressed="{{ 'true' if album.starred_at else 'false' }}"
                    aria-label="{{ 'Unstar' if album.starred_at else 'Star' }} {{ album.album|display_album_title }}"
                    title="{{ 'Unstar album' if album.starred_at else 'Star album' }}">
                    {{ star_icon(filled=album.starred_at) }}
                  </button>
                {% endif %}
              </span>
              {% set artist_links = album|album_artist_links(query) %}
              {% if artist_links %}
                <span class="album-artist" title="{{ album.artist }}">
                  {%- for item in artist_links -%}
                    <a class="album-artist-link" href="{{ item.url }}" data-nav>{{ item.label }}</a>{% if not loop.last %}, {% endif %}
                  {%- endfor -%}
                </span>
              {% else %}
                <span class="album-artist" title="{{ album.artist }}">{% if album.is_playlist %}Playlist{% else %}{{ album.artist }}{% endif %}</span>
              {% endif %}
            </span>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="empty">{{ empty_message }}</div>
    {% endif %}
  </div>

  {% if show_pagination_controls %}
  <nav class="pagination" aria-label="{{ pagination_label }}">
    <a class="button-link{% if not previous_url %} disabled{% endif %}"
      {% if previous_url %}href="{{ previous_url }}"{% endif %}
      data-nav data-pagination-previous
      {% if not previous_url %}aria-disabled="true" tabindex="-1"{% endif %}>Previous</a>
    <a class="button-link{% if not next_url %} disabled{% endif %}"
      {% if next_url %}href="{{ next_url }}"{% endif %}
      data-nav data-pagination-next
      {% if not next_url %}aria-disabled="true" tabindex="-1"{% endif %}>Next</a>
  </nav>
  {% endif %}
</div>