<!doctype html>
<head>
    <title>Platypush Dashboard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    {% include 'css-common.html' %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dist/dashboard.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dist/webpanel/plugins/assistant.google.css') }}">

    {% include 'js-common.html' %}

    <script type="text/javascript" src="{{ url_for('static', filename='js/plugins/pushbullet/index.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/plugins/assistant.google/index.js') }}"></script>

    <script type="text/javascript">
        if (!window.config) {
            window.config = {};
        }

        window.config = { ...window.config,
            websocket_port: {{ websocket_port }},
            has_ssl: {{ 'true' if has_ssl else 'false' }},
            templates: JSON.parse('{{ utils.to_json(templates)|safe }}'),
            scripts: JSON.parse('{{ utils.to_json(scripts)|safe }}'),
        };

        {% if token %}
            window.config.token = '{{ token }}';
        {% else %}
            window.config.token = undefined;
        {% endif %}

        window.config.dashboard = {{ config | safe }};
        window.config.widgets = {{ config['widgets'] | safe }}.reduce(function(map, w) { map[w.widget] = w; return map }, {})
    </script>

    {% include 'elements.html' %}

    {% for widget in config['widgets'] %}
        {% with name = widget['widget'] %}
            {% include 'widgets/' + name + '/index.html' %}

            {% with js_file = static_folder + '/js/widgets/' + name + '/index.js' %}
                {% if utils.isfile(js_file) %}
                    <script type="text/javascript" src="{{ url_for('static', filename='js/widgets/' + name + '/index.js') }}"></script>
                {% endif %}
            {% endwith %}

            {% with css_file = static_folder + '/css/dist/dashboard/widgets/' + name + '.css' %}
                {% if utils.isfile(css_file) %}
                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dist/dashboard/widgets/' + name + '.css') }}">
                {% endif %}
            {% endwith %}
        {% endwith %}
    {% endfor %}
</head>

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

            <div id="widgets-container">
                {% set used_columns = [0] %}
                {% for widget in config['widgets'] %}
                    {% with name = widget['widget'] %}
                        {% if used_columns[0] % 12 == 0 %}
                            <div class="widgets-row">
                        {% endif %}

                        {% with properties=widget %}
                            <widget :tag="'{{ name }}'.replace('.', '-')"
                                    key="{{ name }}"
                                    :config="{{ widget | safe }}">
                            </widget>
                        {% endwith %}

                        {# increment counter #}
                        {% if used_columns.append(used_columns.pop() + widget.get('columns', 12)) %}{% endif %}

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

            {% include 'notifications.html' %}
        </main>
    </div>

    {% include 'widgets/template.html' %}

    <script type="text/javascript" src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
</body>

