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

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

  {% if not nospeaker and not standalone %}
    {% if speech.speaker %}
    <div class="speaker-portrait-wrapper">
    <img src="{% if speech.speaker.image_cache %}{{ speech.speaker.image_cache|thumbnail_url:'speaker-thumb' }}{% elif speech.speaker.image %}{{ speech.speaker.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">
    {% if not speech.is_public %}
      <span class="label secondary radius right">{% trans "Invisible" %}</span>
    {% endif %}

    {% if not nosection %}
      {% if speech.section_id or not result.object %}
        <div class="speech__breadcrumb">
          <ul class="breadcrumbs">
            {% if speech.section_id %}
              {% for n in speech.section.get_ancestors %}
                <li><a href="{{ n.get_absolute_url }}">{{ n.title }}</a></li>
              {% endfor %}
            {% endif %}
            {% if not result.object %}
              <li class="no-content-after">
                <span class="breadcrumbs__date">
                  {% include 'speeches/speech_date_bit.html' %}
                </span>
              </li>
            {% endif %}
          </ul>
        </div>
      {% endif %}
    {% endif %}

    <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 %}
    {% if standalone or result.object %}
      {% if speech.start_time or speech.start_date or speech.end_time or speech.end_date %}
        <span class="speech__meta-data__date">
          {% include 'speeches/speech_date_bit.html' %}
        </span>
      {% endif %}
    {% else %}
      {% ifchanged %}
        {% if speech.start_time or speech.start_date or speech.end_time or speech.end_date %}
          <span class="speech__meta-data__date">
            {% include 'speeches/speech_date_bit.html' %}
          </span>
        {% endif %}
      {% endifchanged %}
    {% endif %}
  {% 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 %}

{% if truncate %}
  {% if speech.section_id %}
    <a title="{% trans "Link in context" %}" href="{% url 'speeches:section-view' speech.section.get_path %}#s{{ speech.id }}" class="speech__content-link">
  {% else %}
    <a title="{% trans "Link" %}" href="{% url 'speeches:speech-view' speech.id %}" class="speech__content-link">
  {% endif %}
{% endif %}

<div class="speech__content">
  {% if speech.title %}
    <h3>{{ speech.title }}</h3>
  {% endif %}

  {% 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 truncate %}
  </a>
{% endif %}

{% if not result.object %}
  <div class="speech__links">
    {% if request.is_user_instance %}
      <a href="{{ speech.get_edit_url }}"><i class="speech-icon icon-edit"></i>{% trans "Edit" %}</a>
      <a href="{{ speech.get_delete_url }}"><i class="speech-icon icon-delete"></i>{% trans "Delete" %}</a>
    {% endif %}
    {% 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 %}
