{% extends 'internal/base.html' %}

{% set title = _("Timetables") %}
{% set sticky_banners = g.is_kiosk %}
{% set localized = true %}

{% block content %}
	<div class="row">
		<div class="col text-center">
			<h2 class="text-center text-foli content-spaced text-shadow">{{ _("Busses Arriving Soon") }} <!-- small class="text-dark">12.00-12.30</small --></h2>
		</div>
	</div>


	<div class="card box-shadow border-foli">
		<div class="list-group list-group-flush">
			<div class="list-group-item list-group-item-foli">
				<div class="row">
					<span class="col-8"><strong>{{ _("Line") }} / {{ _("Destination") }}</strong></span>
					<span class="col-2 text-center"><strong>{{ _("Time") }}</strong></span>
					<span class="col-2 text-center"><strong>{{ _("ETA") }}</strong></span>
				</div>
			</div>

			{% for bus in arrivals %}
			<div class="list-group-item list-group-item-action">
				<a class="row link-unstyled" href="#">
					<span class="col-8 text-foli">{{ util.line_name(bus) }}</span>
					<span class="col-2 text-center">{{ util.time_short(bus.time) }}</span>
					<span class="col-2 text-center text-success">{{ bus.time_relative | formatseconds }}</span>
				</a>
			</div>
			{% endfor %}
		</div>
	</div>

	<div class="row content-spaced-lg">
		<div class="col text-center">
			<small class="text-shadow">{{ _("Information last updated a minute ago") }}</small>
		</div>
	</div>

	<!-- this is a more complete schedule for the day, for this stop, separate from arriving buses to allow real time tracking of only relevant vehicles -->
	<div class="row">
		<div class="col text-center">
			<h2 class="text-center text-foli content-spaced text-shadow">{{ _("Today's Schedule") }} <small class="text-dark">{{ util.stop_name() }}</small></h2>
		</div>
	</div>

	<div class="card box-shadow border-foli content-spaced">
		<div class="list-group list-group-flush">
			<div class="list-group-item list-group-item-foli">
				<div class="row">
					<span class="col-4"><strong>{{ _("Line") }}</strong></span>
					<span class="col-4"><strong>{{ _("Destination") }}</strong></span>
					<span class="col-4 text-center"><strong>{{ _("Departure Time") }}</strong></span>
				</div>
			</div>

			{% for bus in schedule %}
			<div class="list-group-item list-group-item-action">
				<a class="row link-unstyled" href="#" {% if bus.route.stops %}data-toggle="modal" data-target="#scheduleModal-{{ loop.index }}"{% endif %}>
					<span class="col-4 text-foli">{{ bus.route.route_name }}</span>
					<span class="col-4">{{ bus.headsign }}</span>
					<span class="col-4 text-center">{{ util.time_short(bus.time) }}</span>
				</a>
			</div>
			{% endfor %}
		</div>
	</div>

	{{ util.pagination(pagination) }}

	<!-- line schedule modals -->

	{% for bus in schedule if bus.route.stops %}
	<div class="modal hide" id="scheduleModal-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="scheduleModalLabel-{{ loop.index }}" aria-hidden="true">
		<div class="vertical-align-wrapper">
		<div class="modal-dialog modal-lg vertical-align-center" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title text-foli" id="scheduleModalLabel-{{ loop.index }}">Line Schedule <small class="text-muted">{{ bus.route.route_name }}</small></h5>
					<!-- <button type="button" class="close" data-dismiss="modal" aria-label="{{ _("Close") }}">
						<span aria-hidden="true">&times;</span>
					</button> -->
				</div>
				<div class="modal-body remove-padding">

					<div class="list-group list-group-flush">
						<div class="list-group-item text-foli">
							<div class="row">
								<span class="col-8"><strong>{{ _("Stop") }}</strong></span>
								<span class="col-4 text-center"><strong>{{ _("Departure Time") }}</strong></span>
							</div>
						</div>

						{% for point in bus.route.stops %}
						<div class="list-group-item">
							<div class="row">
								<span class="col-8">{{ util.stop_name(context = point.stop) }}</span>
								<span class="col-4 text-center">{{ util.time_short(point.time) }}</span>
							</div>
						</div>
						{% endfor %}
					</div>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">{{ _("Close") }}</button>
				</div>
			</div>
		</div>
		</div>
	</div>
	{% endfor %}
{% endblock content %}