{% extends "base.html" %}
{% load paniktags static 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 %}
  {% if episode.main_sound|is_format_available:'ogg' %}
    <meta property="og:audio" content="{{ site_url }}{{ episode.main_sound|format_url:'ogg' }}"/>
    <meta property="og:audio:type" content="audio/ogg"/>
  {% elif episode.main_sound|is_format_available:'mp3' %}
    <meta property="og:audio" content="{{ site_url }}{{ episode.main_sound|format_url:'mp3' }}"/>
    <meta property="og:audio:type" content="audio/mpeg"/>
  {% endif %}
{% 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 "450x450" crop="50% 50%" as im %}
                        <img alt="" src="{{im.url}}">
                        {% empty %}
                        <img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==" height="450" width="450">
			{% endthumbnail %}
                        </div>
		</div>
                {% with parts=episode.text|safe|hr_split %}
                <div class="emission-text episode-text">
                <div class="text-part">
		{% if episode.subtitle %}
		<h3 class="episode-subtitle">{{ episode.subtitle }}</h3>
		{% endif %}
		{{ parts|first|safe}}
                </div>

                {% if episode.main_sound %}
                        <div class="sound">
                                {% audio sound=episode.main_sound %}
                        </div>
                {% endif %}
                </div>

                {% if parts|length > 1 %}
                <div class="more-text">
                  {{ parts|last|safe }}
                </div>
                {% endif %}
                {% endwith %}
	</div>

</div>

{% if episode.emission.slug == 'detour-vers-le-futur' %}
{% include "includes/detour-vers-le-footer.html" %}
{% endif %}

{% endblock %}