{% extends 'base.html.twig' %}

{% block title %}Favorites!{% endblock %}

{% block body %}
<script>
    function rmFromFavs(id) {
        // alert(id);
        // /favorite/add/{id}
        fetch("/favorite/remove/" + id).then((data) => {
            if (data.status == 200) {
                document.querySelector("#id" + id).classList.remove("fav");
            }
        });
    }
</script>
<main id="favorites">
    <h1>Favorites</h1>
    <div class="results">
    {% for album_liked in favorites %}
        {% set main_artist = album_liked["artists_sort"] %}
        {% set artists = album_liked["artists"] %}
        {% set album = album_liked["title"] %}
        {% set fruit = album_liked["fruit"] %}
        <section class="album fav" id="id{{album_liked['id']}}">
            <span>
                <h1>{{fruit}}</h1>
                <h2>{{album}}</h2>
                by
                {% for artist in artists %}
                    <h3>{{artist["name"]}}</h3>
                {% endfor %}
            </span>
            <img
                loading="lazy"
                src="{{album_liked['images'][0]["uri"]}}"
                alt="{{album ~ ' by ' ~ main_artist}}"
            />
            <h4>TrackList</h4>
            {% for track in album_liked["tracklist"] %}
                <p>{{track["title"]}} - {{track["duration"]}}</p>
            {% endfor %}
            <button onclick="rmFromFavs({{album_liked['id']}})">
                Remove from favorites
            </button>
        </section>
    {% endfor %}
    </div>
</main>
{% endblock %}