<h2>
    <span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Edge")%></span>
</h2>
<p>
    <label><%-renkan.translate("Title:")%></label>
    <input class="Rk-Edit-Title" type="text" value="<%-edge.title%>" />
</p>
<% if (options.show_edge_editor_uri) { %>
    <p>
        <label><%-renkan.translate("URI:")%></label>
        <input class="Rk-Edit-URI" type="text" value="<%-edge.uri%>" />
        <a class="Rk-Edit-Goto" href="<%-edge.uri%>" target="_blank"></a>
    </p>
    <% if (options.properties.length) { %>
        <p>
            <label><%-renkan.translate("Choose from vocabulary:")%></label>
            <select class="Rk-Edit-Vocabulary">
                <% _.each(options.properties, function(ontology) { %>
                    <option class="Rk-Edit-Vocabulary-Class" value="">
                        <%- renkan.translate(ontology.label) %>
                    </option>
                    <% _.each(ontology.properties, function(property) { var uri = ontology["base-uri"] + property.uri; %>
                        <option class="Rk-Edit-Vocabulary-Property" value="<%- uri %>"
                            <% if (uri === edge.uri) { %> selected<% } %>>
                            <%- renkan.translate(property.label) %>
                        </option>
                    <% }) %>
                <% }) %>
            </select>
        </p>
<% } } %>
<% if (options.show_edge_editor_style) { %>
    <div class="Rk-Editor-p">
      <% if (options.show_edge_editor_style_color) { %>
      <div id="Rk-Editor-p-color">
        <span class="Rk-Editor-Label"><%-renkan.translate("Edge color:")%></span>
        <div class="Rk-Edit-ColorPicker-Wrapper">
            <span class="Rk-Edit-Color" style="background: &lt;%-edge.color%>;">
                <span class="Rk-Edit-ColorTip"></span>
            </span>
            <%= renkan.colorPicker %>
            <span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
        </div>
      </div>
      <% } %>
      <% if (options.show_edge_editor_style_dash) { %>
      <div id="Rk-Editor-p-dash">
        <span class="Rk-Editor-Label"><%-renkan.translate("Dash:")%></span>
        <input type="checkbox" name="Rk-Edit-Dash" class="Rk-Edit-Dash" <%- edge.dash %> />
      </div>
      <% } %>
      <% if (options.show_edge_editor_style_thickness) { %>
      <div id="Rk-Editor-p-thickness">
          <span class="Rk-Editor-Label"><%-renkan.translate("Thickness:")%></span>
          <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Thickness-Down">-</a>
          <span class="Rk-Edit-Size-Disp" id="Rk-Edit-Thickness-Value"><%- edge.thickness %></span>
          <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Thickness-Up">+</a>
      </div>
      <% } %>
      <% if (options.show_edge_editor_style_arrow) { %>
      <div id="Rk-Editor-p-arrow">
        <span class="Rk-Editor-Label"><%-renkan.translate("Arrow:")%></span>
        <input type="checkbox" name="Rk-Edit-Arrow" class="Rk-Edit-Arrow" <%- edge.arrow %> />
      </div>
      <% } %>
    </div>
<% } %>
<% if (options.show_edge_editor_direction) { %>
    <p>
        <span class="Rk-Edit-Direction"><%- renkan.translate("Change edge direction") %></span>
    </p>
<% } %>
<% if (options.show_edge_editor_nodes) { %>
    <p>
        <span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span>
        <span class="Rk-UserColor" style="background: <%-edge.from_color%>;"></span>
        <%- shortenText(edge.from_title, 25) %>
    </p>
    <p>
        <span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span>
        <span class="Rk-UserColor" style="background: >%-edge.to_color%>;"></span>
        <%- shortenText(edge.to_title, 25) %>
    </p>
<% } %>
<% if (options.show_edge_editor_creator && edge.has_creator) { %>
    <p>
        <span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span>
        <span class="Rk-UserColor" style="background: &lt;%-edge.created_by_color%>;"></span>
        <%- shortenText(edge.created_by_title, 25) %>
    </p>
<% } %>