<%= render(Primer::Alpha::Dialog.new(title: t(:'queries.configure_view.heading'),
                                     size: :large,
                                     id: MODAL_ID,
                                     # Hack to give the draggable autcompleter (ng-select) bound to the dialog
                                     # enough height to display all options.
                                     # This is necessary as long as ng-select does not support popovers.
                                     style: "min-height: 480px")) do |d| %>
  <% d.with_header(variant: :large, mb: 3) %>
  <%= render(Primer::Alpha::Dialog::Body.new) do %>
    <%= primer_form_with(
          url: projects_path,
          id: QUERY_FORM_ID,
          data: { "turbo-stream" => false },
          method: :get
        ) do |form| %>
      <% helpers.projects_query_params.except(:columns, :sortBy).each do |name, value| %>
        <%= hidden_field_tag name, value, data: {"sort-by-config-target" => name} %>
      <% end %>
      <%= render(Primer::Alpha::TabPanels.new(label: "label")) do |tab_panel| %>
        <% tab_panel.with_tab(selected: true, id: "tab-selects--columns") do |tab| %>
          <% tab.with_text { I18n.t("label_columns") } %>
          <% tab.with_panel do %>
            <%= helpers.angular_component_tag 'opce-draggable-autocompleter',
                                          inputs: {
                                            options: helpers.projects_columns_options,
                                            selected: selected_columns,
                                            protected: helpers.protected_projects_columns_options,
                                            name: COLUMN_HTML_NAME,
                                            id: COLUMN_HTML_ID,
                                            dragAreaName: "#{COLUMN_HTML_ID}_dragarea",
                                            formControlId: "#{COLUMN_HTML_ID}_autocompleter",
                                            inputLabel: I18n.t(:'queries.configure_view.columns.input_label'),
                                            inputPlaceholder: I18n.t(:'queries.configure_view.columns.input_placeholder'),
                                            dragAreaLabel: I18n.t(:'queries.configure_view.columns.drag_area_label'),
                                            appendToComponent: true
                                          }%>
          <% end %>
        <% end %>
        <% tab_panel.with_tab(id: "tab-selects--sorting") do |tab| %>
          <% tab.with_text { I18n.t("label_sort") }%>
          <% tab.with_panel do %>
            <%= render(Queries::SortByComponent.new(query: query, selectable_columns:)) %>
          <% end%>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
  <%= render(Primer::Alpha::Dialog::Footer.new) do %>
    <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": MODAL_ID })) { I18n.t(:button_cancel) } %>
    <%= render(Primer::ButtonComponent.new(scheme: :primary,
                                           type: :submit,
                                           data: { "test-selector": "#{MODAL_ID}-submit"},
                                           form: QUERY_FORM_ID)) { I18n.t(:button_apply) } %>
  <% end %>
<% end %>