{% extends "jocondelab/front_base.html" %}
{% load i18n %}
{% load l10n %}

{% block js_import %}
    {{block.super}}
    <script type="text/javascript" src="{{STATIC_URL}}jocondelab/lib/leaflet.js"></script>
{% endblock %}

{% block css_import %}
    {{block.super}}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}jocondelab/lib/leaflet.css" />
{% endblock %}

{% block js_declaration %}
    {{block.super}}
    <script type="text/javascript">
        var urls = {
            static_url: "{{STATIC_URL}}",
            ajax_geo_coords: "{% url 'ajax_geo_coords' %}",
            ajax_geo_search: "{% url 'ajax_geo_search' %}",
            ajax_contents: "{% url 'ajax_contents' %}",
            countries_geo_json: "{{STATIC_URL}}jocondelab/lib/countries.geo.json"
        };
        var countries = {{countries|safe}};
    </script>
    <script type="text/javascript" src="{{STATIC_URL}}jocondelab/js/front-geo.js"></script>
{% endblock %}

{% block css_declaration %}
    {{block.super}}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}jocondelab/css/front-geo.css"></script>
{% endblock %}

{% block title %}JocondeLab &raquo; {% trans 'World map' %}{% endblock %}

{% block breadcrumbs %}<a href="{% url 'front_geo' %}">{% trans 'World map' %}</a>{% endblock %}

{% block main %}
            <div class="map-container">
                <div id="map"></div>
                <form class="map-search" action="#">
                    <input class="map-search-input" type="search" placeholder="{% trans 'Search for a place' %}" />
                </form>
            </div>
            
            <div class="results"></div>
{% endblock %}
