{% extends "base.html" %}
{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static "univnautes/leaflet/leaflet.css" %}" />
<link rel="stylesheet" href="{% static "univnautes/leaflet/MarkerCluster.css" %}" />
<link rel="stylesheet" href="{% static "univnautes/leaflet/MarkerCluster.Default.css" %}" />
{% endblock %}

{% block content %}
<div id="map">map</div>

<div id="idplist">
    <div id="idplist-static">
	    {% if defaultidps %}
	    <ul>
		    {% for defaultidp in defaultidps %}{% for idp in idps %}{% if idp.entity_id == defaultidp %}<li><a href="/authsaml2/sso?entity_id={{ idp.entity_id|urlencode:"" }}">{{ idp.name }}</a></li>
		    {% endif %}{% endfor %}{% endfor %}
	    </ul>
	    {% endif %}
	    <ul>
		    <li><input id="search" name="search" placeholder="chercher un établissement…"></li>
	    </ul>
    </div>
    <div id="idplist-float">
    <ul>
        {% for idp in idps %}
	<li id="idp-{{ idp.slug }}"><a href="/authsaml2/sso?entity_id={{ idp.entity_id|urlencode:"" }}">{{ idp.name }}</a></li>{% endfor %}
    </ul>
    </div>
</div>
{% endblock %}

{% block page-end %}
<script src="{% static "univnautes/jquery/jquery-1.11.1.min.js" %}"></script>
<script src="{% static "univnautes/leaflet/leaflet.js" %}"></script>
<script src="{% static "univnautes/leaflet/leaflet.markercluster.js" %}"></script>
<script src="{% static "univnautes/univnautes.js" %}"></script>
<script src="{% static "univnautes/geoinfos.js" %}"></script>

<script>

$(document).ready(function () {
    /* float list starts just after the static one */
    var static_height = $('#idplist-static').height() + 5;
    $('#idplist-float').css('top', static_height + 'px');

    univnautes(
        {% if geoinitialbounds %}{{ geoinitialbounds }}{% else %}null{% endif %}
    );

    $('#search').focus();

});
</script>
{% endblock %}

