<!DOCTYPE html>
<html>
    <head>
        <title>DashboardLeaf</title>

        {% import 'macros.html' as macros %}
        {{ macros.header(false) }}

        <script src="../static/js/libs/socket.io.min.js"></script>
        <script src="../static/js/libs/gridstack.min.js"></script>
        <script src="../static/js/libs/plotly.min.js"></script>
        <script src="../static/js/libs/plotly.locale.de.min.js"></script>

        <link type="text/css" rel="stylesheet" href="../static/css/libs/weather-icons.min.css" />
        <link type="text/css" rel="stylesheet" href="../static/css/libs/weather-icons-wind.min.css" />
        <link type="text/css" rel="stylesheet" href="../static/css/libs/gridstack.min.css" />
    </head>
    <body>
        <div class="grid-stack">
            {% for tileName, tileLayoutSettings in page.get_tile_layouts_sorted().items() %}
                <div class="grid-stack-item"
                     id="tile-{{ page.uniqueName | replace(' ', '_') }}_{{ tileName }}"
                     data-gs-x="{{ tileLayoutSettings.x }}" data-gs-y="{{ tileLayoutSettings.y }}"
                     data-gs-width="{{ tileLayoutSettings.width }}" data-gs-height="{{ tileLayoutSettings.height }}">
                    <div class="grid-stack-item-content">
                        <div class="container">
                            <!-- content will be inserted here -->
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <script src="../static/js/main.js"></script>
    </body>
</html>
