{% extends "nexus/module.html" %}

{% load gutter_helpers %}

{% block head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% url 'nexus:media' 'gutter' 'css/gutter.css' %}">
    <script type="text/javascript" src="{% url 'nexus:media' 'gutter' 'js/gutter.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="toolbar">
        <button class="button addSwitch">Add a Switch</button>
        <button class="button export">Export Switches</button>
        <button class="button import">Import Switches</button>
    </div>

    {% for kind, notice in notices.items %}
    <section id="notifications">
        <p class="{{ kind }}">{{ notice }}</p>
    </section>
    {% endfor %}

    <ul class="switches">
        <li id="switch-block">{% include "gutter/switch_block.html" %}</li>
    {% with new_switch as switch %}
        <li id="switch-__new__">{% include "gutter/switch.html" %}</li>
    {% endwith %}
    {% for switch in switches %}
        <li>{% include "gutter/switch.html" %}</li>
    {% empty %}
        <li>No switches configured</li>
    {% endfor %}
    </ul>


    <ul id="condition-form-prototype" style="display: none">
        <li>
            <section class="condition">{{ new_switch.conditions.empty_form }}</section>
            <button data-action="remove">Remove</button>
        </li>
    </ul>

{% endblock %}