{% extends "ctf/base/base.html" %}

{% block title %}Flags{% endblock %}

{% block head %}
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script src="https://cytoscape.org/cytoscape.js-popper/cytoscape-popper.js"></script>
    <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

    <style>
        #cy {
            width: 100vw;
            height: 100vh;
        }
    </style>
{% endblock %}

{% block body %}
    <div id="cy"></div>
    <script>
        function tippyFactory(reference, content) {
            // create a basic element for the tips object
            const element = document.createElement('div');

            // build the tip inside
            return tippy(element, {
                getReferenceClientRect: reference.getBoundingClientRect,
                trigger: "manual",
                content: content,

                arrow: true,
                placement: "bottom",
                hideOnClick: false,
                sticky: "reference",

                interactive: true,
                appendTo: cy.container()
            });
        }
        // use the factory when creating tips
        cytoscape.use(cytoscapePopper(tippyFactory));

        // create a graph based on our data
        const cy = cytoscape({
            container: document.getElementById('cy'),
            // content
            elements: [
                // nodes
                {% for flag in flags %}
                    {data: {
                        id: "{{ flag.id }}",
                        name: "{{ flag.name }}",
                        description: "{{ flag.description }}",
                        teams: [
                            {% for team in flag.validated_by_teams.all %}
                            "{{ team.name }}",
                            {% endfor %}
                        ],
                    }},
                {% endfor %}

                // links
                {% for flag in flags %}
                    {% for child_flag in flag.children.all %}
                        {data: {source: "{{ child_flag.id }}", target: "{{ flag.id }}"}},
                    {% endfor %}
                {% endfor %}
            ],
            // style
            style: [
                {selector: 'node', style: {'label': 'data(name)'}},
                {selector: 'edge', style: {'target-arrow-shape': 'triangle'}},
            ],
            // layout
            layout: {
              name: 'breadthfirst',
              directed: true
            }
        });

        // show the description of the nodes on hover
        cy.ready(() => {
            cy.nodes().forEach(node => {
                // build the tip
                const tippy = node.popper({
                    content: () => {
                        const div = document.createElement('div');
                        div.innerHTML = node.data("description") + "<br/>---<br/>" + node.data("teams");
                        return div;
                    },
                    trigger: 'manual',
                    interactive: true,
                    appendTo: cy.container()
                });

                // events
                node.on('mouseover', () => tippy.show());
                node.on('mouseout', () => tippy.hide());
            });
        });
    </script>
{% endblock %}