<!DOCTYPE html>
<html>
    <head>
        <!-- Standard Meta -->
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <title>Tactician Graph Visualizer</title>

        <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jquery-mousewheel@3.1.13/jquery.mousewheel.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jquery-color@2.2.0/dist/jquery.color.min.js"></script>
        <link rel="stylesheet" type="text/css"
              href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
        <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/LasseBlaauwbroek/jquery.graphviz.svg@dc1bc39e5ce259d10dd5dad18a9049dae3b05d64/js/jquery.graphviz.svg.min.js"></script>
        <style>
         :root {
             --settings-width: 300px;
         }
         .inner-body {
             width: 100%;
             height: 100%;
         }
         .settings {
             width: var(--settings-width) !important;
             left: calc(0px - var(--settings-width));
             height: 100% !important;
             overflow-y: auto;
             position: fixed;
             transition: all 0.5s ease;
         }
         .settings ~ div {
             width: 100%;
             min-height: 100%;
             transition: all 0.5s ease;
         }
         .settings.active {
             left: 0;
         }
         .settings.active ~ div {
             width: calc(100% - var(--settings-width));
             margin-left: var(--settings-width);
         }
         .container {
             max-height:100%;
             display: flex; flex-direction: column;
         }
         .container > * {
             flex-shrink: 0;
         }
         #graph {
             flex-grow: 1;
             flex-shrink: 1;
             overflow: scroll;
	           display: grid;
         }
         #graph > * {
             margin: auto;
         }
         .pre-container {
             margin: 10px 30px;
         }
         pre {
             text-overflow: ellipsis;
             overflow: hidden;
             margin: 0;
         }
         /* stop people selecting text on nodes */
         .graphviz-svg text {
             -webkit-touch-callout: none;
             -webkit-user-select: none;
             -khtml-user-select: none;
             -moz-user-select: none;
             -ms-user-select: none;
             user-select: none;
         }
        </style>
    </head>

    <body><div class="inner-body"><!-- Extra div needed for dimmer -->
        <div class="ui menu vertical settings active">
            <div  class="ui form item">
                <form id="settings-form" autocomplete="off">
                    <input type="hidden" name="no_defaults" value="true">
                    <div class="field">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="show_trivial_evar_substs" name="show_trivial_evar_substs"
                                {% if settings.show_trivial_evar_substs %}checked{% endif %}>
                            <label for="show_trivial_evar_substs">Show trivial evar substitutions</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="hide_proof_terms" name="hide_proof_terms"
                                {% if settings.hide_proof_terms %}checked{% endif %}>
                            <label for="hide_proof_terms">Hide proof terms in outcomes</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="show_edge_labels" name="show_edge_labels"
                                {% if settings.show_edge_labels %}checked{% endif %}>
                            <label for="show_edge_labels">Show edge labels</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="order_edges" name="order_edges"
                                {% if settings.order_edges %}checked{% endif %}>
                            <label for="order_edges">Order outgoing edges</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="concentrate_edges" name="concentrate_edges"
                                {% if settings.concentrate_edges %}checked{% endif %}>
                            <label for="concentrate_edges">Concentrate edges</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="show_non_anonymized_tactics" name="show_non_anonymized_tactics"
                                   {% if settings.show_non_anonymized_tactics %}checked{% endif %}>
                            <label for="show_non_anonymized_tactics">Show non-anonymized tactics</label>
                        </div>
                    </div>
                    <div class="field">
                        <label>Ignore edges</label>
                        <select class="ui selection dropdown search clearable" name="ignore_edges" multiple>
                            {% for (value, name) in edge_labels %}
                            <option value="{{ value }}"
                                    {% if value in settings.ignore_edges %}selected{% endif %}>{{ name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="field">
                        <label>Unshare nodes</label>
                        <button class="tiny ui button compact fluid"
                                onclick="$('#unshare_nodes option').prop('selected', true)">
                            Select All
                        </button>
                        <select class="ui selection dropdown search clearable"
                                id="unshare_nodes" name="unshare_nodes" multiple>
                            {% for (value, name) in node_labels %}
                            <option value="{{ value }}"
                                    {% if value in settings.unshare_nodes %}selected{% endif %}>{{ name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="field" id="settings-submit">
                        <input type="submit" class="ui button">
                    </div>
                </form>
                <button class="ui button fluid"
                        onclick="l=window.location; l.href=l.protocol+'//'+l.host+l.pathname">
                    Restore Defaults
                </button>
                <p>
                    Shift+Scroll to zoom<br>
                    Shift+Click a node to highlight connections
                </p>
            </div>
        </div>
        <div class="container">
            <div class="ui top attached menu">
                <a class="item" onclick="$('.settings').toggleClass('active')">
                    <i class="sidebar icon"></i>
                    Settings
                </a>
                <div class="ui item breadcrumb">
                    {% for (name, url) in location %}
                    <i class="right chevron icon divider"></i>
                    {% if loop.index0 == active_location %}
                    <div class="active section">{{ name }}</div>
                    {% else %}
                    <a class="section" href="{{ url }}">{{ name }}</a>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
            {% if text %}
            <div class="pre-container" style="cursor: pointer" onclick="$('#text-modal').modal('show')">
                {% for info in text %}
                <pre class="code">{{ info }}</pre>
                {% endfor %}
            </div>
            <div id="text-modal" class="ui modal">
                <div class="scrolling content">
                    {% for info in text %}
                    <p style="font-family: monospace">{{ info }}</p>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            <div id="graph">
                {{ svg|safe }}
            </div>
        </div>
        <script>
         $('.ui.dropdown').dropdown()
         $('.ui.sidebar').sidebar()
         $("#settings-form").find(':input').each(() =>
             $(this).change(() => // Timeout because some buttons like 'select all' trigger multiple change events
                 setTimeout(() => $('#settings-form').submit(), 5)))
         $('#settings-submit').hide()
        </script>
        {% for id, text in popups %}
        <div id="{{ id }}-modal" class="ui modal">
            <div class="scrolling content" style="font-family: monospace">{{ text|safe }}</div>
        </div>
        <script>$("#{{ id }}").click(() => $('#{{ id }}-modal').modal('show'))</script>
        <style>#{{ id }} { cursor: pointer; }</style>
        {% endfor %}
        <script>
 			   $(document).ready(function () {
            $("#graph").graphviz({
                 svg: $("#graph").innerHTML,
                 shrink: 0,
                 tooltips: {
                     init: function ($graph) {},
                     show: function () {},
                     hide: function () {},
                     update: function () {}
                 },
                 ready: function() {
                     var gv = this
                     this.$svg[0].scrollIntoView({behavior: "auto", block: "center", inline: "center"});
                     gv.nodes().click(function (e) {
                        if (e.shiftKey) {
                            var $set = $()
                            $set.push(this)
                            $set = $set.add(gv.linkedFrom(this, true))
                            $set = $set.add(gv.linkedTo(this, true))
                            gv.highlight($set, true)
                            gv.bringToFront($set)
                            return false
                        }
                     })
                     $(document).keydown(function (evt) {
                         if (evt.keyCode == 27) {
                             gv.highlight()
                         }
                     })
                    $("#graph").click(function (evt) {
                        gv.highlight()
                    })
                 }
             });
         });
		    </script>
    </div></body>
</html>
