{%
    with pluginIcons = {
        'camera': 'fas fa-camera',
        'camera.android.ipcam': 'fab fa-android',
        'camera.cv': 'fas fa-camera',
        'camera.pi': 'fab fa-raspberry-pi',
        'camera.ir.mlx90640': 'fas fa-sun',
        'execute': 'fas fa-play',
        'gpio': 'fas fa-plug',
        'gpio.zeroborg': 'fas fa-robot',
        'light.hue': 'fa fa-lightbulb',
        'media.mplayer': 'fa fa-film',
        'media.mpv': 'fa fa-film',
        'media.omxplayer': 'fa fa-film',
        'media.vlc': 'fa fa-film',
        'music.mpd': 'fa fa-music',
        'music.snapcast': 'fa fa-volume-up',
        'sensors': 'fas fa-thermometer-half',
        'sound': 'fas fa-microphone',
        'switches': 'fa fa-toggle-on',
        'tts': 'fa fa-comment',
        'tts.google': 'fa fa-comment',
        'tv.samsung.ws': 'fas fa-tv',
        'zigbee.mqtt': 'fa fa-zigbee',
        'zwave': 'fa fa-zwave',
    }
%}

<nav>
    <ul>
        {% for plugin in plugins|sort %}
            <li :class="{selected: '{{ plugin }}' == selectedPlugin}" title="{{ plugin }}">
                <a href="#{{ plugin }}" @click="selectedPlugin = '{{ plugin }}'">
                    {% if plugin in pluginIcons %}
                        <i class="{{ pluginIcons[plugin] }}"></i>
                    {% else %}
                        {{ plugin }}
                    {% endif %}
                </a>
            </li>
        {% endfor %}
    </ul>

    <div class="date-time pull-right">
        <a href="#" class="settings" @click="toggleFullScreen()">
            <i class="fas fa-compress"></i>
        </a>

        <a href="/settings" class="settings">
            <i class="fas fa-cog"></i>
        </a>

        <div class="time" v-text="now.toTimeString().substring(0,8)"></div>
    </div>
</nav>

{% endwith %}