{% extends "base.html" %}

{% import "bootstrap5/utils.html" as util %}

{% block title %}SeMRA{% endblock %}

{% block head %}
{{ super() }}
<style>
    #cy {
        width: 100%;
        height: 500px;
        display: block;
    }
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
<script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
<script src="https://cytoscape.org/cytoscape.js-cola/cytoscape-cola.js"></script>
{% endblock %}

{% block scripts %}
<script>
    let edgeLabel = {
        'oboinowl:hasDbXref': 'xref',
        'skos:exactMatch': 'exact'
    };
    $.getJSON("/api/cytoscape/{{ curie }}", function (data) {
        // console.log(data);
        var cy = cytoscape({
            container: document.getElementById('cy'),
            elements: data,
            style: [
                {
                    selector: 'node',
                    style: {
                        'label': function (node) {
                            return `${node.data("name")}\n${node.data("curie")}`
                        },
                        'width': '30px',
                        'height': '30px',
                        'color': 'blue',
                        'background-fit': 'contain',
                        'background-clip': 'none',
                        'text-wrap': 'wrap'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'label': function (edge) {
                            return `${edgeLabel[edge.data("type")]}`
                        },
                        "curve-style": "bezier",
                        'text-background-color': 'yellow',
                        'text-background-opacity': 0.4,
                        'width': '2px',
                        'target-arrow-shape': 'triangle',
                        'control-point-step-size': '140px',
                        autorotate: true
                    }
                }
            ],
            layout: {
                name: 'cola',
                nodeSpacing: function( node ){ return 75; },
                // nodeDimensionsIncludeLabels: true
            }
        });
    });
</script>
{% endblock %}

{% block content %}
<div class="container" style="margin-top: 50px; margin-bottom: 50px">
    {{ util.render_messages(dismissible=True, container=False) }}
    <div class="row">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    {{ name }} <a class="badge badge-info" href="https://bioregistry.io/{{ curie }}">{{ curie }}</a>
                </h5>
                <h6>Exact Matches</h6>
            </div>
            <table class="table table-striped table-borderless">
                <tbody>
                {% for exact_match, name in exact_matches.items() %}
                <tr>
                    <td>
                        <code>{{ exact_match.curie }}</code>
                    </td>
                    <td>
                        {{ name }}
                    </td>
                    <td>
                        <a href="{{ url_for('view_concept', curie=exact_match.curie) }}">SeMRA</a>
                    </td>
                    <td>
                        <a href="https://bioregistry.io/{{ exact_match.curie }}">Bioregistry</a>
                    </td>
                    {% if has_biomappings %}
                    <td>
                        {% if reference.prefix == exact_match.prefix %}

                        Handle in-prefix mapping

                        {% else %}
                        <a href="{{ url_for('mark_exact_incorrect', source=curie, target=exact_match.curie) }}">
                            Mark as Incorrect
                        </a>
                        {% endif %}
                    </td>
                    {% endif %}
                </tr>
                {% endfor %}
                </tbody>
            </table>
            <div id="cy"></div>
        </div>
    </div>
</div>
{% endblock %}
