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

{% block title %} results for {{ query }} !{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>

<div class="example-wrapper">
    <h1>results for {{ query }} with {{fruit_emoji}} ✅</h1>
    {% for result in results %}
        {% set array = result['title']|split('-') %}
        {% set artist = array[0] %}
        {% set song = array[1] %}
        <div>
            <p>artist : {{artist}}</p>
            <p>song : {{song}}</p>
            <img loading="lazy" src={{result['cover_image']}} alt="{{song ~ ' by ' ~ artist}}" />
        </div>
    {% endfor %}
    <a href="/search?q={{query}}&page={{previous_page}}&fruit={{fruit_emoji}}">previous page</a>
    <p>{{page}}</p>
    <a href="/search?q={{query}}&page={{next_page}}&fruit={{fruit_emoji}}">next page</a>
</div>
{% endblock %}