{% extends "site_base.html" %}

{% load lca2018_tags %}
{% load lca2019_tags %}
{% load sitetree %}
{% load staticfiles %}
{% load thumbnail %}

{% block head_title %}Presentation: {{ presentation.title }}{% endblock %}
{% block body_class %}text-primary{% endblock body_class %}

{% block main_class %}container-fluid{% endblock %}

{% block content %}
  <div class="row">

    <div class="col-12 col-lg-10 offset-lg-1">
      <h1 class="mb-4" style="max-width: 800px;">{{ presentation.title }}</h1>
      <p>
        <strong>{{ presentation.slot.rooms.0 }} | {{ presentation.slot.day.date|date:"D d M" }} | {{ presentation.slot.start}}&ndash;{{ presentation.slot.end }}</strong>
      </p>
      <hr class="green">
    </div>

    <div class="col-12 col-lg-3 offset-lg-1 order-2 order-md-1 px-4" >
      <p class="pt-4"><strong>Presented by</strong></p>
      <ul class="list-unstyled">

        {% for speaker in presentation.speakers %}
        <li class="mb-4 pb-2">
          {% speaker_photo speaker 120 as speaker_photo_url %}
          <img src="{{ speaker_photo_url }}" class="rounded-circle">
          <p>
            <strong>{{ speaker }}</strong><br />
            {% if speaker.twitter_username %}
              <a href="https://twitter.com/{{ speaker.twitter_username }}">{{ speaker.twitter_username|twitter_handle }}</a><br />
            {% endif %}
            {% if speaker.homepage %}
              <a href="{{ speaker.homepage }}">{{ speaker.homepage }}</a>
            {% endif %}
          </p>
          <div class="bio">{{ speaker.biography_html|safe}}</div>
          </p>
        </li>
        {% endfor %}

      </ul>
    </div>

    <div class="col-12 col-lg-7 order-1 order-lg-2 px-4 talk-abstract">
      <h4 class="mt-4">Abstract</h4>
      <div class="abstract pb-4"><p>{{ presentation.abstract_html|clean_text|urlize|safe }}</p></div>
    </div>
  {% if presentation.unpublish %}
    <p><strong>Presentation not published.</strong></p>
  {% endif %}
{% endblock %}