{% from "player/_album_action_menu.html" import album_action_menu %}
{% from "player/_icons.html" import pause_icon, play_icon, search_icon %}

<div class="view-page home-page" data-page="{{ page_key }}">
  <header class="view-header home-header">
    {% include "player/_page_title.html" %}
    <form class="home-search-form" action="/search" method="get" data-search-form>
      <div class="search-submit-group">
        <label class="search-field">
          <span class="visually-hidden">Search</span>
          <input type="search" name="query" value="" placeholder="Search library"
            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>
    </form>
  </header>

  {% if continue_listening %}
    {% set feature = continue_listening.album %}
    <section class="home-feature" aria-labelledby="continue-listening-title">
      <div class="home-feature-heading">
        <h2 id="continue-listening-title">Continue Listening</h2>
        <a href="/queue" data-nav>Queue</a>
      </div>
      <div class="home-feature-cover-wrap" data-album-playback-source data-album-id="{{ feature.album_id }}">
        {% set art_url = feature|album_art_url %}
        {% if art_url %}
          <img class="home-feature-cover" src="{{ art_url }}" alt="" loading="lazy">
        {% else %}
          <span class="home-feature-cover album-cover-placeholder" aria-hidden="true"></span>
        {% endif %}
        <button class="home-feature-play-toggle" type="button" data-continue-play-toggle
          aria-label="Play current queue" aria-pressed="false" title="Play">
          <span class="play-toggle-icon home-feature-play-state-icon" data-play-icon>
            {{ play_icon("home-feature-play-icon") }}
          </span>
          <span class="play-toggle-icon home-feature-play-state-icon" data-pause-icon hidden>
            {{ pause_icon("home-feature-pause-icon") }}
          </span>
        </button>
      </div>
      <div class="home-feature-copy">
        {% if continue_listening.track_title %}
          <div class="home-kicker">{{ continue_listening.track_title }}</div>
        {% endif %}
        <h3><a href="{{ feature|album_url }}" data-nav>{{ feature.album|display_album_title }}</a></h3>
        <div class="home-feature-meta">
          {{ feature.artist }}
          <span>Now playing</span>
        </div>
      </div>
    </section>
  {% endif %}

  {% if home_radio_choices %}
    <section class="home-section home-radio-section" aria-labelledby="home-radio-title">
      <div class="home-section-heading">
        <h2 id="home-radio-title">What do you want to listen to?</h2>
      </div>
      <div class="home-radio-grid">
        {% for item in home_radio_choices %}
          <details class="filter-menu home-radio-menu" data-dropdown-menu>
            <summary class="button-link home-radio-button">{{ item.label }}</summary>
            <div class="filter-options home-radio-options">
              {% for mode_item in recommendation_mode_menu_items(item.url, item.modes) %}
                <button class="page-menu-link page-menu-button" type="button"
                  data-generate-recommendation data-recommendation-url="{{ mode_item.url }}"
                  data-recommendation-label="{{ item.action_label }} - {{ mode_item.label }}">{{ mode_item.label }}</button>
              {% endfor %}
            </div>
          </details>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% if show_history_empty %}
    <section class="home-empty" aria-label="No listening history">
      <h2>No listening history yet</h2>
      <p>Start with the library, browse artists, or pick a playlist. This page will fill in as you listen.</p>
      <nav class="home-empty-actions" aria-label="Library shortcuts">
        <a class="button-link primary" href="/albums" data-nav>Albums</a>
        <a class="button-link" href="/artists" data-nav>Artists</a>
        <a class="button-link" href="/playlists" data-nav>Playlists</a>
      </nav>
    </section>
  {% endif %}

  {% if dashboard.recent_albums %}
    <section class="home-section" aria-label="Recently listened albums">
      <div class="home-section-heading">
        <h2>Recently Listened Albums</h2>
        <a href="/albums?sort=recent" data-nav>Recent</a>
      </div>
      <div class="home-card-grid">
        {% for item in dashboard.recent_albums %}
          {% set album = item.album %}
          <div class="album-card" data-album-playback-source data-album-id="{{ album.album_id }}">
            <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" 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">
              <a class="album-card-link" href="{{ album|album_url }}" data-nav data-album-nav>
                <span class="album-name" title="{{ album.album|display_album_title }}">{{ album.album|display_album_title }}</span>
              </a>
              <span class="album-artist" title="{{ album.artist }}">{{ album.artist }}</span>
              <time class="home-stat" data-local-date-prefix="Played" datetime="{{ item.last_played_at }}">{{ played_label(item.last_played_at) }}</time>
            </span>
          </div>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% if dashboard.recently_added_albums %}
    <section class="home-section" aria-label="Recently Added Albums">
      <div class="home-section-heading">
        {% if dashboard.recently_added_since %}
          <h2>Most Recently Added Since <time data-local-date datetime="{{ dashboard.recently_added_since }}">{{ dashboard.recently_added_since[:10] }}</time></h2>
        {% else %}
          <h2>{{ recently_added_heading }}</h2>
        {% endif %}
        <a href="/albums?sort=recently_added" data-nav>Recently Added</a>
      </div>
      <div class="home-card-grid">
        {% for album in dashboard.recently_added_albums %}
          <div class="album-card" data-album-playback-source data-album-id="{{ album.album_id }}">
            <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" 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">
              <a class="album-card-link" href="{{ album|album_url }}" data-nav data-album-nav>
                <span class="album-name" title="{{ album.album|display_album_title }}">{{ album.album|display_album_title }}</span>
              </a>
              <span class="album-artist" title="{{ album.artist }}">{{ album.artist }}</span>
              {% if album.added_at %}
                <time class="home-stat" data-local-date-prefix="Added" datetime="{{ album.added_at }}">{{ added_label(album.added_at) }}</time>
              {% else %}
                <span class="home-stat">{{ added_label(album.added_at) }}</span>
              {% endif %}
            </span>
          </div>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% if dashboard.recently_starred_albums %}
    <section class="home-section" aria-label="Recently Favorited Albums">
      <div class="home-section-heading">
        <h2>Recently Favorited</h2>
        <a href="/albums?sort=starred" data-nav>Starred</a>
      </div>
      <div class="home-card-grid">
        {% for album in dashboard.recently_starred_albums %}
          <div class="album-card" data-album-playback-source data-album-id="{{ album.album_id }}">
            <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" 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">
              <a class="album-card-link" href="{{ album|album_url }}" data-nav data-album-nav>
                <span class="album-name" title="{{ album.album|display_album_title }}">{{ album.album|display_album_title }}</span>
              </a>
              <span class="album-artist" title="{{ album.artist }}">{{ album.artist }}</span>
              {% if album.starred_at %}
                <time class="home-stat" data-local-date-prefix="Favorited" datetime="{{ album.starred_at }}">{{ favorited_label(album.starred_at) }}</time>
              {% else %}
                <span class="home-stat">{{ favorited_label(album.starred_at) }}</span>
              {% endif %}
            </span>
          </div>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% if dashboard.recent_artists %}
    <section class="home-section" aria-label="Recent artists">
      <div class="home-section-heading">
        <h2>Recent Artists</h2>
        <a href="/artists" data-nav>All artists</a>
      </div>
      <div class="home-chip-list">
        {% for artist in dashboard.recent_artists %}
          <a class="home-chip" href="{{ artist.url }}" data-nav>
            <span>{{ artist.name }}</span>
            <small><time data-local-date-prefix="Played" datetime="{{ artist.last_played_at }}">{{ played_label(artist.last_played_at) }}</time></small>
          </a>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% if dashboard.recent_playlists or dashboard.recent_tracks %}
    <div class="home-two-column">
      {% if dashboard.recent_tracks %}
        <section class="home-section" aria-label="Recent tracks">
          <div class="home-section-heading">
            <h2>Recent Tracks</h2>
          </div>
          <div class="home-list">
            {% for track in dashboard.recent_tracks %}
              <a class="home-list-row home-track-row" href="{% if track.album_id and track.track_id %}/albums/{{ track.album_id }}?selectedTrackId={{ track.track_id }}{% elif track.album_id %}/albums/{{ track.album_id }}{% else %}/albums{% endif %}" data-nav>
                {% if track.art_track_id %}
                  <img class="home-track-cover" src="/art/250/{{ track.art_track_id }}" alt="" loading="lazy">
                {% else %}
                  <span class="home-track-cover album-cover-placeholder" aria-hidden="true"></span>
                {% endif %}
                <div class="home-track-copy">
                  <span class="home-track-title">{{ track.title }}</span>
                  <small>{{ track.artist }}{% if track.album %} - {{ track.album }}{% endif %} - <time data-local-date-prefix="Played" datetime="{{ track.last_played_at }}">{{ played_label(track.last_played_at) }}</time></small>
                </div>
              </a>
            {% endfor %}
          </div>
        </section>
      {% endif %}

      {% if dashboard.recent_playlists %}
        <section class="home-section" aria-label="Recent playlists">
          <div class="home-section-heading">
            <h2>Recent Playlists</h2>
            <a href="/playlists" data-nav>All playlists</a>
          </div>
          <div class="home-list">
            {% for item in dashboard.recent_playlists %}
              {% set playlist = item.playlist %}
              <a class="home-list-row home-track-row" href="{{ playlist|album_url }}" data-nav>
                {% set art_url = playlist|album_art_url %}
                {% if art_url %}
                  <img class="home-track-cover playlist-cover-image" src="{{ art_url }}" alt="" loading="lazy">
                {% else %}
                  <span class="home-track-cover album-cover-placeholder" aria-hidden="true"></span>
                {% endif %}
                <div class="home-track-copy">
                  <span class="home-track-title">{{ playlist.album }}</span>
                  <small><time data-local-date-prefix="Played" datetime="{{ item.last_played_at }}">{{ played_label(item.last_played_at) }}</time></small>
                </div>
              </a>
            {% endfor %}
          </div>
        </section>
      {% endif %}
    </div>
  {% endif %}
</div>