{% extends "base.html" %}
{% block title %}Patch{% endblock %}
{% block mainclass %}editor-main{% endblock %}
{% block toolbar %}
<div class="tools">
  <div class="dropdown" id="add-menu">
    <button type="button" class="btn" id="add-btn" aria-haspopup="true" aria-expanded="false">Add &#9662;</button>
    <div class="menu" role="menu">
      <button type="button" role="menuitem" data-add="client_source">Add Client Source</button>
      <button type="button" role="menuitem" data-add="client_sink">Add Client Sink</button>
      <button type="button" role="menuitem" data-add="public_sink">Add Public Sink</button>
      <button type="button" role="menuitem" data-add="tunnel_source">Add Tunnel Source</button>
      <button type="button" role="menuitem" data-add="tunnel_sink">Add Tunnel Sink</button>
      <button type="button" role="menuitem" data-add="splitter">Add Splitter</button>
    </div>
  </div>
  <button type="button" class="btn" id="fit-btn" title="Fit all nodes into view">Fit</button>
  <button type="button" class="btn" id="tidy-btn" aria-pressed="false" title="Snap all nodes to the grid">Tidy</button>
  <span id="save-state" class="save-state"></span>
</div>
{% endblock %}
{% block content %}
<div id="editor" tabindex="0">
  <svg id="wires" aria-hidden="true"><g id="wire-layer"></g></svg>
  <div id="canvas"></div>
  <div class="editor-hint">Drag from an output socket to an input socket to patch. Drag empty space to pan, scroll to zoom. Right-drag to select several nodes, then drag one of them to move them together. Click a wire and use its x button (or double-click it) to remove it; drag a wire off an input to reconnect it. Selected nodes are removed with Delete.</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='common.js') }}"></script>
<script src="{{ url_for('static', filename='patch.js') }}"></script>
{% endblock %}