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

{% block head %}

<!-- Primary Meta Tags -->
<meta name="description" property="og:description" content="{{ open_job_detail.open_job_section_set.all.0.text|safe }}">
<meta name="title" content="{{ open_job_detail.title|safe }}">

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

<!-- Twitter -->
<meta name="twitter:card" content="" />
<meta name="twitter:title" content="{{ open_job_detail.title|safe }}">
<meta name="twitter:image" content="https://{{ request.get_host }}/{{ open_job_detail.cover_image }}">
<meta name="twitter:description" content="{{ open_job_detail.open_job_section_set.all.0.text|safe }}">

{% endblock %}

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

{% load static %}

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


<h1>{{ open_job_detail.title|safe }}{% if open_job_detail.pdf_file %}
		<a href="/{{ open_job_detail.pdf_file }}" class="btn btn-dark float-right"> <img src="{% static 'icons/pdf.png' %}" class="w3-round-xlarge w3-hover-shadow w3-card" alt="PDF" style="height:50px"></a>
	{% endif %}</h1>
	
<!--space left and right for mobile device -->
<div style='padding:0px 5px 0px 5px'> 
<div class='w3-row'>	
    <div class='w3-half'>	
        {% if open_job_detail.appDeadline and open_job_detail.show_appDeadline %}
        <div class="w3-left-align w3-large" style="color:var(--colheader)">
        <b>Application deadline: {{open_job_detail.appDeadline}}</b>
        </div>
        {% endif %}

        <div ><b>{% for type in open_job_detail.job_type.all %}{% if forloop.first %} {{ type.name }}{% else %}, {{ type.name }}{% endif %}{% endfor %}</b></div>


        <div class="w3-left-align">
            <table>
                {% if open_job_detail.salaryScale %}
                    {% if open_job_detail.salaryScale_url %}
                        <tr><td>Salary:</td> <td><a href="{{ open_job_detail.salaryScale_url }}" target="_blank" rel="noopener noreferrer">{{open_job_detail.salaryScale}}</a> {% if open_job_detail.salaryScale_range %}({{open_job_detail.salaryScale_range|safe}}){% endif %}</td></tr>
                    {% else %}
                    <tr><td>Salary:</td> <td>{{open_job_detail.salaryScale}} {% if open_job_detail.salaryScale_range %}({{open_job_detail.salaryScale_range|safe}}){% endif %}</td></tr>
                    {% endif %}
                {% endif %}
                {% if open_job_detail.toBeFilledDate %}
                <tr><td>Employment begins:</td><td>{{open_job_detail.toBeFilledDate}}</td></tr>
                {% else %}
                <tr><td>Employment begins:</td><td>At the next possible date</td></tr>
                {% endif %}
                {% if open_job_detail.duration %}
                <tr><td>Duration:</td> <td>{{open_job_detail.duration}}</td></tr>
                {% endif %}
                {% if open_job_detail.emailContact %}
                <tr><td>Contact:</td> <td><a href="mailto:{{open_job_detail.emailContact}}">{{open_job_detail.emailContact}}</a></td></tr>
                {% endif %}
            </table>
        </div>
    </div>
	<div class="w3-center w3-half">	
		{% if open_job_detail.cover_image %}
		<div class="container w3-center" >
			<img src="/{{open_job_detail.cover_image}}" alt="Cover" style="max-width:90%;max-height:300px">
			{% if open_job_detail.copyright %}
				<div class="text-block w3-round-large"><small>&copy{{open_job_detail.copyright}}</small></div>
			{% endif %}
		</div>
		{% else %}
				<p> </p>
		{% endif %}
	</div>

</div>


<div class="w3-container">
    <table>
        <hr style="width:100%"> </hr>
    </table>
</div>

{% for job in open_job_detail.open_job_section_set.all %}

    {% if job.title %}
    <div class='w3-text w3-large' style="color:var(--colheader)">
        <b>{{ job.title }}</b>
    </div>
    {% endif %}
    {% if job.text %}
    <div class='w3-text'><p align="justify">{{ job.text|safe|linebreaksbr }}</p></div>
    {% endif %}
    {% if job.image %}
        <div class="w3-center">
            <img src="/{{job.image}}" class="w3-round-xlarge" alt="{{ job.image }}" style="max-width:100%;max-height:250px;">
        </div>
        {% if job.copyright %}<div class="container w3-center w3-round-large"><small>&copy{{job.copyright}}</small></div>{% endif %}
    {% endif %}
{% endfor %}


{% if open_job_detail.hint %}

<div class='w3-text w3-large' style="color:var(--colheader)">
	<b>Further information</b>
</div>
<div class='w3-left-align'>
    <p align="justify">{{open_job_detail.hint|safe|linebreaksbr}}</p></div>
{% endif %}

{% if open_job_detail.mailContactChair %} 
<div class='w3-text w3-large' style="color:var(--colheader)">
	<b>Mail contact</b>
</div>
<div class="w3-left-align">
    {% if open_job_detail.mailContactMain %}
    {{open_job_detail.mailContactMain}}<br>
    {% endif %}
    {% if open_job_detail.mailContactFaculty %}
    {{open_job_detail.mailContactFaculty}}<br>
    {% endif %}
    {% if open_job_detail.mailContactInstitute %}
    {{open_job_detail.mailContactInstitute}}<br>
    {% endif %}
    {% if open_job_detail.mailContactChair %}
    {{open_job_detail.mailContactChair}}<br>
    {% endif %}
    {% if open_job_detail.mailContactProf %}
    <b>{{open_job_detail.mailContactProf}}</b><br>
    {% endif %}
    {% if open_job_detail.mailContactAddress %}
    {{open_job_detail.mailContactAddress|safe|linebreaksbr}}
    {% endif %}
    <br><br>
    {% if open_job_detail.contactInfo %}
    <p align="justify">{{open_job_detail.contactInfo|safe|linebreaksbr}}</p>
    {% endif %}
    <a href="mailto:{{open_job_detail.emailContact}}?subject=application as {{open_job_detail.title|safe}}" class="w3-button w3-round-large" style='background-color:var(--colheader);color:white'>
					contact   <i class="fas fa-envelope w3-xlarge " style='padding-left:10px' ></i></a>
</div>
{% endif %}
        <div class="w3-left-align">

                {% for url in open_job_detail.open_job_url_set.all %}
                    {% if forloop.first %}
<b>References: </b><a href="{{ url.url }}" target="_blank" rel="noopener noreferrer">{% if url.title %}{{url.title}}{% else %}{{ url.url }}{% endif %}</a>
                    {% else %}
                        , <a href="{{ url.url }}" target="_blank" rel="noopener noreferrer">{% if url.title_url %}{{url.title_url}}{% else %}{{ url.url }}{% endif %}</a>
                    {% endif %}
					</tr>
                {% endfor %}
        </div>
{% if open_job_detail.supervisor.all %}
<div class="w3-container">
</div>

{% with supervisor_list=open_job_detail.supervisor.all|dictsort:"status.order_index" %}
<div class='w3-text w3-large w3-padding-16' style="color:var(--colheader)">
    {% if open_job_detail.appDeadline and open_job_detail.show_appDeadline %}
        <b>Host     </b>
    {% elif not open_job_detail.show_appDeadline %}
        <b>Team     </b>
    {% endif %}

</div>
{% include "member_list.html" with l=3 m=4 s=6 height=150 member_list=supervisor_list %}
{% endwith %}
			
{% endif %}


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


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

</div>
<div class="w3-container"></div>
{% endblock %}
{% endblock %}