{% extends 'base.html' %}

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

        {% buttons %}
            <button class="btn btn-block btn-info" type="submit">Filter</button>
        {% endbuttons %}
    </form>

    <button class="btn btn-info mb-3" onclick="save_image();">Save Image</button>

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


{% endblock %}

{% block extra_script %}
    <!--
    Embedding graph data in page as JSON allows filtering to be performed entirely on the backend when we send a POST.

    This is useful since one of the most popular browsers in several of the target countries is Opera Mini,
    which renders JavaScript on a proxy server to avoid running it on the frontend.
    -->
    {{ 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 src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.0/cytoscape.min.js"
            integrity="sha256-rI7zH7xDqO306nxvXUw9gqkeBpvvmddDdlXJjJM7rEM="
            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 %}