{% extends "base.html" %}

{% block title %}
	Episode "{{episode.name}}" - S{{episode.season.number}}E{{episode.episode}} - {{show.name}} - Episodes.Community
{% endblock %}

{% block meta %}
	{{ block.super }}
	<meta property="og:title" content="{{episode.name}}">
	<meta property="og:type" content="video.episode">
	<meta property="og:video:series" content="{{show.name}}">
	<meta property="og:image" content="/media/uploaded_resources/{{show.artwork}}">
	<meta property="og:url" content="https://{{show.abbr}}.episodes.community/episode/{{episode.season.number}}/{{episode.episode}}-{{episode.name|slugify}}">
{% endblock %}

{% block content %}
{% load guardian_tags %}
{% get_obj_perms request.user for show as "show_perms" %}
<section class="show-details">
	<div class="banner" style="background-image: url(/media/uploaded_resources/{{show.banner}});"></div>
	<div class="banner-cover row p-4">
		<div class="artwork">
			{% if episode.season.artwork %}
				<img src="/media/uploaded_resources/{{episode.season.artwork}}">
			{% else %}
				<img src="/media/uploaded_resources/{{show.artwork}}">
			{% endif %}
		</div>
		<div class="details season col">
			<h1>{{show.name}}</h1>
			{% if episode.season.name %}
				<h3>{{ episode.season.name }}</h3>
			{% else %}
				<h3>Season {{ episode.season.number }}</h3>
			{% endif %}
			<p>
				{% if episode.season.description %}
					{{ episode.season.description }}
				{% else %}
					{{ show.description }}
				{% endif %}
			</p>
		</div>
	</div>
</section>
<section class="container mb-5 mt-2">
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="{{show.url}}">{{show.name}}</a></li>
			<li class="breadcrumb-item active" aria-current="page">{{episode.name}}</li>
		</ol>
	</nav>
	
	<h1>Watch <q>{{episode.name}}</q> From</h1>
	<div class="submission-list">
	{% for sbm in submissions %}
	<div class="submission{% if sbm.positives < sbm.negatives %} buried{% endif %}{% if sbm.pinned %} pinned{% endif %}{% if highlight and highlight == sbm.id %} highlighted{% endif %} mb-2">
		{% if forloop.counter0 == 0 and sbm.embed and not sbm.positives < sbm.negatives %}
		<div class="onsite-player d-flex justify-content-center mb-2">
			<iframe src="{{sbm.embed}}" width="1024" height="640"></iframe>
		</div>
		{% endif %}
		<div class="row">
			<div class="col">
				<a href="{{sbm.url}}" class="link d-block mb-2">
					{% if sbm.pinned %}<i class="fa fa-fw fa-thumb-tack" title="Pinned submission"></i>{% endif %}
					{% if sbm.title %}
						<span class="urld" title="Web URL: {{sbm.url}}">{{sbm.title}}</span>
					{% else %}
						<i class="fa fa-fw fa-globe"></i>&nbsp;{{sbm.url}}
					{% endif %}
				</a>
			</div>
			<div class="col-md-2 text-md-right">
				<div class="vote-btns" data-vote-id="{{sbm.id}}">
					<form method="POST" class="d-inline" action="{{show.url}}/vote/{{sbm.id}}/1">
						{% csrf_token %}
						<button class="btn btn-success">
							<i class="fa fa-fw fa-thumbs-up"></i>&nbsp;{{sbm.positives}}
						</button>
					</form>
					<form method="POST" class="d-inline" action="{{show.url}}/vote/{{sbm.id}}/0">
						{% csrf_token %}
						<button class="btn btn-danger">
							<i class="fa fa-fw fa-thumbs-down"></i>&nbsp;{{sbm.negatives}}
						</button>
					</form>
				</div>
			</div>
		</div>
		<div class="data">
			{% get_obj_perms sbm.user for show as "publisher_perms" %}
			<span class="timestamp">Submitted {{sbm.timestamp}} by 
				{% if sbm.user.is_staff or "can_moderate_show" in publisher_perms %}
					<span class="mod"><i class="fa fa-fw fa-shield"></i></span>
				{% endif %}
				<span class="display_name">{{sbm.user.display_name}}</span>
			</span>
			<span class="divider">&middot;</span>
			{% if "can_moderate_show" in show_perms %}
			<a href="{{show.url}}/submission/{{sbm.id}}/moderate" class="button modbutton"><i class="fa fa-fw fa-shield"></i>&nbsp;Change</a>
			{% else %}
			<a href="{{show.url}}/submission/{{sbm.id}}/report" class="report">Report Invalid or Spam</a>
			{% endif %}
		</div>
	</div>
	{% empty %}
	<h3>Nobody has submitted any links yet.</h3>
	{% endfor %}
	</div>
	<div class="d-flex flex-row-reverse mt-4">
		{% if user.is_authenticated %}
			{% if "can_moderate_show" in show_perms %}
			<a href="{{show.url}}/episode/{{episode.season.number}}/{{episode.episode}}/submit" class="btn btn-warning"><i class="fa fa-fw fa-plus"></i>&nbsp;Add New Link</a>
			{% else %}
			<a href="{{show.url}}/episode/{{episode.season.number}}/{{episode.episode}}/submit" class="btn btn-primary"><i class="fa fa-fw fa-plus"></i>&nbsp;Submit New Link</a>
			{% endif %}
		{% else %}
			<span class="fillertext"><a href="/login">Log in</a> to submit a link</span>
		{% endif %}
	</div>
	<p>Discuss <q>{{episode.name}}</q> on the <a href="{{show.url}}/discuss">discussion boards</a>!</p>
	<ul class="nav fixed-bottom d-flex justify-content-center border-top bg-light">
		{% if has_previous %}
		<li class="nav-item">
			<a class="nav-link" href="{{show.url}}/episode/{{episode.season.number}}/{{episode.episode|add:'-1'}}">Previous Episode</a>
		</li>
		{% else %}
		<li class="nav-item">
			<a href="#" class="nav-link disabled">Previous Episode</a>
		</li>
		{% endif %}
		{% if has_next %}
		<li class="nav-item">
			<a class="nav-link" href="{{show.url}}/episode/{{episode.season.number}}/{{episode.episode|add:'1'}}">Next Episode</a>
		</li>
		{% else %}
		<li class="nav-item">
			<a href="#" class="nav-link disabled">Next Episode</a>
		</li>
		{% endif %}
	</ul>
</section>
{% endblock %}