{% extends 'base.jinja' %}
{% block head_extra_first %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
          integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
          crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
            integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
            crossorigin=""></script>
{% endblock %}
{% block headline %}
    <h1 class="text-center"> Donar </h1>
{% endblock %}
{% block content %}
    {# TODO: implement Leaflet #}
    {#    <div id="mapid" style="height: 280px;"></div>#}
    {#    <script>#}
    {#        var mymap = L.map('mapid').setView([51.505, -0.09], 13);#}
    {#        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {#}
    {#            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',#}
    {#            maxZoom: 18,#}
    {#            id: 'mapbox.streets',#}
    {#            accessToken: 'your.mapbox.access.token'#}
    {#        }).addTo(mymap);#}
    {#    </script>#}
    <div class="container">
        <div class="row">
            {% if room %}
                <div class="col-12">
                    <div class="p-3 border border-dark roundep-3 border border-dark rounded bg-light text-dark">
                        <h3>{{ room.name }}</h3>
                        <p><strong>Key:</strong> {{ room.key }}</p>
                        <p><strong>Address:</strong> {{ room.address }}</p>
                        <p><strong>Building Key:</strong> {{ room.building_key }}</p>
                        <p><strong>Floor:</strong> {{ room.floor }}</p>
                        <p><strong>Orgname:</strong> {{ room.orgname }}</p>
                        <p><strong>Short:</strong> {{ room.short }}</p>
                        <p><strong>Size:</strong> {{ room.size }}</p>
                        <p><strong>Description:</strong> {{ room.description }}</p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}