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

{% block extra_headers %}
{% with next=section.get_next_node previous=section.get_previous_node %}
  {% if previous %}
    <link rel="prev" href="{% url "speeches:section-view" previous.get_path %}" />
  {% endif %}
  {% if next %}
    <link rel="next" href="{% url "speeches:section-view" next.get_path %}" />
  {% endif %}
{% endwith %}
{% endblock %}

{% block title %}{% blocktrans with title=section.title %}View Section: {{ title }}{% endblocktrans %}{% endblock %}

{% block content %}

<div class="page-header page-header--speech">

    {% include "speeches/_section_user_actions.html" %}
    {% include "speeches/_breadcrumbs.html" %}

    <h1>{{ section.title }}</h1>

    {% if section.source_url %}
    <p><a href="{{ object.source_url }}">{% trans "Source" %}</a></p>
    {% endif %}

    {{ section.description }}

</div>

<div class="page-content__row">
  <div class="primary-content__unit">

    {% for node, structure in section_tree %}
      {% if structure.new_level %}<ul class="unstyled-list">{% else %}</li>{% endif %}
      {% if structure.speech %}
        <li id="s{{ node.id }}" class="speech {% if node.speaker %}speech--with-portrait{% endif %} {% if not node.speaker  %}speech--narrative{% endif %} speech--border"{% if node.speaker.colour %} style="border-left-color: #{{ node.speaker.colour }};"{% endif %}>
        {% include "speeches/speech.html" with speech=node nosection="1" section=section noli=1 %}
      {% else %}
        <li class="section-signpost" ><span class="section-title"><a href="{% url 'speeches:section-view' node.get_path %}">{{ node.title }}</a></span>
        {% if node.is_leaf_node %}({{ node.speech_count }}){% endif %}
      {% endif %}
      {% for level in structure.closed_levels %}</li></ul>{% endfor %}
    {% endfor %}
 {% with next=section.get_next_node previous=section.get_previous_node %}
        {% if previous or next %}
          <div class="section-navigation speech-list-navigation">
            {% if previous %}
              <a href="{% url "speeches:section-view" previous.get_path %}" class="button speech-navigation__button">&laquo; {{ previous.title }}</a>
            {% endif %}
            {% if next %}
              <a href="{% url "speeches:section-view" next.get_path %}" class="button speech-navigation__button">{{ next.title }} &raquo;</a>
            {% endif %}
          </div>
        {% endif %}
      {% endwith %}
  </div>
  <div class="sidebar__unit section-detail-sidebar">
      {% with next=section.get_next_node previous=section.get_previous_node %}
        {% if previous or next %}
          <div class="section-navigation">
            {% if previous %}
              <a href="{% url "speeches:section-view" previous.get_path %}" class="button speech-navigation__button">&laquo; {{ previous.title }}</a>
            {% endif %}
            {% if next %}
              <a href="{% url "speeches:section-view" next.get_path %}" class="button speech-navigation__button">{{ next.title }} &raquo;</a>
            {% endif %}
          </div>
        {% endif %}
      {% endwith %}
      <div class="ui-instructions cleared">
          <h2>{% trans 'Keyboard shortcuts' %}</h2>
          <p><span class="key-descriptor">j</span> {% trans 'previous section' %}
          <span class="key-descriptor">k</span> {% trans 'next section' %}</p>
      </div>
  </div>
</div>
{% endblock %}

