{% extends "base.html" %}

{% set active_page = "Database" %}

{% block head %}
    <title>Dependency Graph</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dependency_graph.css') }}">
   
    <script src="{{ url_for('static', filename='web_js/vis-network.min.js') }}"></script> 

    <script type="text/javascript" src="{{ url_for('static', filename='js/dependency_graph.js') }}"></script>

    <script type="text/javascript">
        $(window).on("load", () => {
            dependencyGraph(
                {{ nodes | safe }},
                {{ edges | safe }},
                {{ groups | safe }},
                {{ colors | safe }}
            );
        });
    </script>
{% endblock %}
    
{% block style %}
    <link href="{{ url_for('static', filename='web_css/vis-network.min.css') }}" rel="stylesheet" type="text/css" />   
{% endblock %}


{% block body %}
    <div class="header mb-4" style="word-wrap: break-word">
        <h4>
            Dependency Graph for {{ uid | replace_uid_with_hid }} in {{ root_uid | replace_uid_with_hid }}
            <br>
            <span style="font-size: 15px"><strong>UID:</strong> {{ uid }}</span>
        </h4>
    </div>
    <div class="row lb-3">
        <div class="col-lg-8 col-xl-10">
            <div id="dependencyGraph" class="border rounded"></div>
        </div>
        <div class="col-lg-4 col-xl-2">
            <div class="accordion" id="graphSidebar">
                <div class="card">
                  <div class="card-header" id="legendHeader" style="background-color: #255e54; padding: 0;">
                      <button class="btn btn-link text-white" data-toggle="collapse" data-target="#legend" aria-expanded="true" aria-controls="legendBody" style="text-decoration: none; font-weight: 400;">
                        Legend
                      </button>
                  </div>
                  <div class="collapse show" aria-labelledby="legendHeader">
                    <div id="legend" class="card-body" style="height: 125px; overflow: auto;">

                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" id="detailsHeader" style="background-color: #255e54; padding: 0;">
                      <button class="btn btn-link text-white" data-toggle="collapse" data-target="#details" aria-expanded="true" aria-controls="details" style="text-decoration: none; font-weight: 400;">
                        Node Details
                      </button>
                  </div>
                  <div id="details" class="collapse show" aria-labelledby="detailsHeader">
                    <div id="detailsBody" class="card-body" style="height: 150px; overflow: auto;">
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" id="nodesHeader" style="background-color: #255e54; padding: 0;">
                      <button class="btn btn-link text-white" data-toggle="collapse" data-target="#nodesBody" aria-expanded="true" aria-controls="nodesBody" style="text-decoration: none; font-weight: 400;">
                        Connected Nodes
                      </button>
                  </div>
                  <div id="nodesBody" class="collapse show" aria-labelledby="nodesHeader">
                    <div class="card-body">
                      <form>
                        <div class="form-group">
                          <input type="text" class="form-control" id="nodeFilter" placeholder="Filter by name/mime..." />
                        </div>
                      </form>
                      <div id="nodesList" style="height: 314px; overflow: auto;">
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}