{% extends "base.html" %}
{% load paniktags staticfiles soundfiles thumbnail %}
{% block title %}{{ episode.title }} - {{ episode.emission.title }} {% endblock %}

{% block head %}
<meta property="og:title" content="{{ episode.emission.title }} - {{ episode.title }}" />
<meta name="twitter:title" content="{{ episode.emission.title }} - {{ episode.title }}" />
{% if episode.image %}
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="{{ site_url }}{{ episode.image.url }}" />
<meta name="twitter:image" content="{{ site_url }}{{ episode.image.url }}" />
{% elif episode.emission.image %}
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="{{ site_url }}{{ episode.emission.image.url }}" />
<meta name="twitter:image" content="{{ site_url }}{{ episode.emission.image.url }}" />
{% else %}
<meta name="twitter:card" content="summary">
<meta property="og:image" content="{{ site_url }}{% static 'img/favicon-300x300-2020-solid.png' %}" />
<meta name="twitter:image" content="{{ site_url }}{% static 'img/favicon-300x300-2020-solid.png' %}" />
{% endif %}
{% if episode.subtitle %}
<meta property="og:description" content="{{ episode.subtitle }}" />
<meta name="twitter:description" content="{{ episode.subtitle }}" />
{% else %}
<meta property="og:description" content="{{ episode.text|safe|striptags|truncatewords:75 }}"/>
<meta name="twitter:description" content="{{ episode.text|safe|striptags|truncatewords:75 }}"/>
{% endif %}
{% if episode.main_sound %}
<meta property="og:audio" content="{{ site_url }}{{ episode.main_sound|format_url:'ogg' }}"/>
<meta property="og:audio:type" content="audio/ogg"/>
{% endif %}
{% endblock %}

{% block main %}
<div class="emission emission-detail emission-episode">
        <a id="back-home" href="{% url 'emission-view' slug=episode.emission.slug %}">{{episode.emission.title}}</a>
        <div class="name"><h2>{{episode.title}}</h2></div>
        {% if diffusions %}
		<ul class="schedule custom">
			{% for schedule in diffusions %}
				<li><span>{{ schedule.datetime|date:"l d F Y à H:i" }}</span></li>
			{% endfor %}
		</ul>
        {% endif %}


	<div class="episode-info">
		<div class="image">
                        <div class="img">
			{% thumbnail episode.image "450x300" crop="50% 50%" as im %}
                        <img src="{{im.url}}">
                        {% empty %}
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==" height="300" width="450">
			{% endthumbnail %}
                        </div>
		</div>
                <div class="emission-text">
		{% if episode.subtitle %}
		<h3 class="episode-subtitle">{{ episode.subtitle }}</h3>
		{% endif %}
		{{ episode.text|safe}}
                </div>

                {% if episode.main_sound %}
                        <br style="clear: both">
                        <div class="sound">
                                {% audio sound=episode.main_sound %}
                        </div>
                {% endif %}
	</div>

</div>
{% endblock %}