{% extends 'gestion/base.html' %}
{% load i18n %}
{% load static %}

{% block contents %}
<textarea id="debug"></textarea>
<div id="grille">
  <div id="control">
    <h3>Les contrôles</h3>
    <ul>
      <li>
	Déplacement automatique des étiquettes<br>
	<button class="meca-button" data-meca="on"> Activer</button>
	<button class="meca-button" data-meca="off">Désactiver</button>
      </li>
      <li>Lien<span id="not_linking"> : cliquer sur un petit cercle</span><span id="linking" style="display: none;"> en cours de construction : cliquer sur un deuxième petit cercle</span></li>
      <li>
	<button class="sel-node" data-anchor="right">Créer des Nœuds gauches</button>
	<select multiple>
	  {% for ng in lr_query.left %}
	  <option value="{{ ng.val }}">{{ ng.text }}</option>
	  {% endfor %}
	</select>
      </li>
      <li>
	<button class="sel-node" data-anchor="left">Créer des Nœuds droits</button>
	<select multiple>
	  {% for nd in lr_query.right %}
	  <option value="{{ nd.val }}">{{ nd.text }}</option>
	  {% endfor %}
	</select>
      </li>
      <li>
	<button id="toDot">Exprimer en DOT</button>
      </li>
    </ul>
  </div>
  <div id="svg" style="height: 500px; overflow-y: auto"></div>
</div>

<style type="text/css">
  #grille{
      display: grid;
      grid-template-columns: 250px 1fr;
      column-gap: 10px;
      width: 100%;
  }

  #control{
      grid-column: 1;
      border: 1px solid navy;
      background: white;
      padding: 5px;
      border-radius: 5px;
  }

  #svg{
      grid-column: 2;
      border: 1px solid navy;
      border-radius: 5px;
      background: white;
  }
</style>

<script type="module" src="{% static '/js/svg.draggable.js/src/svg.draggable.js' %}">
</script>
<script type="module" src="{% static '/js/svg.panzoom.js/src/svg.panzoom.js' %}">
</script>


<script type="module">
  import { SVG, G } from "{% static 'js/svg.js/src/main.js' %}"
  import {toDot, addAnchors, makeDraw } from "{% static 'js/graphes1.js' %}"
  // mise en place du graphe de code svg_elts
  var draw = makeDraw('{{ svg_elts| safe }}', '#svg', 500)
  // mise en place des cercles pour créer des liens
  draw.find(".node").each(addAnchors)
  // fonction toDot pour le bouton "Exprimer en DOT"
  $("#toDot").on("click", toDot)
</script>

<div id="node-dialog" style="display: none">
</div>

<div id="link-dialog" style="display: none">
  <fieldset>
    <legend>Contrôles pour le lien « <span class="ident"></span> »</legend>
    <table>
      <tr>
	<td colspan = "2">
	  <button class="del_button" style="width: 100%">
	    Effacer le lien
	  </button>
	</td>
      </tr>
      <tr>
	<td>
	  <label for="input-label">Étiquette</label>
	  <input id = "input-label" class="label" type="text" placeholder="Nouvelle étiquette"/>
	</td>
	<td>
	  <button class="label_button" style="display: inline-block">
	    Appliquer l&apos;étiquette
	  </button>
	</td>
      </tr>
    </table>
  </fieldset>
</div>
{% endblock %}

