{% extends "base_generic.html" %}

{% block head %}

<!-- Primary Meta Tags -->
<meta name="description" property="og:description" content="Lectures offered by the Chair Materials Science and Nanotechnology, TU Dresden">
<meta name="title" content="Lectures offered by the Chair Materials Science and Nanotechnology, TU Dresden">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:image" itemprop="image"  content="" />
<meta property="og:title" content="Lectures offered by the Chair Materials Science and Nanotechnology, TU Dresden" />
<meta property="og:site_name" content="Lectures offered by the Chair Materials Science and Nanotechnology, TU Dresden">
<meta property="og:url" content="{{ request.get_full_path }}">

<!-- Twitter -->
<meta name="twitter:card" content="" />
<meta name="twitter:title" content="Lectures offered by the Chair Materials Science and Nanotechnology, TU Dresden">
<meta name="twitter:image" content="">
<meta name="twitter:description" content="Lectures offered by the Chair Materials Science and Nanotechnology, TU Dresden">

{% endblock %}

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


{% block content0 %}
{% load static %}
<style>
	/* Slideshow container */
	.slideshow-container {
/*	  width: 100%;*/
/*     max-height: 800px;*/
	   height: 40%;
/*	  position: relative;*/
/*	  margin: auto;*/
/*	  margin-top: 128px;*/
		position: absolute;
/*		    top: 128px; right: 0; bottom: 0; left: 0;*/
			top: 70px; right: 0; bottom: 0; left: 0;
/*		    border: 10px solid orange*/
	}

.mySlides {
    object-fit: cover;
/*			position: absolute;*/
			z-index:0;
			width: 100%;
			height: 100%;
			text-align: center;
/*			max-height: 700px;*/
}

.mySlidesImg {
    object-fit: cover;
			z-index:0;
			width: 100%;
			height: 100%;
			text-align: center;
/*			max-height: 700px;*/
}

.mySlidesVid {
	object-fit: cover;
			z-index:0;
			width: 100%;
			height: 100%;
			text-align: center;
/*			max-height: 700px;*/
}



.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:20px;width:20px;padding:0}
</style>

<div class='w3-center slideshow-container w3-display-container'>
<div class="mySlides" >
	<video autoplay muted loop playsinline class="mySlidesVid">
		<source src="/uploads/main/img/VideoSolmar_X1_EhdP6fZ.mp4" type="video/mp4">
	</video>
</div>
</div>

{% endblock %}

{% block content %}
{% block small %}
<div style='height: 38vh; background:rgba(255,255	,255,0.5);z-index:-2'>
</div>

<h1>Teaching Courses</h1>
<ul class='listView'>
	{% for course in teaching_course_list %}
	{% ifchanged course.semester.name %}
		<h4 class="w3-left-align">{{course.semester.name}}</h4>
	{% endifchanged %}
		{% if course.semester %}
		<a href="{{ course.get_absolute_url }}">  
		<li class='listView'>
			<div class="w3-row w3-hover-shadow">
				<div class="w3-col w3-padding w3-card w3-round">
					{% if course.image %}
					<div class="w3-container w3-right">
						<img src="/{{ course.image }}" alt="Cover" height="80">
					</div>
					{% endif %}
					<div style="color:var(--colheader)" class='w3-large'><b>{{ course.name|safe }}</b></div>
					<b>{% for person in course.all_persons %}{% if forloop.first %} {{ person.name }} {% else %}, {{ person.name }}{% endif %}{% endfor %}</b>
					| <i>{{ course.semester.name }}</i>
				</div>
			</div>
		</li></a>
		{% endif %}
	{% endfor %}
</ul>
{% endblock %}
{% endblock %}