<!doctype html>
<head>
    <title>Platypush Dashboard</title>

    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/skeleton.css') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/skeleton-tabs.css') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/normalize.css') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='font-awesome/css/font-awesome.min.css') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/application.css') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/toggles.css') }}"></script>

    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.3.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/skeleton-tabs.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/application.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/pushbullet.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/assistant.google.js') }}"></script>
    <script type="text/javascript">
        window.websocket_port = {% print(websocket_port) %};

        {% if token %}
            window.token = '{% print(token) %}';
        {% else %}
            window.token = undefined;
        {% endif %}

        window.config = {{ config | safe }};
        window.widgets = {{ config['widgets'] | safe }};
    </script>
</head>

<body>
    <main>
        <!-- You can send events of type platypush.message.event.web.DashboardIframeUpdateEvent
             to control what is shown in the optional iframe modal -->
        <div id="iframe-modal" class="modal">
            <div class="modal-container">
                <iframe></iframe>
            </div>
        </div>

        <div id="widgets-container">
            {% set used_columns = [0] %}
            {% for widget_name, widget in config['widgets'].items() %}
                {% if used_columns[0] % 12 == 0 %}
                <div class="row">
                {% endif %}

                <div class="widget {% print(utils.widget_columns_to_html_class(widget['columns'])) %}
                        {% print(widget_name) %}"
                        id="{% print(widget['id'] if 'id' in widget else widget_name) %}">
                    {% with properties=widget %}
                        {% include 'widgets/' + widget_name + '.html' %}
                    {% endwith %}
                </div>

                {# increment counter #}
                {% if used_columns.append(used_columns.pop() + widget['columns']) %}{% endif %}

                {% if used_columns[0] % 12 == 0 %}
                </div>
                {% endif %}
            {% endfor %}
        </div>

        <div id="notification-container"></div>
    </main>
<body>

