{% from "player/_album_action_menu.html" import album_action_menu, recommendation_mode_submenu %}
{% from "player/_icons.html" import delete_icon, play_icon, search_icon, star_icon, vertical_ellipsis_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="size" value="{% if query.size != default_size %}{{ query.size }}{% endif %}">
        {% for artist in query.artists %}
          <input type="hidden" name="artist" value="{{ artist }}">
        {% endfor %}
        <div class="search-controls">
          {% if query.artists %}
          {% set artist_filter_label = query.artists|join(', ') %}
          <div class="readonly-filter artist-filter-readonly" data-readonly-artist-filter
            title="Artist: {{ artist_filter_label }}"
            aria-label="Artist filter: {{ artist_filter_label }}">
            <span class="readonly-filter-label">Artist:</span>
            <span class="readonly-filter-value">{{ artist_filter_label }}</span>
          </div>
          {% endif %}
          {% 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 %}
          {% if (artist_radio_url is defined and artist_radio_url) or (bulk_album_star_action_url is defined and bulk_album_star_action_url) or (bulk_metadata_edit_page_url is defined and bulk_metadata_edit_page_url) %}
            <details class="filter-menu bulk-actions-menu" data-dropdown-menu>
              <summary aria-label="Album actions" title="Album actions">
                {{ vertical_ellipsis_icon() }}
              </summary>
              <div class="filter-options bulk-action-options">
                {% if artist_radio_url is defined and artist_radio_url %}
                  {{ recommendation_mode_submenu("Artist Radio", artist_radio_url) }}
                {% endif %}
                {% if artist_radio_url is defined and artist_radio_url and ((bulk_album_star_action_url is defined and bulk_album_star_action_url) or (bulk_metadata_edit_page_url is defined and bulk_metadata_edit_page_url)) %}
                  <hr class="page-menu-divider">
                {% endif %}
                {% if bulk_album_star_action_url is defined and bulk_album_star_action_url %}
                  <button class="page-menu-link page-menu-button" type="button"
                    data-bulk-album-star data-starred="true"
                    data-action-url="{{ bulk_album_star_action_url }}"
                    data-confirm-title="Star Filtered Albums"
                    data-confirm-message="Star every album in the current album view across every page? Already starred albums keep their original favorite dates."
                    data-confirm-label="Star">Star all filtered</button>
                  <button class="page-menu-link page-menu-button" type="button"
                    data-bulk-album-star data-starred="false"
                    data-action-url="{{ bulk_album_star_action_url }}"
                    data-confirm-title="Unstar Filtered Albums"
                    data-confirm-message="Unstar every album in the current album view across every page?"
                    data-confirm-label="Unstar">Unstar all filtered</button>
                {% endif %}
                {% if bulk_album_star_action_url is defined and bulk_album_star_action_url and bulk_metadata_edit_page_url is defined and bulk_metadata_edit_page_url %}
                  <hr class="page-menu-divider">
                {% endif %}
                {% if bulk_metadata_edit_page_url is defined and bulk_metadata_edit_page_url %}
                  <a class="page-menu-link" href="{{ bulk_metadata_edit_page_url }}"
                    data-bulk-metadata-edit-link data-nav>Edit Metadata URLs</a>
                {% endif %}
              </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>

  {% if show_playlist_create_controls %}
    <section class="settings-panel playlist-create-panel">
      <div class="playlist-create-methods">
        <form class="playlist-create-form playlist-create-form-manual" action="{{ playlist_create_action_url }}" method="post" autocomplete="off" data-playlist-create-form>
          <div class="playlist-create-heading">
            <div class="playlist-create-title-group">
              <h2>New Playlist</h2>
              <div class="playlist-create-meta">Manual</div>
            </div>
          </div>
          <div class="playlist-create-controls">
            <label class="playlist-create-field">
              <span class="visually-hidden">Playlist name</span>
              <input class="settings-input" type="text" name="name" placeholder="Playlist name" data-playlist-name-input>
            </label>
            <button class="primary playlist-create-submit" type="submit" data-create-playlist>
              <span>Create</span>
            </button>
          </div>
          <div class="settings-status" data-playlist-create-status aria-live="polite"></div>
        </form>
        <form class="playlist-create-form playlist-create-form-import" action="{{ playlist_import_action_url }}" method="post" enctype="multipart/form-data" autocomplete="off" data-playlist-import-form>
          <div class="playlist-create-heading">
            <div class="playlist-create-title-group">
              <h2>Import Playlist</h2>
              <div class="playlist-create-meta">PLS / M3U / M3U8</div>
            </div>
          </div>
          <div class="playlist-import-controls">
            <input class="playlist-file-input" type="file" name="playlist" accept=".m3u,.m3u8,.pls" data-playlist-file-input>
            <label class="playlist-create-field">
              <span class="visually-hidden">Imported playlist name</span>
              <input class="settings-input" type="text" name="name" placeholder="Override name">
            </label>
            <button class="playlist-create-submit playlist-import-submit" type="submit" data-import-playlist>
              <span>Import</span>
            </button>
          </div>
          <div class="settings-status" data-playlist-import-status aria-live="polite"></div>
        </form>
      </div>
    </section>
  {% endif %}

  <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>
                  {{ album_action_menu(album.artist ~ " - " ~ (album.album|display_album_title), album|album_radio_url) }}
                </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>