<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link media="all" href="lib/modelmap/modelmap.min.css" type="text/css" rel="stylesheet" />
    <link media="all" href="lib/leaflet/leaflet.css" type="text/css" rel="stylesheet" />
    <link media="all" href="lib/leaflet_label/leaflet.label.css" type="text/css" rel="stylesheet" />
    <link media="all" href="lib/leaflet/leaflet.fusesearch.min.css" type="text/css" rel="stylesheet" />
    <link media="all" href="lib/jquery/jquery-ui.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="lib/FullWidthTabs/component.min.css" />
    <link rel="stylesheet" type="text/css" href="lib/FullWidthTabs/demo.min.css" />

    <link href="lib/modelmap/fav.ico" type="image/x-icon" rel="shortcut icon" />

    <title>{{title}}</title>

    <script src="lib/leaflet/leaflet.js" type="text/javascript"></script>
    <script src="lib/leaflet_label/leaflet.label.js" type="text/javascript"></script>
    <script src="lib/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="lib/modelmap/maptools.min.js" type="text/javascript"></script>
    <script src="lib/modelmap/popup_formatter.min.js" type="text/javascript"></script>
    <script src="lib/modelmap/geojson_manager.min.js" type="text/javascript"></script>
    <script src="lib/jquery/jquery-ui.min.js" type="text/javascript"></script>
    <script src="lib/onlinehtmltools/skinable_tabs.min.js" type="text/javascript"></script>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script>L_PREFER_CANVAS = true;</script>
</head>
<body>
    <div class="container">
        <header class="clearfix">
            <h1>{{title}}</h1>
            <!--<nav>-->
                <!--<a href="http://mimoza.bordeaux.inria.fr" class="icon-home3" data-info="Mimoza home"><span>Home</span></a>-->
            <!--</nav>-->
        </header>
        <div class="indent just">{{description}}</div>
        <div id="tabs" class="tabs">
            <nav>
                <ul>
                    {% for (header, _, _, _, _, map_id, _) in model_data %}
                        <li><a href="#tab-{{map_id}}" class="icon-quill" id="a-{{map_id}}"><span>{{header}}</span></a></li>
                    {% endfor %}
                </ul>
            </nav>
            <div class="content">
                {% for (title, c_id2name, json_files, c_id2json_vars, c_id2out_c_id, map_id, description) in model_data %}
                    <section id="tab-{{map_id}}">
                        <div>{{description}}</div>
                        <div class="margin" id="search_{{map_id}}">
                            <form id="search_form_{{map_id}}" name="search_form">
                                <label><input type="text" name="search_input" id="tags_{{map_id}}" /></label>
                                <input type="button" value="Search" />
                            </form>
                        </div>
                        <div class="map ui-widget-content" id="{{map_id}}"></div>
                        <div class="margin" id="explanations_{{map_id}}">
                            <p class="info">
                                <span class="emph">Zoom in/out</span> to see more/less details.
                                <span class="emph">Click</span> on elements to see their annotations.
                                <span class="emph">Show/Hide</span> elements in the map settings <span class="explanation">(top right of the map view)</span>.
                            </p>
                        </div>
                    </section>
                {% endfor %}
            </div>
        </div>
    </div>
    <script src="lib/FullWidthTabs/cbpFWTabs.min.js"></script>
    <script>new CBPFWTabs(document.getElementById('tabs'));</script>
    {% for (title, c_id2name, json_files, c_id2json_vars, c_id2out_c_id, map_id, description) in model_data %}
        {% for json in json_files %}
            <script src="{{json}}" type="text/javascript"></script>
        {% endfor %}
        <script type="text/javascript">
            initializeMap({
            {
                c_id2json_vars
            };
            },
            "{{map_id}}", {
            {
                c_id2name
            };
            },
            {
                {
                    c_id2out_c_id
                }
            }
            ,
            {
                {
                    invisible_layers
                }
            }
            )
            $(function() {$("#{{map_id}}").resizable();});
        </script>

        <!--<script>$(function() {$("#tab-{{map_id}}").resizable();});</script>-->
    {% endfor %}
</body>
</html>