{% extends "base.html" %}

{% block title %}{{ '| '+ title }}{% endblock %}

{% block content %}
<div id="main-wrapper">
    {% include '_nav.html' %}
    <div id="main-container-locations">
        <div id="location-list">
            <div id="location-button-list">
                {% for loc in locInfo %}
                <div class="location-button" data-location="{{ loop.index0 }}">{{ loc.name }}</div>
                {% endfor %}
            </div>
            <div id="location-information">
                <div id="location-text">
                    {{ locInfo[0].directions }}
                </div>
                <a id="location-direction" target="_blank" href="{{ locInfo[0].url }}">
                    <div class="location-button">↳ Directions</div>
                </a>
            </div>
        </div>
        <div id="location-images">
            <div id="location-image">
                <img id="location-img" src="{{ locInfo[0].image }}">
            </div>
        </div>	
    </div>
</div>
<script>
    window.locInfo = {{ locInfo|tojson }};
</script>
<script type="module" src="{{ url_for('static', filename='js/locations.js') }}"></script>
{% endblock content %}