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


{% block css %}
<link rel="stylesheet" href="{% static 'css/swiper_news.css' %}">
{% endblock %}
{% block head %}

<!-- Primary Meta Tags -->
{% if event_detail.location %}
    <meta name="twitter:description" content='Start: {{ event_detail.startTime|date:"d M Y" }}, {{event_detail.location}}, {{event_detail.description|safe|linebreaksbr}}'>
{% else %}
    <meta name="twitter:description" content='Start: {{ event_detail.startTime|date:"d M Y" }}, {{event_detail.externalLocation}}, {{event_detail.description|safe|linebreaksbr}}'>
{% endif %}
<meta name="title" content="{{ event_detail.title|safe }}">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:image" itemprop="image"  content="" />
<meta property="og:title" content="{{ event_detail.title|safe }}" />
<meta property="og:site_name" content="{{ event_detail.title|safe }}">
<meta property="og:url" content="{{ request.get_full_path }}">

<!-- Twitter -->
<meta name="twitter:card" content="" />
<meta name="twitter:title" content="{{ event_detail.title|safe }}">
<meta name="twitter:image" content="">
{% if event_detail.location %}
    <meta name="twitter:description" content='Start: {{ event_detail.startTime|date:"d M Y" }}, {{event_detail.location}}, {{event_detail.description|safe|linebreaksbr}}'>
{% else %}
    <meta name="twitter:description" content='Start: {{ event_detail.startTime|date:"d M Y" }}, {{event_detail.externalLocation}}, {{event_detail.description|safe|linebreaksbr}}'>
{% endif %}

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

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

{%if event_detail.externalLink %}
	<a href="{{event_detail.externalLink }}" style="text-decoration:none;"><h1>{{ event_detail.title|safe }}</h1></a>
{% else %}
	<h1>{{ event_detail.title|safe }}</h1>
{% endif %}

{% if event_detail.eventfile_set.all %}

<div class="container">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            {% if event_detail.image %}
                <div class="swiper-slide"><img src="/{{event_detail.image}}" style="max-width:100%;max-height:300px;object-fit:contain">
                    <div class="text-block"><small>&copy{{event_detail.copyright}}</small></div>
                </div>
            {% endif %}
            {% for file in event_detail.eventfile_set.all %}
                {% if file.get_extension == ".jpg" or  file.get_extension == ".jpeg" or file.get_extension == ".png"%}
                    <div class="swiper-slide"><img src="/{{file.file}}"  style="max-width:100%;max-height:300px;object-fit:contain">
                        <div class="text-block"><small>&copy{{ event_detail.copyright }}</small></div>
                    </div>
                {% endif %}    
            {% endfor %}
        </div>

	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-pagination w3-padding-24"></div>
    </div>
</div>
{% else %}
	{% if event_detail.image %}
		<div class="w3-container w3-center w3-padding-32" >
			<img src="/{{event_detail.image}}" alt="Cover" style="width:60%">
		</div>
	{% else %}
			<p> </p>
	{% endif %}
{% endif %}
{% if not event_detail.startTime < event_detail.endTime %}
	<div class='w3-large'>
	Start: <b>{{ event_detail.startTime|date:"d M Y" }}</b>
	</div>
{% else %}
	<div class='w3-large'>
	Start: <b>{{ event_detail.startTime|date:"d M Y" }}</b> | End: <b>{{ event_detail.endTime|date:"d M Y" }}</b>
	</div>
{% endif %}

<div class='w3-large'>
	{% if event_detail.externalLocation %}
		{% if event_detail.location %}
			Location: <a href="{{ event_detail.externalLocation }}">{{event_detail.location}}</a>
		{% else %}
			Location: <a href="{{ event_detail.externalLocation }}">{{event_detail.externalLocation}}</a>
		{% endif %}
		{% if event_detail.room %}
			<br>
		{% endif %}
	{% endif %}
	
	{% if event_detail.room %}
		Room: {{ event_detail.room }}
	{% endif %}
</div>
<div class='w3-large'>	
	{% if event_detail.video_conf %}
		Online: <a href="{{event_detail.video_conf}}">{{ event_detail.video_conf }}</a>
	{% endif %}
</div>
{% if event_detail.organizers %}
<div class='w3-large'>
	Organized by: <b>{{ event_detail.organizers }}</b>
</div>
{% endif %}
{% if event_detail.externalLink %}
<div class='w3-large'>
	More info: <a href="{{ event_detail.externalLink }}">{{event_detail.externalLink}}</a>
</div>
{% endif %}
{% if event_detail.announcement %}
<div class='w3-large'>
	Announcement:
    <a href="/{{ event_detail.announcement }}">
        <figure>
            <img src="{% static 'icons/pdf.png' %}" class="w3-round-xlarge w3-hover-shadow w3-card" alt="PDF" style="height:50px">
        </figure>
    </a>
</div>
{% endif %}
<div class="w3-container"></div>
<table>
	<hr style="width:100%"> </hr>
</table>
<div class='w3-large'><p align="justify">{{event_detail.description|safe|linebreaksbr}}</p></div>
<div class="w3-container"></div>
<table>
	<hr style="width:100%"> </hr>
</table>
<div class='w3-large'>
	{% if event_detail.eventfile_set.count == 1 %}
		<b>Download:</b>
	{% elif event_detail.eventfile_set.count == 2 %}	
		<b>Downloads:</b>
	{% endif %}
	{% for file in event_detail.eventfile_set.all %}
		{% if forloop.first and not forloop.last %}
			<a href="/{{ file.file }}">{{ file.title }}</a>,
		{% elif not forloop.last %}
			<a href="/{{ file.file }}"> {{ file.title }}</a>,
		{% else %}
			<a href="/{{ file.file }}">{{ file.title }}</a>
		{% endif %}
	{% endfor %}
</div>


<!-- more info here https://github.com/fcurella/django-social-share sharing on localhost might not work correctly, site needs to be accessible from everywhere-->
{% if event_detail.relatedEvents.all %}
	<div class="w3-container"></div>
	<table>
		<hr style="width:100%"> </hr>
	</table>
	<p></p>
	<!--infinite scroll! ex3 -->

	{% if event_detail.relatedEvents.all %}
	<h4>Related events</h4>
		{% include "event_list.html" with event_list=event_detail.relatedEvents.all %}
	{% endif %}
	
{% endif %}
<p></p>
<p></p>
{% load social_share %}

	<div class='w3-large'>
		Share
	</div>
<div class="w3-quarter">	
<div class='w3-quarter'>
{% static 'icons/twitter-logo-black.png' as icon_url %}
{% with icon_html='<img src="'|add:icon_url|add:'" style="width:40px">' %}
    {% post_to_twitter "Latest event: {{event_detail.title}}. For more details see:"  request.get_full_path icon_html %}
{% endwith %}
</div>
</div>

{% endblock %}
{% endblock %}

{% block javascripts %}
<script src="{% static 'javascript/swiper_news.js' %}"></script>
{% endblock %}