nodes.html

<ul class="nodes">
  {% for node in nodes %}
  <li class="node">
    <label class="switch" style="float: left">
      <input type="checkbox" {{ 'checked' if node.state else '' }}
             id="switch-{{ node.id }}"
             onclick="onNodeClick(this, event)" node-id="{{ node.id }}" />
      <span class="slider round"></span>
    </label>
    <label for="switch-{{ node.id }}" class="label-for-switch">{{ node.title }}</label>
    <div class="tools">
      <button title="Tools" onclick="onToolClicked(this, event)" class="transparent toggle-tools">⚙️</button>
      <button title="Delete node" onclick="deleteNode(event, {{ node.id }}, '{{ node.title }}')" class="transparent">🗑️</button>
      <button title="Edit node" onclick="showPopupForm('node', event, {{ node.id }})" class="transparent">🖊️</button>
      <button title="Edit events" onclick="showEventList({{ node.id }}, event)" class="transparent">📅</button>
      {% if loop.index > 1 %}
      <button title="Move node up" onclick="reorderNodes({{ node.sort_order }}, {{ node.sort_order }} - 1)" class="transparent">↑</button>
      {% else %}
      <button class="invisible">↑</button>
      {% endif %}
      {% if loop.index < nodes | length %}
      <button title="Move node down" onclick="reorderNodes({{ node.sort_order }}, {{ node.sort_order }} + 1)" class="transparent">↓</button>
      {% else %}
      <button class="invisible">↓</button>
      {% endif %}
    <div>
  </li>
  {% endfor %}
</ul>

{% if nodes %}
<button class="button float-left" style="width:49%"
        onclick="switchStateForAll('on')">🌞 All on</button>
<button class="button danger float-left" style="width:49%"
        onclick="switchStateForAll('off')">🌑 All off</button>
<br style="clear: both"/>
{% endif %}