{% load url from future %}
{% load i18n %}
{% load staticfiles %}
{% load speech_utils %}

{% if not noli %}
<li id="s{{ speech.id }}" class="speech {% if result.object %}speech--search-result{% endif %} {% if speech.speaker and not nospeaker %}speech--with-portrait{% endif %} {% if not speech.speaker  %}speech--narrative{% endif %} speech--border"
{% if speech.speaker.colour %} style="border-left-color: #{{ speech.speaker.colour }};"{% endif %}>
{% endif %}

  {% if not speech.is_public %}
    <span class="label label-info">{% trans "Invisible" %}</span>
  {% endif %}

  {% if not nospeaker %}
    {% if speech.speaker %}
    <div class="speaker-portrait-wrapper">
    <img src="{% if speech.speaker.person.image %}
        {{ speech.speaker.person.image }} {% else %} {% static "speeches/i/a.png" %} {% endif %}"
        style="border-color: #{{ speech.speaker.colour }}; background-color: #{{ speech.speaker.colour }};" alt=""  class="speaker-portrait speaker-portrait--left round-image speaker-portrait--medium">
    </div>
    {% endif %}
  {% endif %}

  <div class="speech-wrapper">
    <div class="speech__breadcrumb">
      {% if not nosection and speech.section_id %}
      <ul class="breadcrumbs">
        {% for n in speech.section.get_ancestors %}
            <li><a href="{{ n.get_absolute_url }}">{{ n.title }}</a></li>
        {% endfor %}
        {% if not result.object %}
        <li class="no-content-after">
          <span  class="breadcrumbs__date">
            {{ speech.start_time|default:"" }}{% if speech.start_time and speech.start_date and speech.start_date != speech.end_date %},{% endif %}
            {% if speech.start_date and speech.start_date != speech.end_date %}
              {{ speech.start_date }}
            {% endif %}
            {% if speech.end_time or speech.end_date %}
              {% if speech.start_time or speech.start_date and speech.start_date != speech.end_date %} &ndash; {% endif %}
              {{ speech.end_time|default:"" }}{% if speech.end_time and speech.end_date %},{% endif %}
              {{ speech.end_date }}
            {% endif %}
          </span>
        </li>
        {% endif %}
      </ul>
      {% endif %}
    </div>
    <div class="speech__meta-data">
      {% if speech.speaker and not nospeaker %}
        <span class="speech__meta-data__speaker-name">
          <a href="{% url 'speeches:speaker-view' speech.speaker.slug %}">
              {% filter force_escape %}
              {% firstof speech.speaker_display speech.speaker %}
              {% endfilter %}
          </a>
        </span>
      {% endif %}


  {% if not nospeaker %}
    {% ifchanged %}
    {% if speech.start_time or speech.start_date or speech.end_time or speech.end_date %}
      <span class="speech__meta-data__date">
        {{ speech.start_time|default:"" }}{% if speech.start_time and speech.start_date and speech.start_date != speech.end_date %},{% endif %}
        {% if speech.start_date and speech.start_date != speech.end_date %}
          {{ speech.start_date }}
        {% endif %}
        {% if speech.end_time or speech.end_date %}
        {% if speech.start_time or speech.start_date and speech.start_date != speech.end_date %} &ndash; {% endif %}
          {{ speech.end_time|default:"" }}{% if speech.end_time and speech.end_date %},{% endif %}
          {{ speech.end_date }}
        {% endif %}
      </span>
    {% endif %}
    {% endifchanged %}
  {% endif %}

  {% for tag in speech.tags.all %}
    <span class="label">{{ tag }}</span>
  {% endfor %}
</div>


  {% if speech.audio %}
  <div class="speech__audio">
    <i class="icon-volume-up off-screen">{% trans "This speech has audio" %}</i>
    <audio class="audio-small" id="audio{{ speech.id }}" src="{{ MEDIA_URL }}{{ speech.audio }}" controls></audio>
    <script>
        $('#audio{{ speech.id }}').mediaelementplayer( { audioWidth: 100, audioHeight: 24, features: [ 'playpause', 'current', 'duration' ] } );
    </script>
  </div>
  {% endif %}
<div class="speech__content">
  {% if speech.audio and not speech.text %}
    <p>{% trans "[ recorded audio ]" %}</p>
  {% elif highlight %}
    <p class="search">
      {% if speech.section_id %}
        <a title="{% trans "Link in context" %}" href="{% url 'speeches:section-view' speech.section.get_path %}#s{{ speech.id }}">
      {% else %}
        <a title="{% trans "Link" %}" href="{% url 'speeches:speech-view' speech.id %}">
      {% endif %}
            {{ highlight|striptags_highlight }}
      </a>
    </p>
  {% elif truncate %}
    {{ speech.text|bleach|truncatewords_html:"50" }}
  {% else %}
    {{ speech.text|bleach }}
  {% endif %}
</div>

{% if not result.object %}
  <div class="speech__links">
    {% if speech.section_id %}
      <a title="{% trans "Link in context" %}" href="{% if section %}{% url 'speeches:section-view' section.get_path %}{% else %}{% url 'speeches:section-view' speech.section.get_path %}{% endif %}#s{{ speech.id }}"><i class="speech-icon icon-link-in-context"></i>{% trans "Link in context" %}</a>
    {% endif %}
      <a title="{% trans "Link" %}" href="{% url "speeches:speech-view" speech.id %}"><i class="speech-icon icon-link"></i>{% trans "Link" %}</a>
  </div>
{% endif %}

</div>
{% if not noli %}
</li>
{% endif %}
