{% extends "sidebar_form.html" %}

{% block node_loop %}

{% if nodes|length == 0 %}
    <p style="font-family: monospace;" class="mb-0">There aren't any nodes >:(</p>
{% endif %}

{% for node in nodes %}
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">
            {{ forloop.counter }}
        </span>
    </div>
    <input autocomplete="off" type="text" class="form-control" name="node{{forloop.counter}}" value="{{ node }}">
    <div class="input-group-append">
        <button class="btn btn-outline-danger" type="submit" name="deleteNode" value="{{forloop.counter}}">
            {% include "icons.html" with icon="trash" %}
        </button>
    </div>
</div>
{% endfor %}

{% endblock %}


{% block edge_loop %}

{% if edges|length == 0 %}
    <p style="font-family: monospace;" class="mb-0">There aren't any edges >:(</p>
{% endif %}

{% for edge in edges %}
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">
            {{forloop.counter}}
        </span>
    </div>
    <input autocomplete="off" type="text" class="form-control" name="edge{{forloop.counter}}from" value="{{ edge.0 }}">
    <div class="input-group-append">
        <span class="input-group-text" style="font-family: monospace;">
            {% include "icons.html" with icon="right_arrow" %}
        </span>
    </div>
    <input autocomplete="off" type="text" class="form-control" name="edge{{forloop.counter}}to" value="{{ edge.1 }}">
    <div class="input-group-append">
        <button class="btn btn-outline-danger" type="submit" name="deleteEdge" value="{{forloop.counter}}">
            {% include "icons.html" with icon="trash" %}
        </button>
    </div>
</div>
{% endfor %}

{% endblock %}