{% extends 'base.html' %}

{% block extra_head %}
    {# There's no 'form' so need to add this to load CSS / JS #}
    {{ relationship_form.media.css }}

    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-panzoom/2.5.3/cytoscape.js-panzoom.min.css"
        integrity="sha512-MJrzp+ZGajx6AWCCCmjBWo0rPFavM1aBghVUSVVa0uYv8THryrtEygjj5r2rUg/ms33SkEC5xJ3E4ycCmxWdrw=="
        crossorigin="anonymous" />
{% endblock %}

{% block content %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Network</li>
        </ol>
    </nav>

    <h1>Network View</h1>

    <hr>

    <form class="form"
          method="POST">
        {% csrf_token %}
        {% load bootstrap4 %}

        <div class="row">
            <div class="col-md-4">
                <h3>Filter Relationships</h3>
                {% bootstrap_form relationship_form exclude='date' %}
            </div>

            <div class="col-md-4">
                <h3>Filter People</h3>
                {% bootstrap_form person_form exclude='date' %}
            </div>

            <div class="col-md-4">
                <h3>Filter Organisations</h3>
                {% bootstrap_form organisation_form exclude='date' %}
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <hr>
                {% bootstrap_field relationship_form.date %}
            </div>

            <div class="col-md-4">
                <hr>
                {% bootstrap_field person_form.date %}
            </div>

            <div class="col-md-4">
                <hr>
                {% bootstrap_field organisation_form.date %}
            </div>
        </div>

        <hr>

        {% buttons %}
            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-block btn-success" type="submit">Filter</button>
                </div>

                <div class="col-md-6">
                    <input class="btn btn-block btn-danger" type="button" value="Reset Filters" onClick="reset_filters();" />
                </div>
            </div>
        {% endbuttons %}
    </form>

    <div class="row">
        <div class="col-md-4">
            <button class="btn btn-block btn-info mb-3" onclick="save_image();">Save Image</button>
        </div>

        <div class="col-md-4">
            <button class="btn btn-block btn-info mb-3" onclick="toggle_organisations();">Toggle Organisations</button>
        </div>

        <div class="col-md-4">
            <button class="btn btn-block btn-info mb-3" onclick="toggle_anonymise_people();">Toggle Anonymise People</button>
            <button class="btn btn-block btn-info mb-3" onclick="toggle_anonymise_organisations();">Toggle Anonymise Organisations</button>
        </div>
    </div>

    <div id="cy"
         class="mb-2"
         style="width: 100%; min-height: 1000px; flex-grow: 1; border: 2px solid black; z-index: 999"></div>
{% endblock %}

{% block extra_script %}
    {{ relationship_form.media.js }}

    <!--
    Embedding graph data in page as JSON allows filtering to be performed entirely on the backend when we send a POST.
    -->
    {{ person_set|json_script:'person-set-data' }}

    {{ organisation_set|json_script:'organisation-set-data' }}

    {{ relationship_set|json_script:'relationship-set-data' }}

    {{ organisation_relationship_set|json_script:'organisation-relationship-set-data' }}

    <script type="application/javascript">
        function reset_filters() {
            $('select').val(null).trigger('change');
        }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.2/cytoscape.min.js"
            integrity="sha512-CBGCXtszkG5rYlQSTNUzk54/731Kz28WPk2uT1GCPCqgfVRJ2v514vzzf16HuGX9WVtE7JLqRuAERNAzFZ9Hpw=="
            crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-panzoom/2.5.3/cytoscape-panzoom.min.js"
            integrity="sha512-coQmIYa/SKS8wyZw14FTLJhHmp5jqIO2WxyGhjAnLGdym6RsLX412wLO1hqnFifU0NacrJvlUukRJEwjRkm0Xg=="
            crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"
            integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw=="
            crossorigin="anonymous"></script>

    {% load staticfiles %}
    <script src="{% static 'js/network.js' %}"></script>
{% endblock %}