<div
  id="modal_add_<%= type %>_node"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-hidden="true"
  data-behavior="add-node"
  aria-labelledby="modal-title"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <% if type == :branch %>
          <h5 class="modal-title" id="modal-title">Add top-level node</h5>
        <% else %>
          <h5 class="modal-title" id="modal-title">Add a child to the <strong><%= @node.label %></strong> node</h5>
        <% end %>
        <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">
        <%# we need to scope the names of the radio buttons to this specific modal
          # so that clicking a radio in the 'add child' modal won't deselect the
          # radios in the 'add branch' modal %>
        <div class='form-check ps-0' data-behavior='copy-node-label'>
          <%= radio_button_tag(
              "add_#{type}_node",
              :one,
              true,
              class: "add_node_radio form-check-radio") %>
          <%= label_tag "add_#{type}_node_one", "Add one", class: 'form-check-label' %>
        </div>

        <div class='form-check ps-0' data-behavior='copy-node-label'>

          <%= radio_button_tag(
              "add_#{type}_node",
              :multiple,
              false,
              class: "add_node_radio") %>
          <%= label_tag "add_#{type}_node_multiple", "Add multiple", class: 'form-check-label' %>
        </div>

        <hr>

        <%= simple_form_for(
          (type == :branch ? Node.new : Node.new(parent_id: @node.id)),
          url: main_app.project_nodes_path(current_project),
          html: { class: 'add_one_node_form form-horizontal', id: "new_#{type}_node_form" }
        ) do |f| %>
          <%= f.hidden_field :parent_id, id: "#{type}_parent_id" %>
          <%= f.input :label, input_html: { id: "#{type}_node_label", data: { behavior: 'node-label' } } %>
          <%= f.input :type_id,
            collection: node_types_collection,
            include_blank: false,
            label: 'Icon',
            input_html: { class: 'form-select', id: "#{type}_node_icon", data: { behavior: 'node-icon' } }
          %>
        <% end %>

        <%# We can't use 'form_for' because 'list' isn't an attribute that exists
          # exists on a real Node. We can't pass a string or symbol to form_for
          # either because if we pass ':node' or ':nodes' form_for will try to
          # use the @node or @nodes instance variables and we get the same error. %>
        <%= form_tag(main_app.create_multiple_project_nodes_path(current_project), class: 'add_multiple_nodes_form') do %>

          <div class="add_multiple_nodes_error">
            Please add at least one node
          </div>

          <%= hidden_field_tag "nodes[parent_id]", @node.id if type == :child %>
          <%= label_tag "#{type}_nodes_list", 'To create multiple nodes, add one node name per line:', class: 'form-label' %>
          <%= text_area_tag "nodes[list]", "", rows: 3, class: 'mb-3 nodes_list form-control', id: "#{type}_nodes_list", data: { behavior: 'nodes-list' } %>
          <%= label_tag "#{type}_nodes_icon", 'Icon', class: 'form-label' %>
          <%= select_tag(
            "nodes[type_id]",
            options_for_select(node_types_collection),
            include_blank: false,
            class: 'form-select',
            id: "#{type}_nodes_icon",
            data: { behavior: 'nodes-icon' })
          %>
        <% end %>
      </div>

      <div class="modal-footer">
        <input type="submit" value="Add" class="modal_add_node_submit_btn btn btn-primary" />
        <button class="btn" data-bs-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>
  </div>
</div>
