{% extends "layout.html" %}
{% set active_page = "locations" -%}

{% import "utils.html" as util %}

{% block container %}
<div class="row location_data" xmlns="http://www.w3.org/1999/html">
	<div class="col-md-push-1 col-md-5 darker">
		<h3>{{ location.name }}</h3>
		{% if location.address   %}<span class="glyphicon glyphicon-home"></span>{{ location.address }}<br/>{% endif %}
		{% if location.telephone %}<span class="glyphicon glyphicon-phone"></span><a href="tel:{{ location.telephone }}">{{ location.telephone }}</a><br/>{% endif %}
		{% if location.website   %}<span class="glyphicon glyphicon-link"></span> <a href="{{ location.website}}">{{ location.website }}</a> <br/>{% endif %}
		{% if location.osm       %}<span class="glyphicon glyphicon-map-marker"></span> <a href="{{ location.osm}}">{{ location.osm }}</a> <br/>{% endif %}
		{% if not current_user.is_anonymous() %}
			<a href="{{ url_for("order_bp.orders", location_id=location.id) }}" class="btn btn-primary btn-sm">Create order</a>
		{% endif %}
	</div>
	<div class="col-md-push-1 col-md-5 padding-top sm-no-side-padding md-no-right-padding">
		{% if location.address %}
			<div class="small-map" id="mapid"></div>
		{% endif %}
	</div>
</div>
<div class="row location_products">
	<div class="col-md-push-1 col-md-10 darker">
		<h3 id="order-title">Products</h3>
		<table class="table table-hover table-condensed">
			<thead>
				<tr><th style="min-width: 20%">Name</th><th>Description</th><th>Price</th></tr>
			</thead>
			<tbody>
			{% for dish in location.dishes -%}
				<tr>
					<td>{{ dish.name or dish.id }}</td>
					<td>
						{{ dish.description or "" }}
						{% if dish.choices %}
							<details class="dish-choices">
								<summary>
								{% set comma = joiner(",") %}
								{% for choice in dish.choices %}{{ comma() }}
									{{ choice[1].name }}{% endfor %}
								</summary>
								<ul>
								{% for type, choice in dish.choices %}
									<li><strong>{{ choice.name }}</strong>{{
										choice.description if choice.description
									}}{{
										" (choose one)" if type == "single_choice"
									}}
										<ul>
										{% for option in choice.options %}
										<li>{{ option.name }}{% if option.description %}:
											{{ option.description}}{% endif %}{% if option.price %}:
											{{ option.price | euro }}{% endif %}</li>
										{% endfor %}
										</ul>
									</li>
								{% endfor %}
								</ul>
							</details>
						{% endif %}
					</td>
					<td style="white-space: nowrap;">{{ dish.price_range()|price_range(true) }}<td>
				</tr>
			{%- endfor %}
			</tbody>
		</table>
	</div>
</div>
{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet.css') }}">
<link rel="stylesheet" href="{{url_for('static', filename='css/map.css')}}">
{% endblock %}

{% block scripts %}
{{ super() }}

{% if location.address %}
	<script src="{{ url_for('static', filename='js/leaflet.js')}}"></script>
	<script src="{{ url_for('static', filename='js/map.js' ) }}"></script>
	<script>
		let locations = [{
			"address": "{{location.address}}",
			"name": "{{location.name}}",
			"url": "{{location.website}}",
			"center": true,
		}];
		loadmap(locations);
	</script>
{% endif %}
{% endblock %}