{% load static %}
{% load envipytags %}
<!-- Delete Node -->
<div id="delete_pathway_node_modal" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Delete Node</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Deletes the Node. Edges having this Node as Substrate or Product will be removed as well.
                <p></p>
                <form id="delete-pathway-node-modal-form" accept-charset="UTF-8" action="" data-remote="true"
                      method="post">
                    {% csrf_token %}
                    <select id="delete_pathway_node_nodes" name="node-url"
                            data-actions-box='true' class="form-control" data-width='100%'>
                        <option value="" disabled selected>Select Compound to delete</option>
                        {% for n in pathway.nodes %}
                            <option value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
                        {% endfor %}
                    </select>
                    <input type="hidden" id="hidden" name="hidden" value="delete"/>
                </form>
                <p></p>
                <div id="delete_pathway_node_image"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="delete-pathway-node-modal-submit">Delete</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#delete_pathway_node_nodes").selectpicker();

        $("#delete_pathway_node_nodes").on('change', function (e) {
            node_url = $('#delete_pathway_node_nodes option:selected').val()

            if (node_url !== "") {
                $('#delete_pathway_node_image').empty();
                $('#delete_pathway_node_image').append(
                    "<img width='100%' src='" + node_url + "?image=svg'>"
                );
            }
        })

        $('#delete-pathway-node-modal-submit').click(function (e) {
            e.preventDefault();
            node_url = $('#delete_pathway_node_nodes option:selected').val()

            if (node_url === "") {
                return;
            }

            $('#delete-pathway-node-modal-form').attr('action', node_url)
            $('#delete-pathway-node-modal-form').submit();
        });

    })
</script>