{% extends 'layout.html' %}
{% load i18n %}
{% block title %}{{ siteName }} - {% trans "Contact Us" %}{% endblock %}

{% block content %}
<div class="container">

    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">{% trans "Contact" %} <small>{% trans "We'd Love to Hear From You!" %}</small></h1>
            <ol class="breadcrumb">
                <li><a href="/">{% trans "Home" %}</a></li>
                <li class="active">{% trans "Contact Us" %}</li>
            </ol>
        </div>
        <div class="col-lg-12">
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <div style="width:100%;">
                <div style="overflow:hidden;height:400px;width:100%;">
                    <div id="gmap_canvas" style="height:400px; width:100%;"></div>
                </div>
                <script type="text/javascript">
function init_map()
{
    var myOptions = {
        zoom:5,
        center: new google.maps.LatLng({{ COMPANY_LAT }}, {{ COMPANY_LNG }}),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map( document.getElementById("gmap_canvas"), myOptions);
    marker = new google.maps.Marker(
        {map: map, position: new google.maps.LatLng({{ COMPANY_LAT }}, {{ COMPANY_LNG }})}
    );
    infowindow = new google.maps.InfoWindow({ content:
"<span class='gmap'><b>{{ COMPANY_NAME }} </b></span><span class='gmap'>{{ COMPANY_ADDRESS }}</span><span class='gmap'>{{ COMPANY_ZIP }} {{ COMPANY_CITY }}</span>"
    });
    google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});
    infowindow.open(map,marker);}google.maps.event.addDomListener(window, "load", init_map);

                    </script>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-8">
            <h3>{% trans "Let's Get In Touch!" %}</h3>
            <p>{% trans "You need to get in touch with us, complete the form." %}</p>
            {% load crispy_forms_tags %}
            {% crispy form %}
        </div>

        <div class="vcard col-sm-4">
            <h3 class="fn org">{{ COMPANY_NAME }}</h3>
            <p class="street-address">{{ COMPANY_ADDRESS }}</p>
            <p><span class="postal-code">{{ COMPANY_ZIP }}</span> <span class="locality">{{ COMPANY_CITY }}</span></p>
            <p class="tel"><i class="fa fa-phone"></i> <abbr title="Phone">P</abbr>: {{ COMPANY_PHONE }}</p>
            <p><i class="fa fa-envelope-o"></i> <abbr title="Email">E</abbr>: <a class="email" href="mailto:{{ COMPANY_EMAIL }}">{{ COMPANY_EMAIL }}</a></p>
            <p><i class="fa fa-clock-o"></i> <abbr title="Hours">H</abbr>: {% trans "Monday - Friday: 9:00 to 18:00" %}</p>
            <ul class="list-unstyled list-inline list-social-icons">
                <li class="tooltip-social facebook-link"><a href="{{ COMPANY_FACEBOOK }}" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook-square fa-2x"></i></a></li>
                <li class="tooltip-social linkedin-link"><a href="{{ COMPANY_LINKEDIN }}" data-toggle="tooltip" data-placement="top" title="LinkedIn"><i class="fa fa-linkedin-square fa-2x"></i></a></li>
                <li class="tooltip-social twitter-link"><a href="{{ COMPANY_TWITTER }}" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter-square fa-2x"></i></a></li>
                <li class="tooltip-social google-plus-link"><a href="{{ COMPANY_GOOGLEPLUS }}" data-toggle="tooltip" data-placement="top" title="Google+"><i class="fa fa-google-plus-square fa-2x"></i></a></li>
            </ul>
        </div>
    </div><!-- /.row -->

</div><!-- /.container -->
{% endblock content %}