<h2>
    <span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Node")%></span>
</h2>
<p>
    <label><%-renkan.translate("Title:")%></label>
    <input class="Rk-Edit-Title" type="text" value="<%-node.title%>" />
</p>
<% if (options.show_node_editor_uri) { %>
    <p>
        <label><%-renkan.translate("URI:")%></label>
        <input class="Rk-Edit-URI" type="text" value="<%-node.uri%>" />
        <a class="Rk-Edit-Goto" href="<%-node.uri%>" target="_blank"></a>
    </p>
<% } %> <% if (options.show_node_editor_description) { %>
    <p>
        <label><%-renkan.translate("Description:")%></label>
        <textarea class="Rk-Edit-Description"><%-node.description%></textarea>
    </p>
<% } %> <% if (options.show_node_editor_size) { %>
    <p>
        <span class="Rk-Editor-Label"><%-renkan.translate("Size:")%></span>
        <a href="#" class="Rk-Edit-Size-Down">-</a>
        <span class="Rk-Edit-Size-Value"><%-node.size%></span>
        <a href="#" class="Rk-Edit-Size-Up">+</a>
    </p>
<% } %> <% if (options.show_node_editor_style) { %>
    <div class="Rk-Editor-p">
      <div id="Rk-Editor-p-color">
        <span class="Rk-Editor-Label">
        <%-renkan.translate("Node color:")%></span>
        <div class="Rk-Edit-ColorPicker-Wrapper">
            <span class="Rk-Edit-Color" style="background: <%-node.color%>;">
                <span class="Rk-Edit-ColorTip"></span>
            </span>
            <%= renkan.colorPicker %>
            <span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
        </div>
      </div>
      <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" <%- node.dash %> />
      </div>
    </div>
<% } %> <% if (options.show_node_editor_image) { %>
    <div class="Rk-Edit-ImgWrap">
        <div class="Rk-Edit-ImgPreview">
            <img src="<%-node.image || node.image_placeholder%>" />
            <% if (node.clip_path) { %>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
                    <path style="stroke-width: .02; stroke:red; fill-opacity:.3; fill:red;" d="<%- node.clip_path %>" />
                </svg>
            <% }%>
        </div>
    </div>
    <p>
        <label><%-renkan.translate("Image URL:")%></label>
        <div>
            <a class="Rk-Edit-Image-Del" href="#"></a>
            <input class="Rk-Edit-Image" type="text" value='<%-node.image%>' />
        </div>
    </p>
<% if (options.allow_image_upload) { %>
    <p>
        <label><%-renkan.translate("Choose Image File:")%></label>
        <input class="Rk-Edit-Image-File" type="file" accept="image/*" />
    </p>
<% }%><% } %> <% if (options.show_node_editor_creator && node.has_creator) { %>
    <p>
        <span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span>
        <span class="Rk-UserColor" style="background: <%-node.created_by_color%>;"></span>
        <%- shortenText(node.created_by_title, 25) %>
    </p>
<% } %> <% if (options.change_shapes) { %>
    <p>
        <label><%-renkan.translate("Shapes available")%>:</label>
        <select class="Rk-Edit-Shape">
          <% _.each(shapes, function(shape) { %>
            <option class="Rk-Edit-Vocabulary-Property" value="<%- shape %>"<% if (node.shape === shape) { %> selected<% } %>>
                <%- renkan.translate(shape.charAt(0).toUpperCase() + shape.substring(1)) %>
            </option>
          <% }); %>
        </select>
    </p>
<% } %>