{% 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>

<p></p>

<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">
                                <li>
                                    <a role="button" data-toggle="modal" id="showCompoundNames">
                                        <span class="glyphicon glyphicon-eye-open"></span> Show Compound Names</a>
                                </li>
                            </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>
                        <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>
                        &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>
<script>

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 %}