{% extends 'base.html' %}
{% load static %}
{% block title %}LISTA ANIME ITA {% endblock title %}

{% block content %}
    

	<!-- page title -->
	<section class="section section--first section--bg" data-bg="https://i.ibb.co/1rMvtMS/section.jpg">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div style="justify-content: center!important;" class="section__wrap">
						<!-- section title -->
						<h2 class="section__title">ANIME ITA</h2>
						<!-- end section title -->
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- end page title -->

	<!-- filter -->
	<div class="filter">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="filter__content">
						<div class="filter__items">
							<!-- filter item -->
							<div class="filter__item" id="filter__genre">
								<span class="filter__item-label">GENERE:</span>

								<div class="filter__item-btn dropdown-toggle" role="navigation" id="filter-genre" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<input type="button" value="Azione">
									<span></span>
								</div>

								<ul class="filter__item-menu dropdown-menu scrollbar-dropdown" aria-labelledby="filter-genre">
                                    {% for generi_lista_anime_ita in generi %}
                                    <li>{{ generi_lista_anime_ita.genere }}</li>
                                    {% endfor %}
								</ul>
							</div>
							<!-- end filter item -->
						
						<!-- filter btn -->
						<button class="filter__btn" type="button">apply filter</button>
						<!-- end filter btn -->
					</div>
				</div>
			</div>
		</div>
    </div>
</div>
	<!-- end filter -->


<!-- <div class="container"><div class="center-spinnerbox"><img src="https://ita-hd.stream/chevereto/images/2020/11/22/gifntext-gif-1.gif" style="width: 100%;height: auto;" id="spinner-box"><div></div><div></div><div></div><div></div></div></div></div>  -->


	<!-- catalog -->
	<div class="catalog not-visible">
		<div class="container">
			<div class="row">
                <!-- card -->
                {% for lista_anime_ita in anime_ita %}
				<div class="col-6 col-sm-4 col-lg-3 col-xl-3">
					<div class="card">
						<div class="card__cover">
							<img src="{{ lista_anime_ita.immagine_poster.url }}" alt="">
							<a href="{{ lista_anime_ita.get_absolute_url }}" class="card__play">
								<i class="icon ion-ios-play"></i>
							</a>
						</div>
						<div class="card__content">
							<h3 class="card__title"><a href="{{ lista_anime_ita.get_absolute_url }}">{{ lista_anime_ita.titolo }}</a></h3>
							<span class="card__category">
                                {% for genere_anime_ita in lista_anime_ita.genere.all %}
                                <a href="{{ genere_anime_ita.get_absolute_url }}">{{ genere_anime_ita.genere }}</a>
                                {% endfor %}
							</span>
							<span class="card__rate"><i class="icon ion-ios-star"></i>{{ lista_anime_ita.voto }}</span>
						</div>
					</div>
                </div>
                {% endfor %}
				<!-- end card -->

				{% if anime_ita.has_other_pages %}
				<!-- paginator -->
				<div class="col-12">
					<ul class="paginator">
						{% if anime_ita.has_previous %}
						<li class="paginator__item paginator__item--prev">
							<a href="?pagina={{ anime_ita.previous_page_number }}"><i class="icon ion-ios-arrow-back"></i></a>
						</li>
						{% endif %}
						{% for i in anime_ita.paginator.page_range %}
						{% if anime_ita.number == i %}
						<li class="paginator__item paginator__item--active"><a href="#">{{i}}</a></li>
						{% else %}
						<li class="paginator__item"><a href="?pagina={{ i }}">{{i}}</a></li>
						{% endif %}
						{% endfor %}
						{% if anime_ita.has_next %}
						<li class="paginator__item paginator__item--next">
							<a href="?pagina={{ anime_ita.next_page_number  }}"><i class="icon ion-ios-arrow-forward"></i></a>
						</li>
						{% endif %}
					</ul>
				</div>
				<!-- end paginator -->
				{% endif %}
			</div>
		</div>
	</div>
	<!-- end catalog -->
{% endblock content %}

<!-- {% block javascript %}
	<script src="{% static '/js/spinner.js' %}"></script>
{% endblock javascript %} -->