{% extends 'core/layout.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'lib/leaflet/leaflet.css' %}" />
    <link rel="stylesheet" href="{% static 'map.css' %}" />
{% endblock %}

{% block js %}
    <script type="text/javascript" src="{% static 'lib/angular/angular-scroll.min.js' %}" ></script>
    <script type="text/javascript" src="{% static 'lib/leaflet/leaflet.js' %}" ></script>
    <script type="text/javascript">
        var _static_url = {% static '' %}
        var _tiles_url = "{{tiles_url}}";
        var _tiles_opt = {{tiles_opt|safe}};
        var _default_view = {{default_view|safe}};
    </script>
    <script type="text/javascript" src="{% static 'map.js' %}" ></script>
{% endblock %}

{% block content %}
<div ng-app="map" ng-controller="MapController">

    <div class="container" ng-class="{'hidden-xs': !map}">
        <div id="buttons-left">
            <i id="zoom-in" class="fa fa-2x fa-plus-square-o" ng-click="zoomIn()"></i>
            <i id="zoom-out" class="fa fa-2x fa-minus-square-o" ng-click="zoomOut()"></i>
        </div>
        <div id="buttons-right"></div>
    </div>

    <div id="map" ng-class="{'hidden-xs': !map}"></div>

    <div id="footer" ng-class="{'hidden-xs': !map}">
        <div class="container">
            <div id="footer-left">
            </div>
            <div id="footer-center">
                <a class="info-link" ng-click="showInfo()">
                    <span class="glyphicon glyphicon-chevron-down"></span>
                    <span class="info-link-text">Worum geht es hier?</span>
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </a>
            </div>
            <div id="footer-right">
            </div>
        </div>

    </div>

    <div id="info" ng-class="{'hidden-xs': map, 'up': !map}">
        {% include "core/map_info.html"%}
    </div>

</div>
{% endblock %}
