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


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

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


<h1>{{ outreach_detail.title|safe }}</h1>
	
<!--space left and right for mobile device -->
<div style='padding:0px 5px 0px 5px'> 
	
{% if outreach_detail.date %}
<div class="w3-left-align w3-large" style="color:var(--colheader)">
<b>{{outreach_detail.date}}</b>
</div>
{% endif %}

	<div class="w3-center">
		{% if outreach_detail.image %}
		<div class="w3-center">
			<img src="/{{outreach_detail.image}}" alt="" style="max-width:70%;max-height:300px">
			{% if outreach_detail.copyright %}
            <div class="container w3-center" >
				<div class="text-block w3-round-large"><small>&copy{{outreach_detail.copyright}}</small></div>
			</div>
            {% endif %}
		</div>
		{% else %}
            {% if outreach_detail.image_url %}
            <div class="container w3-center">
                <img src="{{ outreach_detail.image_url }}" class="w3-padding-16" alt="" style="max-width:100%;max-height:400px;vertical-align: middle">
                <div class="text-block w3-round-large"><small>&copy{{outreach_detail.image_url}}</small></div>
            </div>
            {% endif%}
		{% endif %}
	</div>




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

{% if outreach_detail.article %}
<div class="w3-container">
    <table>
        <hr style="width:100%"> </hr>
    </table>
</div>
<div class='w3-text w3-large' style="color:var(--colheader)">
	<b>Full article</b>
</div>
<div class='w3-left-align'>
    <p align="justify">{{outreach_detail.article|safe|linebreaksbr}}</p></div>
{% endif %}

{% if outreach_detail.article_url %}
<div class='w3-left-align'>Link to the source: <a href="{{outreach_detail.article_url}}">{{outreach_detail.article_url}}</a></div>
{% endif %}
{% if outreach_detail.outreachpdf_set.all %}
<div class='w3-left-align'>Download:
{% for c_pdf in outreach_detail.outreachpdf_set.all %}
    {% if c_pdf.get_extension == ".pdf" %}
        <a href="/{{ c_pdf.pdf }}">
            <figure>
                <img src="{% static 'icons/pdf.png' %}" class="w3-round-xlarge w3-hover-shadow w3-card" alt="PDF" style="height:50px">
                <figcaption>{{ c_pdf.title}}</figcaption>
            </figure>
        </a>
    {% elif c_pdf.get_extension == ".ppt" or c_pdf.get_extension == ".pptx" %}
        <a href="/{{ c_pdf.pdf }}">
            <figure>
                <img src="{% static 'icons/Microsoft_Office_PowerPoint_64px.png' %}" class="w3-round-xlarge w3-hover-shadow w3-card" alt="PPT" style="height:50px">
                <figcaption>{{ c_pdf.title}}</figcaption>
            </figure>
        </a>
    {% endif %}
{% endfor %}
</div>
{% endif %}


{% if outreach_detail.member.all %}
<div class="w3-container w3-padding-32">

</div>

{% with member_list=outreach_detail.member.all|dictsort:"status.order_index" %}
<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=member_list %}
{% endwith %}
			
{% endif %}


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

{% if outreach_detail.news.all %}
<div class="w3-container w3-padding-32">
</div>
<div class='w3-text w3-large' style="color:var(--colheader)">
	<b>News</b>
</div>
    {% include "news_list.html" with news_list=outreach_detail.news.all %}
{% endif %}


{% if outreach_detail.project.all %}
<div class="w3-container w3-padding-32">
</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=outreach_detail.project.all|dictsortreversed:"end_date" %}
			
{% endif %}

{% if outreach_detail.publication.all %}
<div class="w3-container w3-padding-32">
</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=outreach_detail.publication.all %}
			
{% endif %}
</div>
<div class="w3-container"></div>
{% endblock %}
{% endblock %}