{% extends "sidebar_base.html" %}

{% block graph_type %}
    {{ type }}
{% endblock %}

{% block graph_form %}
<form name="sauceupdate" action="/" method="POST"> {% csrf_token %}

<input
    name="update"
    class="btn btn-outline-primary btn-block"
    type="submit"
    value="Update"
/>

<hr />

<!-- Path -->
<div style="overflow: auto; max-height: 300px">
    <br>
    <p style="font-weight: bold" class="mb-2">
        Show Shortest Path
    </p>

    <div class="input-group">
        <select autocomplete="off" type="text" class="form-control" name="start">
            <option value="{{start}}">{{start}}</option>
            {% for node in nodes  %}
                <option value="{{node}}">{{node}}</option>
            {% endfor %}
        </select>
        <div class="input-group-append">
            <span class="input-group-text" style="font-family: monospace;">
                {% include "icons.html" with icon="right_arrow" %}
            </span>
        </div>
        <select autocomplete="off" type="text" class="form-control" name="end">
            <option value="{{end}}">{{end}}</option>
            {% for node in nodes  %}
                <option value="{{node}}">{{node}}</option>
            {% endfor %}
        </select>
        <div class="input-group-append">
            <input class="btn btn-outline-primary" type="submit" value="Show" name="addPath" />
        </div>
    </div>
    {% if 'Path Drawn: ' not in path_error %}
        <div class="text-danger">
        </div>
    {% endif %}
</div>

<!-- Now edges -->

<div style="overflow: auto; max-height: 300px">

    <p style="font-weight: bold" class="mb-2">
        Edges
        <span class="badge badge-secondary">
            {{ edges|length }}
        </span>
    </p>

    <div class="scroll-bar property" style="overflow: auto; max-height: 150px">
        {% block edge_loop %} {% endblock %}
    </div>

    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                +
            </span>
        </div>
        <input autocomplete="off" type="text" class="form-control" placeholder="From..." name="newedgefrom">
        <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" placeholder="To..." name="newedgeto">
        <div class="input-group-append">
            <input class="btn btn-outline-primary" type="submit" value="Add" name="addEdge" />
        </div>
    </div>
</div>


<div>
    <p style="font-weight: bold" class="mb-2">
        Nodes
        <span class="badge badge-secondary">
            {{ nodes|length }}
        </span>
    </p>

    <div class="scroll-bar property" style="overflow: auto; max-height: 150px">
        {% block node_loop %} {% endblock %}
    </div>

    <div class="mb-3 input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                <!-- {{ nodes|length|add:1 }} -->
                +
            </span>
        </div>
        <input autocomplete="off" type="text" class="form-control" placeholder="New node" name="newNode">
        <div class="input-group-append">
            <input class="btn btn-outline-primary" type="submit" value="Add" name="addNode" />
        </div>
        {% if 'Node Added: ' not in node_error and 'Node Deleted: ' not in node_error %}
            <div class="text-danger">
                {{ node_error }}
            </div>
        {% endif %}
    </div>

</div>

</form>

{% endblock %}




