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

{% block contents %}
<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 left_vertices %}
	  <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 right_vertices %}
	  <option value="{{ nd.val }}">{{ nd.text }}</option>
	  {% endfor %}
	</select>
      </li>
      <li>
	<button class="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">
  import { newNode, mecaOnOff, toDot } from "{% static '/js/graphes.js' %}"
  //test()
  $(".sel-node").on("click", newNode)
  $(".meca-button").on("click", mecaOnOff)
  $(".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 %}

