<!DOCTYPE html>
<html>
<head>
<title>Zoomový rozvrh ZŠ Dobřichovice</title>
<link rel=stylesheet href="{{ url_for('static', filename='mffzoom.css') }}?v=1" type='text/css' media=all>
</head>
<body>
<h1>Zoom ZŠ Dobřichovice</h1>
<form id=f method=GET action="?">
<label for=date>Datum:</label>
<input id=date type=date name=date step=1 value="{{ g.date }}">
<button type=button onclick="document.getElementById('date').stepDown(); document.getElementById('f').requestSubmit()">←</button>
<button type=button onclick="document.getElementById('date').stepUp(); document.getElementById('f').requestSubmit()">→</button>
<select name=hours>
<option value=0{{ " selected" if g.hours==0 else "" }}>Školní hodiny</option>
<option value=1{{ " selected" if g.hours==1 else "" }}>Celý den</option>
</select>
<input type=submit name=submit value="Odeslat">
</form>
<h2>Rozvrh na {{ g.dow }} {{ g.date }}</h2>
<div id=heading>
{% for r in g.room_boxes %}
<div class=roomhead style='position: absolute; left: {{ r.x }}px; top: 0px; width: {{ r.w }}px;'>
<p>{{ r.name }}</p>
</div>
{% endfor %}
</div>
<div id=schedule>
{% for r in g.room_boxes %}
<div class=room style='position: absolute; left: {{ r.x }}px; top: 0px; width: {{ r.w }}px; height: {{ r.h }}px;'></div>
{% endfor %}
{% for h in g.slot_boxes %}
<div class=slot style='position: absolute; left: {{ h.x }}px; top: {{ h.y }}px; width: {{ h.w }}px; height: {{ h.h }}px;'></div>
{% endfor %}
{% for h in g.slot_labels %}
<div class=slotlabel style='position: absolute; left: {{ h.x }}px; top: {{ h.y }}px; width: {{ h.w }}px; height: {{ h.h }}px;'>{{ h.label }}</div>
{% endfor %}
{% for m in g.meetings %}
<div class='meeting{{ " collision" if m.coll else "" }}' style='position: absolute; left: {{ m.x }}px; top: {{ m.y }}px; width: {{ m.w }}px; height: {{ m.h }}px;' title='{{ m.start + "–" + m.end + ": " + m.topic|e }}'>
<p class=mtime>{{ m.start }}–{{ m.end }}
<p class=mdesc>{{ m.topic }}
</div>
{% endfor %}
{% if g.now %}
<div id=now style='position: absolute; left: {{ g.now.x }}px; top: {{ g.now.y }}px; width: {{ g.now.w }}px;'></div>
{% endif %}
</div>
</body>
</html>