{% extends "framework.html" %}

{% block content %}
    {% load static %}
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        svg {
            width: 100%;
            height: 600px;
            color: red;
        }

        .link {
            stroke: #999;
            stroke-opacity: 0.6;
            marker-end: url(#arrow);
        }

        .link_no_arrow {
            stroke: #999;
            stroke-opacity: 0.6;
        }

        .node image {
            cursor: pointer;
        }

        .node circle {
            fill: lightblue;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        .highlighted {
            stroke: red;
            stroke-width: 3px;
        }

        .tooltip {
            position: absolute;
            background: lightgrey;
            padding: 5px;
            border-radius: 5px;
            visibility: hidden;
            opacity: 1
        }
    </style>
    <script src="{% static 'js/pw.js' %}"></script>

    {% block action_modals %}
        {% include "modals/objects/add_pathway_node_modal.html" %}
        {% include "modals/objects/add_pathway_edge_modal.html" %}
        {% include "modals/objects/edit_pathway_modal.html" %}
        {% include "modals/objects/delete_pathway_node_modal.html" %}
        {% include "modals/objects/delete_pathway_edge_modal.html" %}
        {% include "modals/objects/delete_pathway_modal.html" %}
    {% endblock action_modals %}

    <p></p>
    <div id="pwcontent">
        <div class="panel-group" id="pwAccordion">
            <div class="panel panel-default">
                <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
                    {{ pathway.name }}
                </div>
            </div>
            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="vizLink" data-toggle="collapse" data-parent="#pwAccordion" href="#viz">
                        Graphical Representation
                    </a>
                </h4>
            </div>
            <div id="viz" class="panel-collapse collapse in">
                <nav role="navigation" class="navbar navbar-default" style="margin: 0;">
                    <div class="navbar-header">
                    </div>
                    <div id="editbarCollapse" class="collapse navbar-collapse ">
                        <ul class="nav navbar-nav">
                            <li class="dropdown requiresWritePerm">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true"
                                   aria-expanded="false">
                                    <span class="glyphicon glyphicon-edit"></span>
                                    Edit
                                    <span class="caret"></span></a>
                                <ul id="editingList" class="dropdown-menu">
                                    {% block actions %}
                                        {% include "actions/objects/pathway.html" %}
                                    {% endblock %}
                                </ul>
                            </li>
                        </ul>

                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a role="button" data-toggle="modal" onclick="goFullscreen('pwcontent')">
                                    <span class="glyphicon glyphicon-fullscreen"></span>
                                    Fullscreen
                                </a>
                            </li>
                            <li>
                                {% if pathway.completed %}
                                    <button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
                                            id="status" data-original-title="" title=""
                                            data-content="Pathway prediction complete.">
                                        <span class="glyphicon glyphicon-ok"></span>
                                    </button>
                                {% elif pathway.failed %}
                                    <button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
                                            id="status" data-original-title="" title=""
                                            data-content="Pathway prediction failed.">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                {% else %}
                                    <button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
                                            id="status" data-original-title="" title=""
                                            data-content="Pathway prediction running.">
                                        <img height="20" src="{% static '/images/wait.gif' %}">
                                    </button>
                                {% endif %}
                                &nbsp;
                            </li>
                        </ul>

                    </div>
                </nav>
                <div id="vizdiv">
                    <svg width="2000" height="2000">
                        {% if debug %}
                            <rect width="100%" height="100%" fill="aliceblue"/>
                        {% endif %}
                        <defs>
                            <marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
                                    orient="auto-start-reverse">
                                <path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
                            </marker>
                        </defs>
                        <g id="zoomable"></g>
                    </svg>
                    <div id="tooltip" class="tooltip"></div>
                </div>
            </div>

            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
                <h4 class="panel-title">
                    <a id="DescriptionLink" data-toggle="collapse" data-parent="#pathwayAccordion"
                       href="#Description">Description</a></h4>
            </div>
            <div id="Description" class="panel-collapse collapse in">
                <div class="panel-body list-group-item" id="DescriptionContent">
                    {{ pathway.description | safe }}
                </div>
            </div>
        </div>
    </div>
    <script>

        function goFullscreen(id) {
            var element = document.getElementById(id);
            if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            }
        }

        function transformReferences(text) {
            return text.replace(/\[\s*(http[^\]|]+)\s*\|\s*([^\]]+)\s*\]/g, '<a target="parent" href="$1">$2</a>');
        }

        pathway = {{ pathway.d3_json | safe }};

        $(function () {
            draw(pathway, 'vizdiv');
            // TODO fix somewhere else...
            var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
            $('#DescriptionContent').html(newDesc);
        });

    </script>
{% endblock content %}