{% set header_title = 'Contact Us' %}
{% set header_image = 'assets/images/light/banner-blog-bg.jpg' %}
{% set header_size = 'small' %}

{% extends 'layouts/layout-light.html' %}

{% block content %}
    <!-- Google Map -->
    <div id="google-map" class="youplay-gmaps"></div>
    <script src="https://maps.google.com/maps/api/js?key=AIzaSyBlQNaWM2_jxXJbRwL2ozXWw3cg-uuld8w&sensor=false"></script>
    <script>
        function initializeGmaps() {
            var LatLng = {lat: 48.8581542, lng: 2.2950928};
            var mapCanvas = document.getElementById('google-map');
            var mapOptions = {
                center      : LatLng,
                scrollwheel : false,
                zoom        : 14,
                mapTypeId   : google.maps.MapTypeId.ROADMAP,
                backgroundColor: 'none',
                styles      : [{
                    stylers: [
                        { hue: '#ff6600' },
                        { visibility: 'simplified' }
                    ]
                }]
            }
            var map = new google.maps.Map(mapCanvas, mapOptions);
            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                icon: 'assets/images/light/marker.png',
                title: 'Hello World!'
            });
        }
        google.maps.event.addDomListener(window, 'load', initializeGmaps);
    </script>
    <!-- /Google Map -->

    <div class="container youplay-content">

        <div class="row">
            <div class="col-md-9 col-md-push-3">
                <!-- Contact Form -->
                <div class="youplay-form p-0">
                    <h2 class="mt-0">Drop us a line</h2>

                    <form action="php/contact.php" method="POST" role="form" class="youplay-form-ajax" data-toggle="validator">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="youplay-input form-group">
                                    <input type="text" name="name" placeholder="Name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="youplay-input form-group">
                                    <input type="email" name="email" placeholder="Email" required>
                                </div>
                            </div>
                        </div>
                        <div class="youplay-textarea form-group">
                            <textarea name="message" placeholder="Message" rows="5" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
                <!-- /Contact Form -->
            </div>
            <div class="col-md-3 col-md-pull-9">
                <h2 class="mt-0">Contact info</h2>

                12345 North Main Street,<br>
                New York, NY 555555
                <br><br>
                Phone: 1.800.555.6789<br>
                Email: demo@demo.com<br>
                Web: <a href="https://nkdev.info">nkdev.info</a><br>
                <br>
            </div>
        </div>

    </div>
{% endblock %}