{% extends "base.html" %}

{% block content %}
    {% if found_series %}
        <main id="main">
            <h1 class="text-xlg font-weight-black mb-5">Found series for {{search_query}}</h1>
            <div class="cards-grid">
                {% for series in found_series %}
                    <div class="card-series">
                        <a href="{{ url_for('main.series_detail', series_id=series.id) }}">
                            <img class="card-series__image rounded img-fluid" src="{{ series.poster }}" width="680" height="1000"
                                loading="lazy" alt="Poster for {{series.name}}" />
                            <h3 class="my-1 font-weight-normal text-sm text-center">{{series.name}}</h3>
                        </a>
                    </div>        
                {% endfor %}
            </div>
        </main>
    {% else %}
        <main id="main" class="d-flex justify-content-center align-items-center">
            <div class="text-center">
                <img class="mb-2" width="40" height="40" src="/static/icon-info.svg" alt="">
                <p><span class="font-weight-bold text-lg">Nothing found while looking for <em>{{search_query}}</em>.</span><br>
                    Try to relax your query a little.</p>
            </div>
        </main>
    {% endif %}
{% endblock %}