{% extends 'base.html.twig' %} {% block title %} results for {{ query }} !{%
endblock %} {% block body %}
<script>
    function addToFavs(id) {
        // alert(id);
        // /favorite/add/{id}
        fetch("/favorite/add/" + id).then((data) => {
            if (data.status == 200) {
                document.querySelector("#id" + id).classList.add("fav");
            }
        });
    }
</script>
<main id="searchResults">
    <h1>Results for "{{ query }}" with {{fruit_emoji}}:</h1>
    <div class="results">
        {% for result in results %} {% set array = result['title']|split('-') %}
        {% set artist = array[0] %} {% set album = array[1] %}
        <section
            class="album {% if result['isLiked'] == 'true' %}fav{% endif %}"
            id="id{{result['id']}}"
        >
            <span>
                <h2>{{album}}</h2>
                by
                <h3>{{artist}}</h3>
            </span>
            <img
                loading="lazy"
                src="{{result['cover_image']}}"
                alt="{{album ~ ' by ' ~ artist}}"
            />
            <p class="alreadyFav">
                <b>Already fav</b>, go to
                <a href="{{url('app_favorite')}}">favorites</a>
            </p>
            <button class="toFav" onclick="addToFavs({{result['id']}})">
                Add to favorites
            </button>
        </section>
        {% endfor %}
    </div>
    <nav>
        <a
            href="/search?q={{query}}&page={{previous_page}}&fruit={{fruit_emoji}}"
            >‹‹ previous page</a
        >
        <p>{{page}} of {{all_page}}</p>
        <a href="/search?q={{query}}&page={{next_page}}&fruit={{fruit_emoji}}"
            >next page ››</a
        >
    </nav>
</main>
{% endblock %}