<%= content_tag :div,
  data: {
    model_name: @resource.model_name.to_s,
    resource_name: @resource.class.to_s,
    model_id: @resource.model.id,
    selected_resources_name: @resource.model_key,
    selected_resources: [@resource.model.id],
    **@resource.stimulus_data_attributes
  } do %>
  <%= render Avo::PanelComponent.new(name: title, description: @resource.resource_description, display_breadcrumbs: @reflection.blank?, index: 0, data: { panel_id: "main" }) do |c| %>
    <% c.with_tools do %>
      <% if @resource.has_show_controls? %>
        <% @resource.render_show_controls.each do |control| %>
          <% if control.back_button? %>
            <%= a_link back_path,
                style: :text,
                title: control.title,
                data: {
                  tippy: control.title ? :tooltip : nil,
                },
                icon: 'arrow-left' do %>
              <%= control.label %>
            <% end %>
          <% elsif control.delete_button? %>
            <% if can_see_the_destroy_button? %>
              <%= a_link helpers.resource_path(model: @resource.model, resource: @resource),
                style: :text,
                color: :red,
                icon: 'trash',
                form_class: 'flex flex-col sm:flex-row sm:inline-flex',
                title: control.title,
                data: {
                  turbo_confirm: t('avo.are_you_sure', item: @resource.model.model_name.name.downcase),
                  turbo_method: :delete,
                  control: :destroy,
                  tippy: control.title ? :tooltip : nil,
                  'resource-id': @resource.model.id,
                } do %>
                <%= control.label %>
              <% end %>
            <% end %>
          <% elsif can_see_the_actions_button? && control.actions_list? %>
            <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view, exclude: control.exclude, include: control.include, style: control.style, color: control.color, label: control.label %>
          <% elsif control.edit_button? %>
            <% if @resource.authorization.authorize_action(:edit, raise_exception: false) %>
              <%= a_link edit_path,
                  color: :primary,
                  style: :primary,
                  title: control.title,
                  data: {
                    tippy: control.title ? :tooltip : nil,
                  },
                  icon: 'edit' do %>
                <%= control.label %>
              <% end %>
            <% end %>
          <% elsif control.action? %>
            <%= a_link control.path,
                color: control.color,
                style: control.style,
                icon: control.icon,
                title: control.title,
                data: {
                  tippy: control.title ? :tooltip : nil,
                  'turbo-frame': 'actions_show',
                  'action': 'click->actions-picker#visitAction',
                } do %>
              <%= control.label %>
            <% end %>
          <% elsif control.link_to? %>
            <%= a_link control.path,
                color: control.color,
                style: control.style,
                icon: control.icon,
                title: control.title,
                target: control.target,
                class: control.class,
                data: {
                  **control.data,
                  tippy: control.title ? :tooltip : nil,
                } do %>
              <%= control.label %>
            <% end %>
          <% elsif control.detach_button? %>
            <% if @reflection.present? && @resource.model.present? && can_detach? %>
              <%= a_button url: detach_path,
                icon: 'detach',
                method: :delete,
                form_class: 'flex flex-col sm:flex-row sm:inline-flex',
                style: :text,
                data: {
                  confirm: "Are you sure you want to detach this #{title}."
                } do %>
                <%= control.label %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      <% else %>
        <% if @reflection.present? && @resource.model.present? %>
          <% if can_detach? %>
            <%= a_button url: detach_path,
                icon: 'detach',
                method: :delete,
                form_class: 'flex flex-col sm:flex-row sm:inline-flex',
                style: :text,
                data: {
                  confirm: "Are you sure you want to detach this #{title}."
                } do %>
              <%= t('avo.detach_item', item: title).capitalize %>
            <% end %>
          <% end %>
          <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
          <% if can_see_the_edit_button? %>
            <%= a_link edit_path,
                color: :primary,
                style: :primary,
                icon: 'edit' do %>
              <%= t('avo.edit').capitalize %>
            <% end %>
          <% end %>
        <% else %>
          <%= a_link back_path,
            style: :text,
            icon: 'arrow-left' do %>
            <%= t('avo.go_back') %>
          <% end %>
          <% if can_see_the_destroy_button? %>
            <%= a_link destroy_path,
              style: :text,
              color: :red,
              icon: 'trash',
              form_class: 'flex flex-col sm:flex-row sm:inline-flex',
              data: {
                turbo_confirm: t('avo.are_you_sure', item: @resource.model.model_name.name.downcase),
                turbo_method: :delete,
                control: :destroy,
                'resource-id': @resource.model.id,
              } do %>
              <%= t('avo.delete').capitalize %>
            <% end %>
          <% end %>
          <% if can_see_the_actions_button? %>
            <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
          <% end %>
          <% if @resource.authorization.authorize_action(:edit, raise_exception: false) %>
            <%= a_link edit_path,
              color: :primary,
              style: :primary,
              icon: 'edit' do %>
              <%= t('avo.edit').capitalize %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
    <% if main_panel.present? %>
      <% c.with_body do %>
        <%# the overflow helps with long values %>
        <div class="divide-y overflow-auto">
          <% main_panel.items.each_with_index do |field, index| %>
            <%= render field
              .hydrate(resource: @resource, model: @resource.model, user: @resource.user, view: view)
              .component_for_view(view)
              .new(field: field, resource: @resource, index: index, compact: sidebar.present?)
            %>
          <% end %>
        </div>
      <% end %>
    <% end %>
    <% if sidebar.present? %>
      <% c.with_sidebar do %>
        <%= render sidebar_component %>
      <% end %>
    <% end %>
  <% end %>
  <% if @reflection.blank? %>
    <%= content_tag :div, class: 'space-y-12 mt-12' do %>
      <% @resource.get_items.each_with_index do |item, index| %>
        <% next if item.nil? %>
        <%= render Avo::ItemSwitcherComponent.new resource: @resource, reflection: @reflection, item: item, index: index + 1, view: @view %>
      <% end %>
    <% end %>
  <% end %>
  <% if should_display_invalid_fields_errors? %>
    <turbo-stream action="append" target="alerts">
      <template>
        <% @resource.invalid_fields.each do |error| %>
          <%= render Avo::AlertComponent.new :error, error[:message] %>
        <% end %>
      </template>
    </turbo-stream>
  <% end %>
<% end %>