{% extends 'layout.html' %}

{% block body %}
	<section id="not-found">
		<h1 class="text-center" style="font-size: 22px">Erro 404: Ops, não encontramos a página que você está procurando :(</h1>
		<a href="/"><img class="img-responsive center-block" src="/img/erro404.png"></a>
		<p class="text-center"><i><small><a href='https://www.freepik.com/free-vector/404-error-template-in-flat-style_1703294.htm'>Designed by Freepik</a></small></i></p>
	</section>
	{% if watches[0] %}
		<h3 style="margin-bottom: 1em">Você pode desfrutar dos recém chegados</h3>
	{% endif %}
	<div class="grid">
		<ul class="entries">
			{% for watch in watches %}
				<li class="col-md-3 thumb-404">
					<a role="button" data-toggle="modal" style="border-bottom: 0px solid;" data-toggle="modal" data-target="#assistir{{ loop.index }}">
						<img src="{{ watch.thumb480 }}" title="{{ watch.title }}{% if watch.subtitle %} - {{ watch.subtitle }}{% endif %} ({{ watch.year }})" class="fadeCatalogo" onload="this.style.opacity='1'"/>
					</a>
				</li>
				<div class="modal" id="assistir{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel{{ loop.index }}">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<i class="fa fa-times-circle exitTimes"></i>
								</button>
								<a href="/assistir/{{ watch.permalink }}">
									<button type="button" class="splash-play">
										<img src="/img/play.png" alt="Play">
									</button>
								</a>
								<a href="/assistir/{{ watch.permalink }}">
									<div class="splash" style="background-image: url('{{ watch.imgbg }}');"></div>
								</a>
							</div>
							<div class="modal-body">
								<h2>{{ watch.title }}</h2>
								<h4>
									{{ watch.subtitle }}
									{% if watch.subtitle %} &middot; {%endif%} {{watch.year}}
									{% if watch.classind %} &middot; <span class="classind">{{ watch.classind }}</span>{% endif %}
									{% if watch.duration %} &middot; {{ watch.duration }} {% endif %}
								</h4>
								<ul class="nav nav-pills text-right">
									<li class="active">
										<a data-toggle="pill" href="#resumo{{ loop.index }}">Resumo</a>
									</li>
								</ul>
								<div class="tab-content">
									<div id="resumo{{ loop.index }}" class="tab-pane fade in active">
										<div class="sinopse">{{ watch.sinopse }}</div>
										<h4> Tags: {% set list1 = watch.tags.split(',') %}{% for list in list1 %}
											<a href="/t/{{ list | trim}}">{{ list | trim}}</a>{%if loop.index0 < loop.length-1 %}, {%endif%}{% endfor %}
										</h4>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								{% if user.mod %}<a href="/edit/{{ watch._id }}"><button type="button" class="btn btn-danger">Editar <i class="fa fa-edit"></i></button></a>{% endif %}
								<button type="button" class="btn btn-default" data-dismiss="modal">Fechar <i class="fa fa-times-circle"></i></button>
								<a href="/assistir/{{ watch.permalink }}">
									<button type="button" class="btn btn-success">Assistir <i class="fa fa-play-circle"></i></button>
								</a>
							</div>
						</div>
					</div>
				</div>
			{% endfor %}
		</ul>
	</div>
{% endblock %}
