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

{% block head %}
{% if member_detail.meta_tags %}
<!-- Primary Meta Tags -->
<meta name="title" content="{{ member_detail.name }} ({{ member_detail.status }})">
<meta name="description" property="og:description" content="{{ member_detail.bio }}">


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

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{ member_detail.name }} ({{ member_detail.status }})">
<meta name="twitter:image" content="https://{{ request.get_host }}/{{ member_detail.image }}">
<meta name="twitter:description" content="{{ member_detail.bio }}">
{% endif %}
{% 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 %}

{% block content %}
{% block small %}
<link rel="stylesheet" href="{% static 'css/qr_popup.css' %}">
<div class="w3-half w3-center">
	<img src="/{{ member_detail.image }}" class="w3-round-xlarge" alt="{{ member_detail.last_name }}" style="height:250px">
	<div>
		<p>
            {% if member_detail.tud_fis %}
				<a href='{{ member_detail.tud_fis }}' rel="noopener noreferrer"><img src="{% static 'icons/logo_fis_text.svg' %}" alt="Gepris" style="height:25px"></a>
			{% endif %}
            {% if member_detail.gepris %}
				<a href='{{ member_detail.gepris }}' rel="noopener noreferrer"><img src="{% static 'icons/GEPRIS_Logo.png' %}" alt="Gepris" style="height:25px"></a>
			{% endif %}
			{% if member_detail.orcid %}
				<a href='{{ member_detail.orcid }}' rel="noopener noreferrer"><img src="{% static 'icons/orcid.png' %}" alt="ORCID" style="height:25px"></a>
			{% endif %}
			{% if member_detail.googlescholar %}
				<a href='{{ member_detail.googlescholar }}' rel="noopener noreferrer"><img src="{% static 'icons/google_scholar.png' %}" alt="Google Scholar" style="height:25px"></a>
			{% endif %}
			{% if member_detail.scopus %}
				<a href='{{ member_detail.scopus }}' rel="noopener noreferrer"><img src="{% static 'icons/scopus.png' %}" alt="Scopus" style="height:25px"></a>
			{% endif %}
			{% if member_detail.linkedin %}
				<a href='{{ member_detail.linkedin }}' rel="noopener noreferrer"><img src="{% static 'icons/linkedin.png' %}" alt="Linkedin" style="height:25px"></a>
			{% endif %}
			{% if member_detail.xing %}
				<a href='{{ member_detail.xing }}' rel="noopener noreferrer"><img src="{% static 'icons/xing.png' %}" alt="Xing" style="height:25px"></a>
			{% endif %}
			{% if member_detail.researchgate %}
				<a href='{{ member_detail.researchgate }}' rel="noopener noreferrer"><img src="{% static 'icons/researchgate.png' %}" alt="ResearchGate" style="height:25px"></a>
			{% endif %}
			{% if member_detail.researcher_id %}
				<a href='{{ member_detail.researcher_id }}' rel="noopener noreferrer"><img src="{% static 'icons/researcherid.png' %}" alt="publons" style="height:25px"></a>
			{% endif %}
			{% if member_detail.research %}
				<a href='{{ member_detail.research }}' rel="noopener noreferrer"><img src="{% static 'icons/research.png' %}" alt="Research" style="height:25px"></a>
			{% endif %}
			{% if member_detail.adscientificindex %}
				<a href='{{ member_detail.adscientificindex }}' rel="noopener noreferrer"><img src="{% static 'icons/ad_scientific_index.png' %}" alt="Ad scientific index" style="height:25px"></a>
			{% endif %}
			{% if member_detail.web_of_science %}
				<a href='{{ member_detail.web_of_science }}' rel="noopener noreferrer"><img src="{% static 'icons/clarivate_400x400.jpg' %}" alt="Web of science" style="height:25px"></a>
			{% endif %}
            {% if member_detail.scholar_gps %}
            <a href='{{ member_detail.scholar_gps }}' rel="noopener noreferrer"><img src="{% static 'icons/scholar_gps_logo.jpg' %}" alt="Scholar Gps" style="height:25px"></a>
            {% endif %}
            {% if member_detail.github %}
				<a href='{{ member_detail.github }}' rel="noopener noreferrer"><img src="{% static 'icons/GitHub-Mark-32px.png' %}" alt="Github" style="height:25px"></a>
			{% endif %}
            {% if member_detail.twitter %}
                <a href='{{ member_detail.twitter }}' rel="noopener noreferrer"><img src="{% static 'icons/twitter-logo-black.png' %}" alt="Twitter" style="height:25px"></a>
            {% endif %}
            {% if member_detail.bluesky %}
                <a href='{{ member_detail.bluesky }}' rel="noopener noreferrer"><img src="{% static 'icons/bluesky_logo.png' %}" alt="Bluesky" style="height:25px"></a>
            {% endif %}
            {% if member_detail.instagram %}
                <a href='{{ member_detail.instagram }}' rel="noopener noreferrer"><img src="{% static 'icons/instagram_logo.png' %}" alt="Instagram" style="height:25px"></a>
            {% endif %}
            {% if member_detail.wiki %}
                <a href='{{ member_detail.wiki }}' rel="noopener noreferrer"><img src="{% static 'icons/Wikipedia-logo-v2.svg.png' %}" alt="Wikipedia" style="height:25px"></a>
            {% endif %}
		</p>
	</div>
</div>
<div class="w3-half">
    {% if member_detail.prenominal %}
        <div class='w3-medium' style="color:var(--colheader)">{{ member_detail.prenominal.name }}</div>
    {% endif %}
	<div class='w3-xlarge' style="line-height: 1.2em; color:var(--colheader)">{{ member_detail.given_name }} {{ member_detail.last_name }}
    </div>
    {% if member_detail.postnominal_set.all %}
        <div class='w3-medium'>
            {% for post in member_detail.postnominal_set.all %}{% if forloop.first %}<a href="{{post.url}}" style="text-decoration: none;color:var(--colheader)">{{post.letters}}</a>{% else %}, <a href="{{post.url}}" style="text-decoration: none;color:var(--colheader)">{{post.letters}}</a>{% endif %}{% endfor %}
        </div>
    {% endif %}
	{% if member_detail.status %}
		<p>{% if not member_detail.active %}Former {% endif %}{% if not "unknown" in member_detail.status.name %}{{ member_detail.status|capfirst }}{% else %}Team member{% endif %}</p>
	{% endif %}
    
	<table style="width:100%" class='w3-large'>
		{% if member_detail.visitor or not member_detail.active %}
            {% if member_detail.entry_date and member_detail.exit_date %}
                <tr><td>Stay period:</td><td>{{member_detail.entry_date}} - {{member_detail.exit_date}}</td></tr>
            {% else %}
                {% if member_detail.exit_date %}
                    <tr><td>Exit date:</td><td>{{member_detail.entry_date}} - {{member_detail.exit_date}}</td></tr>
                {% endif %}
            {% endif %}
        {% endif %}
        {% if not member_detail.active %}
            {% if member_detail.status_extern and not "unknown" in member_detail.status_extern.name and not "Unknown" in member_detail.status_extern.name %}
                <tr class="spacingBottom"><td class="spacingRight">Now:</td>
                    <td>{{ member_detail.status_extern|capfirst }}{% if member_detail.organisation_extern %} at {{ member_detail.organisation_extern }}{% endif %}</td>
                </tr>
            {% endif %}
		{% endif %}
        {% if not member_detail.active %}
            {% if member_detail.url_extern %}
                <tr class="spacingBottom"><td class="spacingRight">Link to external profile:</td>
                    <td><a href="{{ member_detail.url_extern }}">{% if member_detail.url_label_extern %}{{ member_detail.url_label_extern }}{% else %}{{ member_detail.url_extern }}{% endif %}</a></td>
                </tr>
            {% endif %}
		{% endif %}
        {% if member_detail.active %}
            {% if user.is_authenticated %}
                {% if member_detail.job_mail %}
                    <tr class="spacingBottom"><td class="spacingRight">E-Mail:</td>
                        <td>{{ member_detail.job_mail }}</td>
                    </tr>
                {% endif %}
            {% endif %}
        {% endif %}

        {% if member_detail.active %}
            {% if member_detail.job_phone %}
                <tr class="spacingBottom"><td class="spacingRight">Phone:</td>
                    <td>{{ member_detail.job_phone|make_list|slice:"0:3"|join:'' }} {{ member_detail.job_phone|make_list|slice:"3:6"|join:'' }} {{ member_detail.job_phone|make_list|slice:"6:"|join:'' }}</td>
                </tr>
            {% endif %}
		{% endif %}
		{% if member_detail.active %}
            <tr class="spacingBottom">{% if member_detail.room.all %}
                <td class="spacingRight">Room:</td>{% endif %}
                <td>{% for memroom in member_detail.room.all %}
                        {% if not forloop.first %}
                            {% ifchanged memroom.name %}, {% endifchanged %}
                        {% endif %}
                        <a href='{{ memroom.building.location_navigator }}'>{{ memroom.building }}</a> <a href='{{ memroom.location_navigator }}'>{{ memroom.name }}</a>{% endfor %}
                </td>
            </tr>
        {% endif %}
		<tr class="spacingBottom">{% if member_detail.group.all %}
			<td class="spacingRight">Group:</td>{% endif %}
			<td>{% for memgroup in member_detail.group.all %}
					{% if not forloop.first %}
						{% ifchanged memgroup.name %},<br>{% endifchanged %}
					{% endif %}
					<a href='{{ memgroup.get_absolute_url }}'>{{ memgroup.name }}</a>
				{% endfor %}
			</td>
		</tr>
        {% if user.is_authenticated %}
        {% if member_detail.tac %}
        <tr class="spacingBottom"><td class="spacingRight">Next TAC meeting:</td>
            <td>{{ member_detail.tac }}</td>
        </tr>
        {% endif %}
        {% if member_detail.thesis_defense %}
        <tr class="spacingBottom"><td class="spacingRight">Thesis defense at:</td>
            <td>{{ member_detail.thesis_defense }}</td>
        </tr>

        {% endif %}
        {% endif %}
        
        {% if member_detail.active %}
            <tr class="spacingBottom">
                <td style="vertical-align: middle;">
                    <div class='w3-hide-small w3-hide-medium'>
                        <strong>Download contact:</strong>
                    </div>
                </td>
                
                <td style="vertical-align: middle;">
                    <div class='w3-hide-small w3-hide-medium'>
                        <img id="myImg" src="{{file_name_qr_code}}" alt="" style="height:70px">
                        <div id="myModal" class="modal">
                            <!-- The Close Button -->
                            <span class="close">&times;</span>
                    
                            <!-- Modal Content (The Image) -->
                            <img class="modal-content" id="img01" style="max-height:500px;max-width:500px;object-fit: scale-down">
                            <div class="w3-center" style="color: #ccc;">
                                <a href="{% url 'export_vcard' member_detail.id %}"><p><strong>Download v-card</a></strong><br></a>
                            </div>
                            <!-- Modal Caption (Image Text) -->
                            <!-- <div id="caption"></div>-->
                        </div>
                    </div>
                </td>
            </tr>
        {% endif %}
    </div>
         
       
	</table>
    

</div>
{% if member_detail.active %}
<div class='w3-half w3-center w3-hide-large'><img  src="{{file_name_qr_code}}" alt="" style="height:250px">  

    <div class=" w3-center w3-hide-large" style="color: black">
        <a href="{% url 'export_vcard' member_detail.id %}"><p><strong>Download v-card</a></strong><br></a>
    </div>

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


{% if member_detail.bio %}
	<div class="w3-container"></div>
		<table>
			<hr style="width:100%"> </hr>
		</table>	
	<div class="w3-container w3-left-align w3-large">
		<p align="justify">{{ member_detail.bio|safe|linebreaksbr}}</p>
	</div>
{% endif %}
<br><br>
	<div class="w3-container"></div>
	<table>
		<hr style="width:100%"> </hr>
	</table>
	<p></p>
	{% if member_detail.publication.all %}
	<h4>Publications</h4>
	<div class="w3-container w3-left-align ex3">
		{% with publication_list=member_detail.publication.all %}
			{% load el_pagination_tags %}
			{% paginate 10 publication_list %}
	
			{% include 'publication_list.html'  %}
	
			{% get_pages %}
			{% if pages.paginated %}
				<div class='w3-center'>pages: {% show_pages %}</div>
			{% endif %}
		{% endwith %}
	</div>
	{% endif %}


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

	{% if member_detail.news.all %}
	<h4>News</h4>
		{% include "news_list.html" with news_list=member_detail.news.all %}
	{% endif %}
	
{% endif %}

{% endblock %}
{% endblock %}

{% block javascripts %}
<script src="{% static 'javascript/swiper_news.js' %}"></script>
 
<script>
    // Get the modal
    var modal = document.getElementById("myModal");
    
    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
    }
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    } 
</script>


{% endblock %}