{% extends "base.html" %}
{% load paniktags staticfiles i18n thumbnail %}
{% block bodyID %}Home{% endblock %}
{% block title %}{% trans 'Home' %}{% endblock %}

{% block head %}
{{ block.super }}
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "url": "https://radio.esperanzah.be",
  "name" : "Radio Esperanzah!"
}
</script>
{% endblock %}

{% block main %}

<div class="" id="specialHome">
    <div>

            {% if newsitems %}
	      <div id="actu">
		      <h2>{{newsitems.0.title}}</h2>
		      <div>{{newsitems.0.text|safe}}</div>
	      </div>
	    {% endif %}


            <div>
	    {% spaceless %}
	    {% for emission in emissions %}
	    <div class="emission-tile {% if emission.has_focus %}emission-focus{% endif %}">
	      <a href="{% url 'emission-view' slug=emission.slug %}">
		    <div class="image">
                            <div class="img">
			{% thumbnail emission.image "450x450" crop="50% 50%" as im %}
                        <img src="{{im.url}}">
                        {% empty %}
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==">
			{% endthumbnail %}
                            </div>
		    </div>
	      </a>
	      <div class="name"><span>{{emission.title}}</span></div>
              <div class="tags">
              {% if emission.subtitle %}<span>{{ emission.subtitle }}</span>
              {% elif emission.has_focus %}<span>#podcast</span>{% endif %}
              {% for schedule in emission.schedule_set.all %}
                {% if forloop.first and forloop.last %}#{{schedule.datetime|date:"l"}}{% endif %}
              {% endfor %}
              <!-- &nbsp;<span>#espe{{emission.creation_timestamp|date:"Y"}}</span> -->
              </div>
	    </div>
	    {% endfor %}

	    {% for page in extra_pages %}
	    <div class="emission-tile">
	    <a href="{{page.get_online_url}}">
		    <div class="image">
                            <div class="img">
			{% thumbnail page.picture "450x450" crop="50% 50%" as im %}
                        <img src="{{im.url}}">
                        {% empty %}
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8nez3HwAGugKtHMIYIwAAAABJRU5ErkJggg==" height="450" width="450">
			{% endthumbnail %}
                            </div>
		    </div>
	    </a>
		    <div class="name"><span>{{page.title}}</span></div>
                      <div class="tags">
                      {% if page.slug == "interviews" %}<span>#podcast</span>{% endif %}
                      </div>
	    </div>
	    {% endfor %}
	    {% endspaceless %}
            </div>

    </div>
</div>

{% endblock %}