{% extends 'base.html.twig' %}

{% block stylesheets %}
    <script>
        function myMap() {
            var mapOptions = {
                zoom: 13,
                center: new google.maps.LatLng(-34.9162411, -54.9469013),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            marker = new google.maps.Marker({
                map: map, position: new google.maps.LatLng(-34.9162411, -54.9469013)
            });
            infowindow = new google.maps.InfoWindow({
                content: '<strong>Centro Regional de Profesores del Este</strong><br>Calle la Virgen y Alférez Cámpora<br> Maldonado<br>'
            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
            infowindow.open(map, marker);
        }
    </script>
    <style>#gmap_canvas img {
            max-width: none !important;
            background: none !important
        }</style>
{% endblock %}

{% block titulo %}Sede{% endblock %}

{% block subtitulo %}{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-md-6">
            <div class="box box-default">
                <div class="box-header with-border">

                    <h3 class="box-title">Centro Regional de Profesores del Este</h3>

                </div>
                <div class="box-body">
                    <div class="col-md-4 pull-left">
                        <p>Calle la Virgen y Alférez Cámpora, Barrio Cachimba del Rey, Maldonado, Uruguay.</p>
                    </div>
                    <div class="col-md-4 pull-right">
                        <a href="http://ipes.cfe.edu.uy" class="btn btn-info pull-right"><i
                                    class="fa fa-external-link-square"></i> cerpdeleste.cfe.edu.uy</a>
                    </div>
                    <p></p>

                    <div id="map" style="width:100%;height:400px;margin-left:auto;margin-right:auto;">
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-6">
{#            <div class="box box-default">#}
{#                <div class="box-header">#}
{#                    <h4 class="box-title">Servicios</h4>#}
{#                </div>#}
{#                <div class="box-body">#}
{#                    <div class="btn-group btn-group-justified">#}
{#                    <a class="btn btn-flat btn-block btn-default"#}
{#                    href="{{ asset('images/hoteles.pdf') }}">#}
{#                        <i class="fa fa-download"></i> Hoteles#}
{#                    </a>#}
{#                    <a class="btn btn-flat btn-block btn-default"#}
{#                       href="{{ asset('images/restaurantes.pdf') }}">#}
{#                        <i class="fa fa-download"></i> Restaurantes#}
{#                    </a>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}

            <div class="box box-default">
                <div class="box-body no-padding">
                    <div class="btn-group btn-group-justified">
                        <video width="480" height="360"  controls>
                            <source src="{{ asset('images/auspicios/video.mp4') }}" type="video/mp4">
                            Tu navegador no acepta la etiqueta 'video'
                        </video>
                    </div>
                </div>
            </div>

        </div>
    </div>



{% endblock %}

{% block javascripts %}

    <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&callback=myMap&key=AIzaSyBe82FEbLqYiZEiXfGyilu_rLPT2X2EAf4'></script>

{% endblock %}