{% extends 'base.html' %}
{% import 'status/status-macros.twig' as status %}

{% block title %}Office and locations{% endblock %} 

{% block additional_header %}
	<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

	<script src="{{ asset_path }}/js/jquery.js"></script>
	<script src="{{ asset_path }}/js/jquery.timeago.js"></script>
		
	<!-- embed LeafletJS (embeddable OpenStreetmap) -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

	<style type="text/css">
		#map { height: 25em; }
		img.status {
			border-radius: 6px 0 0 6px;
			float: left;
			margin: -15px 30px -15px -15px;
			max-height: 188px;
			max-width: 40%;
		}

		div.panel.status h3 {
			font-family: Georgia,serif;
			margin-bottom: 0; margin-top: 5px;
		}
		div.panel.status p.secondary {
			font-size: 16px; margin: 0;
		}
		div.panel.status p.aux {
			margin-top: 2em;
			color: #5E5E5E;
		}

	</style>

	<!-- serve the initial data -->
	<script>
		var status_options={{ status.options2json('status/options.ini') }};
		var current_status={{ status.current2json('status/current-status.txt') }};
	</script>

	<!-- embedded campus map -->
	<script src="map.js"></script>
{% endblock %}

{#
{% block department %}
	<span class="departmentTitle">Status Internal</span>
{% endblock %}
#}

{% block sidebar_header %}
	<ul class="nav nav-onetab">
		<li><a href="/~koeppel/"><i class="fa fa-chevron-up"></i> Köppel</a>
		<li class="visible-xs"><a href="#talks"><i class="fa fa-chevron-right"></i> Talks</a></li>
	</ul>
{% endblock %}

{% block main_column %}
	{% block status_content %}
		<h2>How to find me</h2>
		<p>This page should be updated on a regular level during working hours and indicate where you can meet me.</p>
		{% for key, val in parse_ini_file('status/current-status.txt', true) %}{# pseudo for loop #}
			{% if val.date|date('m/d/Y') != "now"|date('m/d/Y') %}
				<div class="alert alert-warning" role="alert"><strong>Old location!</strong> The following information is most likely superseded, as it is from {{ val.date|date('M d, Y') }}.</div>
			{% endif %}
			<div class="panel panel-box status status-{{ key }}">
				<div class="panel-body">
					{% if val.picture %}
						<img src="status/{{val.picture}}" class="status hidden-sm hidden-xs" style="max-width:100%;">
					{% endif %}
					<p class="secondary"><time class="timeago" datetime="{{ val.date|date('c') }}">{{ val.date }}</time>:</p>
					<h3>{{ val.loc }}
						<span class="pull-right">
			
						</span>
					</h3>
					<p class="secondary">{{ val.secondary }}</p>
					{% if val.phone %}
					<p class="aux">Do not hesitate to call me at <a href="tel:{{ val.phone }}">{{val.phone}}</a></p>
					{% else %}
					<p class="aux">To reach me, just drop me a message by mail (<em>lastname</em>@th.physik.uni-frankfurt.de).</p>
					{% endif %}
				</div>
			</div>
		{% endfor %}

		<h2>The campus</h2>
		<p>A map locating frequent positions</p>
		<div class="panel panel-box"><!-- to get the shadow and radius -->
			<div id="map" style="border-radius: 6px;"></div>
		</div>
		

	{% endblock %}
{% endblock main_column %}

{% block sidebar %}
	<div class="panel panel-sidebar">
		<h2>Debugging status</h2>
		<div class="panel-body">
			<span class="caret"></span>
<pre>
{% for key, val in parse_ini_file('status/current-status.txt', true) %}{# pseudo for loop #}
Status: {{key}}
{% for k,v in val %}
{{k}}: {{v}}
{% endfor %}
{% endfor %}
</pre>
		</div>
	</div>

	<div class="panel panel-sidebar">
		<h2>Locations</h2>
		<div class="panel-body">
			<span class="caret"></span>
			Find all addresses on <a href="../">my homepage</a>.

			<p><strong>How to find us</strong> descriptions
			<ul class="icons">
				<li><a href="http://fias.uni-frankfurt.de/en/how-to-find-us/"><i></i> from/to FIAS</a>
				<li><a href="https://www.uni-frankfurt.de/42605927/Lageplan-Campus-Riedberg"><i></i> from/to Physics building</a>
				<li><a href="https://www.ub.uni-frankfurt.de/bnat/bnat_so.html"><i></i> from/to BNat (library)</a>
			</ul>
		</div>
	</div>
{% endblock %}