<div id="modal_move_node" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
  <%= simple_form_for [current_project, @node], html: { class: 'form-horizontal modal-node-selection-form', id: 'modal_move_node_form', data: { node_id: @node.id, hidden_field: '#node_parent_id' } } do |f| %>
    <%= f.hidden_field :parent_id %>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title">Move <%= @node.label %> node</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">
            <span class="visually-hidden">Close modal</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Where do you want to move the <strong><%= @node.label %></strong> node?</p>

          <% unless @node.root? %>
            <div class="radio">
              <%= label_tag do %>
                <%= radio_button_tag :node_move_destination, :root %>
                Move to the top of the tree and make it a root node.
              <% end %>
            </div>

            <div class="radio">
              <%= label_tag do %>
                <%= radio_button_tag :node_move_destination, :node, checked: true %>
                Move below another node:
              <% end %>
            </div>
          <% end %>

          <div class="tree-modal-box">
            <%= render "layouts/hera/nodes" %>
          </div>
          <p id="move-under">
            Move under: <strong><span id="current-selection"></span></strong>
          </p>
          <p id="move-to-root" style="display:none";>
            Move to root
          </p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary">Move</button>
          <button class="btn" type="button" data-bs-dismiss="modal" aria-hidden="true">Close</button>
        </div>
      </div>
    </div>
  <% end %>
</div>
