<% //TODO: change class to id %>

<h2>

    <span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Node")%></span>

</h2>

<p>

    <label><%-renkan.translate("Title:")%></label>

    <% if (options.show_node_editor_title_richtext) { %>

        <div class="Rk-Edit-Title" contenteditable="true"><%=node.title%></div>

    <% } else { %>

        <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.change_types) { %>

    <p>

        <label><%-renkan.translate("Types available")%>:</label>

        <select class="Rk-Edit-Type">

          <% _.each(types, function(type) { %>

            <option class="Rk-Edit-Vocabulary-Property" value="<%- type %>"<% if (node.type === type) { %> selected<% } %>>

                <%- renkan.translate(type.charAt(0).toUpperCase() + type.substring(1)) %>

            </option>

          <% }); %>

        </select>

    </p>

<% } %> <% if (options.show_node_editor_description) { %>

    <p>

        <label><%-renkan.translate("Description:")%></label>

        <% if (options.show_node_editor_description_richtext) { %>

            <div class="Rk-Edit-Description" contenteditable="true"><%=node.description%></div>

        <% } else { %>

            <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-Btn" id="Rk-Edit-Size-Down">-</a>

        <span class="Rk-Edit-Size-Disp" id="Rk-Edit-Size-Value"><%-node.size%></span>

        <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Size-Up">+</a>

    </p>

<% } %> <% if (options.show_node_editor_style) { %>

    <div class="Rk-Editor-p">

      <% if (options.show_node_editor_style_color) { %>

      <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>

      <% } %>

      <% if (options.show_node_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" <%- node.dash %> />

      </div>

      <% } %>

      <% if (options.show_node_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"><%-node.thickness%></span>

          <a href="#" class="Rk-Edit-Size-Btn" id="Rk-Edit-Thickness-Up">+</a>

      </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>

<% } %>