123

<div id="<%= dom_id(question) %>"
  class="grid-stack-item"
  gs-id="<%= question.id %>"
  gs-y="<%= question.position %>"
  gs-x="0"
  gs-w="12"
  gs-h="<%= question.new_record? && 2 %>"
  data-controller="questionnaire-question removable"
  data-action="item:added->questionnaire-question#openEdit questionnaire-question:saved->questionnaire#questionSaved"
  data-questionnaire-target="question"
  data-cy="<%= question.new_record? ? "new-" : "" %>questionnaire-question-<%= question.value_type %>">
  <div class="relative flex items-stretch overflow-visible grid-stack-item-content">
    <div class="flex flex-grow group-[.is-container]:hidden flex-1 items-center cursor-pointer space-x-3 py-1.5 px-4 bg-white rounded-lg dark:bg-gray-800 shadow-light dark:shadow-dark dark:hover:shadow-dark-hover">
      <%= inline_svg_tag "fields/#{question.value_type}.svg", class: "h-4 w-4" %>
      <span class="text-xs font-medium leading-6 text-gray-800 dark:text-gray-200">
        <%= t("value_type_#{question.value_type}", scope: "simple_form.labels.field") %>
      </span>
    </div>
    <div class="hidden group-[.is-container]:flex flex-col w-full">
      <div class="absolute right-5 flex items-center space-x-2.5 top-1/2 -mt-2 z-100">
        <%= render SlideoverComponent.new(title: t(".form_title_#{question.persisted?}"), size: questionnaire_question_slideover_size(question), toggle_actions: ["slideover#close", ("removable#remove" if question.new_record?)].compact) do |component| %>
          <% component.with_button do %>
            <%= button_tag type: "button", class: "h-4", data: {action: "slideover#open", questionnaire_question_target: "edit", cy: "edit-question"} do %>
              <%= heroicon "pencil-square", variant: "outline", options: {class: "w-4 h-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"} %>
            <% end %>
          <% end %>
          <%= render "form", question: %>
        <% end %>
        <%= render ConfirmationModalComponent.new(
          title: t(".delete_title"),
          message: t(".delete_message"),
          form_options: {url: [:settings, question.business_process, question], method: :delete, html: {data: {action: "removable#remove:passive", questionnaire_question_target: "deleteForm"}}}
        ) do |component| %>
          <% component.with_button(class: "h-4", data: {cy: "delete-question"}) do %>
            <%= heroicon "trash", variant: "outline", options: {class: "w-4 h-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"} %>
          <% end %>
        <% end %>
      </div>
      <div class="flex items-center h-full gridstack-draggable-handle">
        <div class="flex-1 rounded-lg grid-stack-item-content-container bg-white/60 dark:bg-gray-400/8 shadow-light dark:shadow-dark dark:hover:shadow-dark-hover">
          <% if question.value_type == "spreadsheet" %>
            <div class="flex-1 pt-3 pr-16 min-h-14">
              <div class="pl-4">
                <%= render "name", question: %>
              </div>
              <div class="relative px-1">
                <%= render "settings/questionnaire_questions/placeholders/#{question.value_type}" %>
              </div>
            </div>
          <% else %>
            <div class="flex items-center flex-1 py-2.5 px-4 min-h-14">
              <div class="w-1/2">
                <%= render "name", question: %>
              </div>
              <div class="relative flex-1 pr-16">
                <%= render "settings/questionnaire_questions/placeholders/#{question.value_type}" %>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>