{% extends 'speeches/base_player.html' %}
{% load staticfiles %}
{% load url from future %}
{% load i18n %}

{% block title %}{% trans "Speeches" %}{% endblock %}

{% block extra_js %}
{{ block.super }}
<script src="{% static 'speeches/js/masonry.pkgd.min.js' %}"></script>
{% endblock %}

{% block content %}

  {% if object_list or speech_list %}

    <div class="page-header">
        <a href="{% url "speeches:speech-add" %}" class="button small right">Add a new speech</a>
        <a href="{% url "speeches:section-add" %}" class="button secondary small right">Add a section</a>
        <h1>{% trans "Speeches" %}</h1>
    </div>

      {% if object_list %}
        <ul class="unstyled">
            {% for top in object_list %}
            <li>
                <span class="section-title"><a href="{% url "speeches:section-view" top.get_path %}">{{ top.title }}</a></span>
            </li>
            {% endfor %}
        </ul>
      {% endif %}

      {% if speech_list %}
        <div class="section-page__speeches-collection">
          {% if object_list %}
            <h2>{% trans 'Speeches not in a section' %}</h2>
          {% endif %}
            <ul class="unstyled js-masonry" data-masonry-options='{"columnWidth":".speech","itemSelector":".speech","gutter":".gutter-sizer"}'>
                <li class="gutter-sizer"></li>
              {% for speech in speech_list %}
                {% include "speeches/speech.html" with speech=speech nosection="1" standalone="1" truncate="1" %}
              {% endfor %}
            </ul>
        </div>
      {% endif %}

  {% else %}

    <div class="nothing-here-yet-message">
      {% if request.is_user_instance %}
        <h1>{% trans 'You haven&rsquo;t added any speeches or statements yet' %}</h1>
        <p class="lead">{% trans 'Once you have, you&rsquo;ll be able to browse speeches and organise them into sections here.' %}</p>
        <p><a href="{% url "speeches:speech-add" %}" class="button">{% trans 'Add your first statement' %}</a></p>
      {% else %}
        <h1>{% trans 'This is a brand new SayIt site.' %}</h1>
        <p class="lead">{% trans 'Its creator hasn&rsquo;t yet added any speeches or statements for you to see.' %}</p>
        <p><a href="http://sayit.mysociety.org" class="button">{% trans 'Learn more about SayIt' %}</a></p>
      {% endif %}
    </div>

  {% endif %}

{% endblock %}
