Improve rule management page

Address rules by name instead of index. Still problematic if the rules
are changed while someone is managing them, but with names it’s
more likely to just not work instead of enabling or disabling the
wrong rule.

Also prevent bringing down the whole network with a single click.

web/templates/rules/manage.html

@@ -3,7 +3,10 @@
 {% block header %}
 <style>
 pre {
-    margin: 0;
+    margin: 0.5em 2em;
+}
+summary {
+    list-style: none;
 }
 </style>
 {% endblock %}
@@ -12,17 +15,19 @@ pre {
 <p>
 Tu lahko vklopite in izklopite posamezna pravila za požarni zid.
 
+<form id="request" method="POST">
 {% for rule in rules %}
 <details>
 <summary>
-{% if rule.enabled %}
-<font color="green">●</font> {{ rule.name }} <a href="{{ url_for('rules.toggle', index=rule.index, enable='false') }}">izklopi</a>
-{% else %}
-<font color="red">●</font> {{ rule.name }} <a href="{{ url_for('rules.toggle', index=rule.index, enable='true') }}">vklopi</a>
-{% endif %}
+<input name="rule" type="hidden" value="{{ rule.name }}" />
+<input name="enabled" type="checkbox" value="{{ rule.name }}" autocomplete="off"{% if rule.enabled %} checked{% endif %} />
+{{ rule.name }}
 </summary>
 <pre><code>{{ rule.text }}</code></pre>
 </details>
 {% endfor %}
+<p>
+<button>Potrdi</button>
+</form>
 
 {% endblock %}