{% extends "project.html" %}

{% block title %}Project - Graph{% endblock %}

{% block head %}
    {{ super() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dagre-d3@0.6.1/dist/dagre-d3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/graph.css') }}">
{% endblock %}

{% block project_actions %}
  <form id="search_table" method="post" action="{{ url_for('project_graph', filename=project.filename) }}">
    <div class="input-group">
      <div class="form-outline">
        <input type="search" id="form1" name="query" class="form-control" placeholder="Table Name" value="{{ query }}"/>
      </div>
      <button type="submit" class="btn btn-primary">Search</button>
    </div>
  </form>
{% endblock %}

{% block project_content %}
    <div class="card border-primary">
      <div class="card-body">
        <svg id="graph-svg"></svg>
      </div>
    </div>
{% endblock %}

{% block footer %}
    {{ super() }}
    <script>
        const nodes = {{ project.nodes | tojson }};
        const edges = {{ project.edges | tojson }};
    </script>
    <script src="{{ url_for('static', filename='js/graph.js') }}"></script>
{% endblock %}