{% extends 'layout.html.twig' %}
{% block head %}
    {{parent()}}
    <script type="text/javascript" src="js/views/index.js"></script>
{% endblock %}
{% block body %}
    {{ parent() }}
    <div class="container">
        <h1>Orchard Kick</h1>
        <h5>Find an Orchard artist playing near you!</h5>
        <div class="row" id="spinner-container">
            <div class="col-md-6"></div>
            <div class="col-md-2">
            </div>
            <div class="col-md-4"></div>
        </div>
        <div class="row">
            {% include 'partials/filters.html.twig' %}
        </div>
        <div class="row">
            {% include 'partials/events.html.twig' %}
            {% include 'partials/map.html.twig' %}
        </div>
        <div class="row">
            <div id="borderedEvent">
            </div>
        </div>
    </div>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDXu44EvJL5YeB8umJSSE7bO4x_PG9VV_8&callback=initMap">
    </script>
{% endblock %}