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

{% block contents %}
<div id="grille">
  <div id="control">
    <h3>Les contrôles</h3>
    <ul>
      <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>
    </ul>
  </div>
  <div id="svg"></div>
</div>

<style type="text/css">
  #grille{
      display: grid;
      grid-template-columns: 200px 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 { test } from "{% static '/js/graphes.js' %}"
  test()
</script>

<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'étiquette
	  </button>
	</td>
      </tr>
    </table>
  </fieldset>
</div>
{% endblock %}

