<!doctype html>
<head>
    <title>Platypush Web Panel</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <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 }}'),
            procedures: JSON.parse({{ utils.to_json(procedures)|safe }}),
        };

        var __plugins__ = JSON.parse('{{ utils.to_json(plugins)|safe }}');
        var __backends__ = JSON.parse('{{ utils.to_json(backends)|safe }}');

        {% if token %}
            window.config.token = '{{ token }}';
        {% else %}
            window.config.token = undefined;
        {% endif %}
    </script>

    {% include 'js-common.html' %}
    <script type="text/javascript" src="{{ url_for('static', filename='js/autocomplete.js') }}"></script>

    {% for style in styles.values() %}
    <link rel="stylesheet" href="{{ url_for('static', filename=style['_style_file']) }}">
    {% endfor %}

    {% include 'elements.html' %}

    {% for plugin, conf in templates.items() %}
        {% with configuration=templates[plugin] %}
            {% include conf['_template_file'] %}
        {% endwith %}
    {% endfor %}

    {% for script in scripts.values() %}
    <script type="text/javascript" src="{{ url_for('static', filename=script['_script_file']) }}"></script>
    {% endfor %}
</head>

<body>
    <div id="app">
        {% with plugins=templates.keys() %}
            {% include 'nav.html' %}
        {% endwith %}

        <main>
            <div class="plugins-container">
                <plugin v-for="(conf, plugin) in {{ utils.to_json(templates) }}"
                        :tag="plugin.replace(/\./g, '-')"
                        :key="plugin"
                        :config="conf"
                        :class="{hidden: plugin != selectedPlugin}">
                </plugin>
            </div>
        </main>

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

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

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

