{% extends "base_generic.html" %}
{% load static %}

{% block head %}

<!-- Primary Meta Tags -->
<meta name="twitter:description" content="{{presentation_detail.abstract|safe|linebreaksbr}}">
<meta name="title" content="{{ presentation_detail.title|safe }}">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:image" itemprop="image"  content="https://{{ request.get_host }}/{{ resentation_detail.presenter.all.0.image }}" />
<meta property="og:title" content="{{ presentation_detail.title|safe }} by" />
<meta property="og:site_name" content="{{ presentation_detail.title|safe }} by">
<meta property="og:url" content="{{ request.get_full_path }}">

<!-- Twitter -->
<meta name="twitter:card" content="" />
<meta name="twitter:title" content="{{ presentation_detail.title|safe }} by">
<meta name="twitter:image" content="https://{{ request.get_host }}/{{ resentation_detail.presenter.all.0.image }}">
<meta name="twitter:description" content='{{presentation_detail.abstract|safe|linebreaksbr}}'>

{% endblock %}

{% block nav-research %}
<button class="w3-button w3-hover-none w3-bottombar navbutton" style="border-color:var(--colmenub)!important">research </span><i class="fa fa-caret-down"></i></button>
{% endblock %}
{% load static %}

{% block content %}
{% block small %}


<h1>{{ presentation_detail.title|safe }}</h1>
	
<!--space left and right for mobile device -->
<div style='padding:0px 5px 0px 5px'>
	<div class="w3-center">	
		{% if presentation_detail.image %}
		<div class="w3-center" >
			<img src="/{{presentation_detail.image}}" alt="" style="max-width:70%;max-height:300px">
			
		</div>
        
		{% else %}
            {% if presentation_detail.image_url %}
            <div class="w3-container w3-center">
                <img src="{{ presentation_detail.image_url }}" class="w3-padding-16" alt="" style="max-width:100%;max-height:400px;vertical-align: middle">
                
            </div>
            {% endif %}
		{% endif %}
        
	</div>
    {% if presentation_detail.copyright %}
        <div class="w3-container w3-center" >
            <small>&copy{{presentation_detail.copyright}}</small>
        </div>
    {% endif %}
    {% if presentation_detail.image_url %}
        <div class="w3-container w3-center"><small>&copy{{presentation_detail.image_url}}</small></div>
    {% endif%}
    <div class="w3-container">
        <table>
            <hr style="width:100%"> </hr>
        </table>
    </div>
    
    {% if presentation_detail.event_title %}
        {% if presentation_detail.event_type %}
        <div class="w3-left-align w3-large" style="color:var(--colheader)">
            <b>{{ presentation_detail.event_title }}</b> |  {{ presentation_detail.event_type }}
        </div>
        {% else %}
        <div class="w3-left-align w3-large" style="color:var(--colheader)">
            <b>{{ presentation_detail.event_title }}</b>
        </div>
        {% endif %}
    {% else %}
       <b>{{ presentation_detail.event_type }}</b>
    {% endif %}
    {% if presentation_detail.event_url %}
    <div class="w3-left-align w3-large" style="color:var(--colheader)">
        Link to conference: <a rel="noopener noreferrer" href="{{ presentation_detail.event_url }}">{{ presentation_detail.event_url }}</a>
    </div>
    {% endif %}
    {% if presentation_detail.host_university%}
        <div class="w3-left-align w3-large" style="color:var(--colheader)">
            Hosted by: {{ presentation_detail.host_university }}{% if presentation_detail.host_department %}, <a href="{{ presentation_detail.host_url }}">{{ presentation_detail.host_department }}</a>{% endif %}
        </div>
    {% elif presentation_detail.host_department %}
        <div class="w3-left-align w3-large" style="color:var(--colheader)">
            {% if not presentation_detail.host_university %}Hosted by: <a href="{{ presentation_detail.host_url }}">{{ presentation_detail.host_department }}</a>{% endif %}
        </div>
    {% endif %}

    {% if presentation_detail.start_date %}
    
    <div class="w3-left-align w3-large" style="color:var(--colheader)">
    {% if presentation_detail.start_date < presentation_detail.end_date %}
        {% if presentation_detail.location is None %}
            <div>{{presentation_detail.start_date}} - {{presentation_detail.end_date}}</div>
        {% else %}
            <div>{{presentation_detail.start_date}} - {{presentation_detail.end_date}} | {{presentation_detail.location}}</div>
        {% endif %}
    {% else %}
        {% if presentation_detail.location is None %}
            <div>{{presentation_detail.start_date}}</div>
        {% else %}
            <div>{{presentation_detail.start_date}} | {{presentation_detail.location}}</div>
        {% endif %}
    {% endif %}
    </div>
    
    {% endif %}



{% if presentation_detail.abstract %}
<div class="w3-container">
    <table>
        <hr style="width:100%"> </hr>
    </table>
</div>

    {% if presentation_detail.imageabstract %}
        {% if presentation_detail.imageabstract !=  presentation_detail.image%}
        <div class="container w3-center" >
            {% if presentation_detail.get_extension == ".mp4" %}
				<video width="100%" playsinline controls>
					<source src="/{{ presentation_detail.imageabstract}}" type="video/mp4">
				</video>
			{% else %}
                <img src="/{{presentation_detail.imageabstract}}" alt="" style="max-width:70%;max-height:300px">
            {% endif %}
            
        </div>
            {% if presentation_detail.copyright_imgabstr %}
                <div class="w3-container w3-center" >
                    <small>&copy{{presentation_detail.copyright_imgabstr}}</small>
            </div> 
            {% endif %}
        {% endif %}
    {% endif %}
    <div class='w3-left-align'><p align="justify">{{presentation_detail.abstract|safe|linebreaksbr}}</p>
</div>
{% endif %}

{% if presentation_detail.presenter.all %}
<div class="w3-container">
    <table>
        <hr style="width:100%"> </hr>
    </table>
</div>

{% with member_list=presentation_detail.presenter.all|dictsort:"status.order_index" %}
<div class='w3-text w3-large' style="color:var(--colheader)">
    <b>Presenter</b>
</div>
{% include "member_list.html" with l=3 m=4 s=6 height=150 member_list=member_list %}
{% endwith %}
			
{% endif %}


{% if presentation_detail.author.all %}
<div class="w3-container">
    <table>
        <hr style="width:100%"> </hr>
    </table>
</div>

{% with member_list=presentation_detail.author.all|dictsort:"status.order_index" %}
<div class='w3-text w3-large' style="color:var(--colheader)">
    <b>Authors</b>
</div>
{% include "member_list.html" with l=3 m=4 s=6 height=150 member_list=member_list %}
{% endwith %}
			
{% endif %}


{% if presentation_detail.group.all %}
<div class="w3-container">
    <table>
        <hr style="width:100%"> </hr>
    </table>
</div>
<div class='w3-text w3-large' style="color:var(--colheader)">
	<b>Related groups</b>
</div>
	{% include "group_list.html" with group_list=presentation_detail.group.all %}
{% endif %}


{% if presentation_detail.project.all %}
<div class="w3-container">
    <table>
        <hr style="width:100%"> </hr>
    </table>
</div>
<div class='w3-text w3-large' style="color:var(--colheader)">
    <b>Related projects</b>
</div>
{% include "project_list.html" with l=3 m=4 s=6 project_list=presentation_detail.project.all|dictsortreversed:"end_date" %}
			
{% endif %}

{% if presentation_detail.publication.all %}
<div class="w3-container">
    <table>
        <hr style="width:100%"> </hr>
    </table>
</div>
<div class='w3-text w3-large' style="color:var(--colheader)">
    <b>Related publications</b>
</div>
{% include "publication_list.html" with l=3 m=4 s=6 publication_list=presentation_detail.publication.all %}
			
{% endif %}
</div>
<div class="w3-container"></div>
{% endblock %}
{% endblock %}