{% extends "base.html" %}

{% load staticfiles %}
{% load crispy_forms_tags %}

{% block title %}{{ block.super }}About{% endblock %}

{% block navbar-left %}
  {% include "_navbar.html" with active_link="about" %}
{% endblock %}

<!-- Benefits of the Django application -->
{% block container %}

<div id="sec1" class="text-page">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1>{% include "_brandname.html" %}</h1>
        <p class="lead">linking crowdsourcing, blockchain and language research</p>
      </div>
    </div>
  </div>
</div>

<div id="sec2" class="text-page">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2>The team</h2>
        <p class="lead">Open source project initialised at ACDH, Vienna</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4">
        <div class="text-center"><img class="img-circle centered" src="http://lorempixel.com/128/128/people/9/" alt="profile pic"></div>
        <p class="heavy text-center">Daniel</p>
        <h2>Front-end developer</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      </div>
      <div class="col-lg-4">
        <div class="text-center"><img class="img-circle centered" src="http://lorempixel.com/128/128/people/2/" alt="profile pic"></div>
        <p class="heavy text-center">Amelie</p>
        <h2>CEO</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      </div>
      <div class="col-lg-4">
        <div class="text-center"><img class="img-circle centered" src="http://lorempixel.com/128/128/people/1/" alt="profile pic"></div>
        <p class="heavy text-center">Eveline</p>
        <h2>Front-end designer</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      </div>
    </div>
    </div>
  </div>
</div>

<div id="sec3">
  <div class="container">
    <div class="row">
      <div id="map-outer" class="col-md-12">
        <div id="address" class="col-md-4">
          <h2>Our Location</h2>
          <address>
            <strong>Wohlebengasse 12-14</strong><br>
            1040 Vienna<br>
            <abbr>E:</abbr> daniel.mcdonald@oeaw.ac.at
          </address>
        </div>
        <div id="map-container" class="col-md-8"></div>
      </div>
    </div>
  </div>
</div>
{% endblock container %}

{% block scripts %}
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script>

   function init_map() {
     // Enter the latitude and longitude of your office here
	 var myLocation = new google.maps.LatLng(48.196451, 16.373561);

     var mapOptions = {
          center: myLocation,
          zoom: 14
     };

	 var marker = new google.maps.Marker({
	   position: myLocation,
	   title:"We are here"});

     var map = new google.maps.Map(document.getElementById("map-container"),
                                   mapOptions);
	 marker.setMap(map);
   }

   google.maps.event.addDomListener(window, 'load', init_map);
  </script>
{% endblock scripts %}