{% extends 'base.html.twig' %}
{% block title %}Cliente{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
#map {
height:100%;
width: 100%;
}
</style>
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('sucursal') }}
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
{% endblock javascripts %}
{% block body %}
<div class="container-fluid" {{ stimulus_controller('hello') }}>
<main class="row bg-white pt-3">
<aside class="mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 col map-sidebar bg-white">
{{ include('callcenter/_maps.html.twig') }}
</aside>
<div class="mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 sucursales col-2 bg-white list-group" id="output">
{{ include('callcenter/_sucursales.html.twig') }}
</div>
<div class="mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 col bg-white">
{{ include('callcenter/_cliente.html.twig', { 'form': form }) }}
</div>
</main>
</div>
<script
src="https://maps.googleapis.com/maps/api/js?key={{ google_api_key }}&libraries=places&v=weekly">
</script>
<script type="text/javascript">
window.onload = function() {
initMap({{distanciaenminutos}});
}
//prevenir envio de form con la tecla enter
document.addEventListener("keydown", function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
</script>
{% endblock %}