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

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

{% block head %}

<!-- Primary Meta Tags -->
<meta name="description" property="og:description" content="{{ news_detail.abstract }}">
<meta name="title" content="{{ news_detail.title }}">

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

<!-- Twitter -->
<meta name="twitter:card" content="" />
<meta name="twitter:title" content="{{ news_detail.title }}">
<meta name="twitter:image" content="https://{{ request.get_host }}/{{ news_detail.image }}">
<meta name="twitter:description" content="{{ news_detail.abstract }}">

{% endblock %}

{% block news %}
<a href="{% url 'news' %}" class="w3-bar-item w3-button navbutton" style="border-color:var(--colmenub)!important">news</a>
{% endblock %}

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


{%if news_detail.news_url%}
	<a href="{{news_detail.news_url }}"><div class='w3-xlarge' style="color:var(--colheader)"><b>{{ news_detail.title|safe }}</b></div></a>
	<!-- <a href="{{news_detail.news_url }}"><h1 style="color:var(--colheader)">{{ news_detail.title|safe|linebreaksbr }}</a></h1> -->
{% else %}
	<div class='w3-xlarge' style="color:var(--colheader)"><b>{{ news_detail.title|safe }}</b></div>
	<!-- <h1>{{ news_detail.title|safe|linebreaksbr }}</a></h1> -->
{% endif %}
{% if news_detail.pub_date %}
    <div class='w3-left-align'><b>{{ news_detail.pub_date }}</b></div>
{% endif %}
{% if news_detail.newsfile_set.all %}
<div class="container">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            {% if news_detail.image %}
                <div class="swiper-slide"><img src="/{{news_detail.image}}" style="max-width:100%;max-height:300px;object-fit:contain">
                    <div class="text-block"><small>&copy{{news_detail.copyright}}</small></div>
                </div>
            {% endif %}
            {% for file in news_detail.newsfile_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{{file.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 news_detail.image %}
		
			<div class="container w3-center w3-padding-32" >
				<img src="/{{news_detail.image}}" alt="Cover" style="max-width:100%;max-height:300px; object-fit:contain">
				{% if news_detail.copyright is not None %}
					<div class="text-block w3-round-large">
						<small>&copy{{news_detail.copyright}}</small>
					</div>
				{% endif %}
			</div>
	{% else %}
		<p> </p>
	{% endif %}
{% endif %}
{% if news_detail.image_caption is not None %}
	<div class="container w3-center w3-round-large">
		<small>{{news_detail.image_caption|safe|linebreaksbr}}</small>
	</div>
{% endif %}
{% for file in news_detail.newsfile_set.all %}
    {% if file.get_extension == ".pdf" %}
    <div class="w3-container w3-center w3-padding-32" >
            <a href="/{{ file.file }}">
				<figure>
					<img src="{% static 'icons/pdf.png' %}" class="w3-round-xlarge w3-hover-shadow w3-card" alt="PDF" style="height:50px">
					{% if file.title %}
                        <figcaption>{{file.title}}</figcaption>
                    {% else %}
                    <figcaption>More info</figcaption>
                    {% endif %}
				</figure>
			</a>
        {% if file.copyright %}
            <br>&copy;{{file.copyright}}
        {% endif %}
    </div>
    {% elif file.get_extension == ".mp3" %}
    <div class="w3-container w3-center w3-padding-32" >
        <audio controls style="width:60%">
            <source src="/{{file.file}}" type="audio/mpeg">
            Your browser does not support the audio element.
            </audio> 
        <br>&copy;{{file.copyright}}
    </div>
    {% elif file.get_extension == ".ogg" %}
    <div class="w3-container w3-padding-32" >
        <audio controls style="width:60%">
            <source src="/{{file.file}}" type="audio/ogg">
            Your browser does not support the audio element.
            </audio> 
    </div>
    {% elif file.get_extension == ".wav" %}
    <div class="w3-container w3-center w3-padding-32" >
        <audio controls style="width:60%">
            <source src="/{{file.file}}" type="audio/wav">
            Your browser does not support the audio element.
            </audio> 
    </div>
    {% elif file.get_extension == ".mp4" %}
    <div class="w3-container w3-center w3-padding-32" >
        <video playsinline style="width:60%">
            <source src="/{{file.file}}" type="video/mp4">
        </video>
    </div>
    {% endif %}
{% endfor %}
<div class='w3-large'><p align="justify">{{news_detail.abstract|safe|linebreaksbr}}</p></div>



{% if news_detail.publication.all or news_detail.member.all %}
	<br>
	{% if news_detail.member.all %}
			<br><br>
				<div class='w3-text w3-large' style="color:var(--colheader)">
					<b>Involved people</b>
				</div>

			{% include "member_list.html" with l=3 m=4 s=6 height=150 member_list=news_detail.member.all|dictsort:"status.order_index" %}

		{% endif %}

		{% if news_detail.publication.all %}

			<div class="w3-container"></div>
			<table>
				<hr style="width:100%"> </hr>
			</table>
			<p></p>
			<div class='w3-row w3-large' style="color:var(--colheader)">
				<b>Related Publications</b>
			</div>
			<!--infinite scroll! ex3-->
				<div class="w3-container w3-left-align">
					{% with publication_list=news_detail.publication.all %}
					{% load el_pagination_tags %}
					{% paginate publication_list %}
		
					{% include 'publication_list.html' %}
			
					{% get_pages %}
					{% if pages.paginated %}
						<div class='w3-center'>pages: {% show_pages %}</div>
					{% endif %}
					{% endwith %}
				</div>
		{% endif %}

{% endif %}


{% load social_share %}
{% if news_detail.relatedNews.all %}
	<div class="w3-container"></div>
	<table>
		<hr style="width:100%"> </hr>
	</table>
	<p></p>
	<!--infinite scroll! ex3 -->

	{% if news_detail.relatedNews.all %}
	<h4>Related news</h4>
		{% include "news_list.html" with news_list=news_detail.relatedNews.all %}
	{% endif %}
	
{% endif %}

{% if news_detail.outreach.all %}
	<div class="w3-container"></div>
	<table>
		<hr style="width:100%"> </hr>
	</table>
	<p></p>
	<!--infinite scroll! ex3 -->

	{% if news_detail.outreach.all %}
	<h4>Related outreach</h4>
		{% include "outreach_list.html" with outreach_list=news_detail.outreach.all %}
	{% endif %}
	
{% endif %}
<p></p>
<p></p>
<!-- more info here https://github.com/fcurella/django-social-share sharing on localhost might not work correctly, site needs to be accessible from everywhere-->

	<!-- <div class='w3-large'>
		Share on
	</div>
<div class="w3-quarter">
	<div class='w3-quarter'>
{% post_to_facebook "Latest event: {{event_detail.title}}.Check it out!" "<img src='https://cdn-icons-png.flaticon.com/512/124/124010.png' style='width:40px'>" %}
</div>
<div class='w3-quarter'>
{% post_to_twitter "Latest event: {{event_detail.title}}. Check it out!" " {{request.get_full_path}}" "<img src='https://image.flaticon.com/icons/png/512/124/124021.png' style='width:40px'>" %}
</div> -->
</div>
{% endblock %}
{% endblock %}

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