{% load i18n %}
{% load static %}
<h3>{% translate "Nom de la sélection :" %} {{select.name}}</h3>
{% if select %}
<button id="dgs" data-name="{{ select.name }}" onclick="del_digraphe_select()">
  {% translate "Supprimer la sélection" %} {{select.name}}
</button>
<button id="dgs" data-name="{{ select.name }}" onclick="mv_digraphe_select()">
  {% translate "Renommer la sélection" %} {{select.name}}
  {% translate "en ..." %}
</button>
<input id="name2" value="alt_{{ select.name }}"></input>
{% else  %}
<input id="name0" placeholder="{% translate 'Nouveau nom' %}"></input>
<button id="savebutton" onclick="save_digraphe_select(this)">
  {% translate "Enregistrer cette sélection" %}
</button>
{% endif %}
<dl>
  <dt>noeud cause</dt>
  <dd id="left">
    <input class="select" type="text"
	   value="{{ select.left_selector }}"
	   style="width: 40ex;"/>
    <table>
      <tr>
	<th>Champ de valeur</th>
	<td>
	  <input class="val"
		 value="{{ select.left_val }}"/>
	</td>
      </tr>
      <tr>
	<th>Champ de label</th>
	<td>
	  <input class="label"
		 value="{{ select.left_text }}"/>
	</td>
      </tr>
    </table>
    <button onclick="test_selector('left', 'l')">
      Test
    </button>
    <div class="autres-boutons">
    </div>
  </dd>
  <dt>noeud effet</dt>
  <dd id="right">
    <input class="select" type="text"
	   value="{{ select.right_selector }}"
	   style="width: 40ex;"/>
    <table>
      <tr>
	<th>Champ de valeur</th>
	<td>
	  <input class="val"
		 value="{{ select.right_val }}"/>
	</td>
      </tr>
      <tr>
	<th>Champ de label</th>
	<td>
	  <input class="label"
		 value="{{ select.right_text }}"/>
	</td>
      </tr>
    </table>
    <button onclick="test_selector('right', 'r')">
      Test
    </button>
    <div class="autres-boutons">
    </div>
  </dd>
</dl>
<h3>{% translate "Digraphes déjà définis :" %} {{ digraphs | length }}</h3>
{% for dg in digraphs %}
<div>
  <h4>{{ dg.date_creation }}</h4>
  <button class="del" data-id='{{ dg.id }}'>
    {% translate "Effacer ce digraphe" %}
  </button>
  <button onclick="copy_digraph(this)">
    {% translate "Copier dans la zone d'édition" %}
  </button>
  <textarea rows="4" cols="60" readonly="true">{{ dg.dot_code }}</textarea>
</div>
{% endfor %}

<script type="module">
  import { digraph_select } from "{% static '/js/graphes1.js' %}"
  
  /**
   * Suppression d'un digraphe
   **/
  function del_digraph(){
      $.post(
	  "del_digraph",{
	      csrfmiddlewaretoken: getCookie('csrftoken'),
	      id: $(this).data("id"),
	  }, function(data){
	      digraph_select()
	  })
  }
  $("button.del").on("click", del_digraph)
</script>
