{% extends 'base.html' %}
{% load static %}
{% block title %} LORDCHANNEL - HOMEPAGE {% endblock title %}
{% block content %}
{% block style %}
        <link rel="stylesheet" href="{% static '/css/button.css' %}">
{% endblock style %}
    <!-- content -->
    
	<section style="margin-top: 90px;" class="content">
		<div class="content__head">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<!-- content title -->
						<h2 class="content__title">Articoli Recenti</h2>
						<!-- end content title -->
					</div>
				</div>
			</div>
		</div>

		<div class="container">
			<!-- content tabs -->
			<div class="tab-content" id="myTabContent">
				<div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="1-tab">
					<div class="row">
                        <!-- card -->
                        {% for ultimi_articoli in ultimi_caricamenti_media %}
						<div class="col-6 col-sm-12 col-lg-6">
							<div class="card card--list">
								<div class="row">
									<div class="col-12 col-sm-4">
										<div class="card__cover">
											<img src="{{ ultimi_articoli.immagine_poster.url }}" alt="">
											<a href="{{ ultimi_articoli.get_absolute_url }}" class="card__play">
												<i class="icon ion-ios-play"></i>
											</a>
										</div>
									</div>

									<div class="col-12 col-sm-8">
										<div class="card__content">
											<h3 class="card__title"><a href="{{ ultimi_articoli.get_absolute_url }}">{{ ultimi_articoli.titolo }}</a></h3>
											<span class="card__category">
                                                {% for genres_ultimi_articolo in ultimi_articoli.genere.all %}
												<a href="{{ genres_ultimi_articolo.get_absolute_url }}">{{ genres_ultimi_articolo.genere }}</a>
                                                {% endfor %}
                                            </span>

											<div class="card__wrap">
												<span class="card__rate"><i class="icon ion-ios-star"></i>{{ ultimi_articoli.voto }}</span>

												<ul class="card__list">
													<li>{{ ultimi_articoli.qualità_video }}</li>
													<li>{{ ultimi_articoli.età_consigliata }}</li>
													<li>{{ ultimi_articoli.lingua }}</li>
												</ul>
											</div>

											<div class="card__description">
												<p>{{ ultimi_articoli.descrizione|truncatewords:35 }}</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
                        <!-- end card -->
                        {% endfor %}
					</div>
				</div>
			</div>
			<!-- end content tabs -->
		</div>
	</section>
	<!-- end content -->

		<!-- home -->
		<div class="content__head">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<!-- content title -->
						<h2 class="content__title">Non sai cosa Guardare Stasera? Ti Consigliamo...</h2>
						<!-- end content title -->
					</div>
				</div>
			</div>
		</div>
			<div class="col-12">
		<section class="home" style="margin-top: 10px!important;">
			<!-- home bg da vedere -->
			<div class="owl-carousel home__bg">
				{% for random_media_film in random_film_serietv_anime.random_film %}
				<div class="item home__cover" data-bg="{{ random_media_film.immagine_background.url }}"></div>
				{% endfor %}
			</div>
			<!-- end home bg da vedere -->
	
			<div class="container">
				<div class="row">
					<div class="col-12">
						<h1 class="home__title"><b>FILM</b></h1>
	
						<button class="home__nav home__nav--prev" type="button">
							<i class="icon ion-ios-arrow-round-back"></i>
						</button>
						<button class="home__nav home__nav--next" type="button">
							<i class="icon ion-ios-arrow-round-forward"></i>
						</button>
					</div>
	
					<div class="col-12">
						<div class="owl-carousel home__carousel">
							{% for random_media_film in random_film_serietv_anime.random_film %}
							<div class="item">
								<!-- card -->
								<div class="card card--big">
									<div class="card__cover">
										<img src="{{ random_media_film.immagine_poster.url }}" alt="">
										<a href="{{ random_media_film.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="#">{{ random_media_film.titolo }}</a></h3>
										<span class="card__category">
											{% for random_media_film_generes in random_media_film.genere.all %}
											<a href="#">{{ random_media_film_generes.genere }}</a>
											{% endfor %}
										</span>
										<span class="card__rate"><i class="icon ion-ios-star"></i>{{ random_media_film.voto }}</span>
									</div>
								</div>
								<!-- end card -->
							</div>
							{% endfor %}
							
							</div>
						</div>
					</div>
				</div>
			</div>

		</section>
				<div class="col-12">
		<section class="home">
			<!-- home bg da vedere -->
			<div class="owl-carousel home__bg">
				{% for random_media_serietv in random_film_serietv_anime.random_serietv %}
				<div class="item home__cover" data-bg="{{ random_media_serietv.immagine_background.url }}"></div>
				{% endfor %}
			</div>
			<!-- end home bg da vedere -->
	
			<div class="container">
				<div class="row">
					<div class="col-12">
						<h1 class="home__title"><b>SERIETV</b></h1>
	
						<button class="home__nav home__nav--prev" type="button">
							<i class="icon ion-ios-arrow-round-back"></i>
						</button>
						<button class="home__nav home__nav--next" type="button">
							<i class="icon ion-ios-arrow-round-forward"></i>
						</button>
					</div>
	
					<div class="col-12">
						<div class="owl-carousel home__carousel">
							{% for random_media_serietv in random_film_serietv_anime.random_serietv %}
							<div class="item">
								<!-- card -->
								<div class="card card--big">
									<div class="card__cover">
										<img src="{{ random_media_serietv.immagine_poster.url }}" alt="">
										<a href="{{ random_media_serietv.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="#">{{ random_media_serietv.titolo }}</a></h3>
										<span class="card__category">
											{% for random_media_serietv_generes in random_media_serietv.genere.all %}
											<a href="#">{{ random_media_serietv_generes.genere }}</a>
											{% endfor %}
										</span>
										<span class="card__rate"><i class="icon ion-ios-star"></i>{{ random_media_serietv.voto }}</span>
									</div>
								</div>
								<!-- end card -->
							</div>
							{% endfor %}
							
							</div>
						</div>
					</div>
				</div>
			</div>

		</section>
	</div>
</div>
		<div class="col-12">
<section class="home">
	<!-- home bg da vedere -->
	<div class="owl-carousel home__bg">
		{% for random_media_anime in random_film_serietv_anime.random_anime %}
		<div class="item home__cover" data-bg="{{ random_media_anime.immagine_background.url }}"></div>
		{% endfor %}
	</div>
	<!-- end home bg da vedere -->

	<div class="container">
		<div class="row">
			<div class="col-12">
				<h1 class="home__title"><b>ANIME</b></h1>

				<button class="home__nav home__nav--prev" type="button">
					<i class="icon ion-ios-arrow-round-back"></i>
				</button>
				<button class="home__nav home__nav--next" type="button">
					<i class="icon ion-ios-arrow-round-forward"></i>
				</button>
			</div>

			<div class="col-12">
				<div class="owl-carousel home__carousel">
					{% for random_media_anime in random_film_serietv_anime.random_anime %}
					<div class="item">
						<!-- card -->
						<div class="card card--big">
							<div class="card__cover">
								<img src="{{ random_media_anime.immagine_poster.url }}" alt="">
								<a href="{{ random_media_anime.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="#">{{ random_media_anime.titolo }}</a></h3>
								<span class="card__category">
									{% for random_media_anime_generes in random_media_anime.genere.all %}
									<a href="#">{{ random_media_anime_generes.genere }}</a>
									{% endfor %}
								</span>
								<span class="card__rate"><i class="icon ion-ios-star"></i>{{ random_media_anime.voto }}</span>
							</div>
						</div>
						<!-- end card -->
					</div>
					{% endfor %}
			</div>

</section>
</div>
</div>
</div>
<!-- content most popular -->
		<div style="margin-top: 30px;" class="content__head">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<!-- content title -->
						<h2 class="content__title">Contenuti piú visti del mese...</h2>
						<!-- end content title -->
					</div>
				</div>
			</div>
		</div>
<!-- end content most popular -->
<div style="margin-top: 90px;" class="container">
	<div class="row">
	{% for popular_post in media_popolari %}
	<div class="col-6 col-sm-12 col-lg-6">
		<div class="card card--list">
			<div class="row">
				<div class="col-12 col-sm-5">
					<div class="card__cover">
						<img src="{{ popular_post.immagine_poster.url }}" alt="">
						<a href="{{ popular_post.get_absolute_url }}" class="card__play">
							<i class="icon ion-ios-play"></i>
						</a>
					</div>
				</div>

				<div class="col-12 col-sm-7">
					<div class="card__content">
						<h3 class="card__title"><a href="{{ popular_post.get_absolute_url }}">{{ popular_post.titolo }}</a></h3>
						<span class="card__category">
							{% for genres_popular_post in popular_post.genere.all %}
							<a href="{{ genres_popular_post.get_absolute_url }}">{{ genres_popular_post.genere }}</a>
							{% endfor %}
						</span>

						<div class="card__wrap">
							<span class="card__rate"><i class="icon ion-ios-star"></i>{{ popular_post.voto }}</span>

							<ul class="card__list">
								<li>{{ popular_post.visualizzazioni }} {% if popular_post.visualizzazioni == 1 %} Visualizzazione {% else %} Visualizzazioni {% endif %} </li>
							</ul>
						</div>
							<div class="card__description">
								<p>{{ popular_post.descrizione|truncatewords:28 }}</p>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		<!-- end card -->
		{% endfor %}
</div>
	</div>
<div class="col-12">
	<div style="margin-bottom: 15px;" class="sidebar">
	<h2 style="padding-right:0px!important;margin-bottom: 25px;" class="home__title">Seguici su...</h2>
	<ul  style="  display: flex;justify-content: center;" class="ats-basic-a light">
        <li><a href="#1"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>
		<li><a href="#1"><i class="fab fa-twitter"></i><span>Twitter</span></a></li>
		<li><a href="#1"><i class="fab fa-telegram-plane"></i><span>Telegram</span></a></li>
		<li><a href="#1"><i class="fab fa-discord"></i><span>Discord</span></a></li>
	</ul>
</div>
</div>	
	<!-- end home -->
{% endblock %}