{% extends "base.html" %}
{% load paniktags staticfiles thumbnail i18n %}
{% block title %}{% trans 'Sounds' %}{% endblock %}
{% block toptitle %}
<h1 class="top bg-title"><a href="{% url 'listen' %}">{% trans 'Sounds' %}</a></h1>
{% endblock %}
{% block nav %}
{% endblock %}
{% block main %}

<div class="detail marged soundfiles cf">
  <div class="wrapper navigation">

<p class="intro leftPart">
Émissions et fragments sonores à (ré-)écouter, à partager et à télécharger.
</p>

    <div class="leftPart">
      <div class="soundfiles">
        <h5 class="sectionLabel focus-title">{% trans 'Focus' %}</h5>

        <ul class="custom columns cf padded">
        {% for soundfile in focus %}
          <li class="soundfile frontpage">
            <div class="content content-inline cf special">
              <a class="block cf" href="{% url 'episode-view' emission_slug=soundfile.episode.emission.slug slug=soundfile.episode.slug %}">
                <div class="label labels absolute">
                  <span class="item inBlock">{{ soundfile.format.title }}</span>
                </div>
                <div class="logo">
                  {% if soundfile.episode.image %}
                  {% thumbnail soundfile.episode.image "480x320" crop="50% 25%" as im %}
                  <img class="normal" src="{{im.url}}"/>
                  {% endthumbnail %}
                  {% elif soundfile.episode.emission.image %}
                  {% thumbnail soundfile.episode.emission.image "480x320" crop="50% 25%" as im %}
                  <img class="normal" src="{{im.url}}"/>
                  {% endthumbnail %}
                  {% else %}
                  <img class="normal" src="{% static "img/sound.png" %}"/>
                  {% endif %}
                </div>
                <div class="content">
                  {% if soundfile.fragment and soundfile.title %}
                  <h5 class="title">{{ soundfile.title }}</h5>
                  {% endif %}
                  <h5 class="title">{{ soundfile.episode.title }}</h5>
                  <h5 class="title">{{ soundfile.episode.emission.title }}</h5>
                  <div class="description">
                    {{ soundfile.episode.text|safe|striptags|truncatewords:75}}
                  </div>
                  {% if soundfile.first_diffusion %}
                    <div class="smooth">{{ soundfile.first_diffusion|date:"d/m/Y" }}</div>
                  {% endif %}
                </div>
              </a>
              {% audio sound=soundfile %}
            </div>
          </li>
        {% endfor %}
        </ul>
      </div>
    </div>
    <div class="rightPart">
      <div class="sub">
        <h5 class="sectionLabel right">
          <a href="{% url 'listenArchives' %}"><span class="iconLabel">Tous</span></a>
        </h5>
        <h5 class="sectionLabel">{% trans 'Latest Sounds' %}&nbsp;<a
                        class="button icon-rss inBlock" href="{% url 'podcasts-feed' %}"></a></h5>

	<form action="{% url 'listenArchives' %}" id="search-form">
		<input id="id_q" name="q" type="text" {% if search_query %}value="{{ search_query }}"{% endif %}>
                <button class="icon-search"><span class="sr-only">{% trans "Search" %}</span></button>
	</form>

        <ul class="custom list soundfilesList">
          {% for soundfile in soundfiles|slice:":20" %}
            <li class="item">
              {% soundfile_resume soundfile=soundfile date=soundfile.first_diffusion %}
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}