Maybe/app/views/account/entries/entryables/transaction/_show.html.erb

<%# locals: (entry:) %>

<% transaction, account = entry.account_transaction, entry.account %>

<%= drawer do %>
  <div>
    <header class="mb-4 space-y-1">
      <div class="flex items-center gap-4">
        <h3 class="font-medium">
          <span class="text-2xl"><%= format_money -entry.amount_money %></span>
          <span class="text-lg text-gray-500"><%= entry.currency %></span>
        </h3>

        <% if entry.marked_as_transfer? %>
          <%= lucide_icon "arrow-left-right", class: "text-gray-500 mt-1 w-5 h-5" %>
        <% end %>
      </div>

      <span class="text-sm text-gray-500"><%= entry.date.strftime("%A %d %B") %></span>
    </header>

    <div class="space-y-2">
      <details class="group space-y-2" open>
        <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
          <h4><%= t(".overview") %></h4>
          <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
        </summary>

        <div class="pb-6">
          <%= form_with model: [account, entry], url: account_entry_path(account, entry), html: { data: { controller: "auto-submit-form" } } do |f| %>
            <div class="space-y-2">
              <%= f.text_field :name, label: t(".name_label"), "data-auto-submit-form-target": "auto" %>
              <%= f.date_field :date, label: t(".date_label"), max: Date.current, "data-auto-submit-form-target": "auto" %>

              <%= f.fields_for :entryable do |ef| %>
                <% unless entry.marked_as_transfer? %>
                  <%= ef.collection_select :category_id, selectable_categories, :id, :name, { prompt: t(".category_placeholder"), label: t(".category_label"), class: "text-gray-400" }, "data-auto-submit-form-target": "auto" %>
                  <%= ef.collection_select :merchant_id, selectable_merchants, :id, :name, { prompt: t(".merchant_placeholder"), label: t(".merchant_label"), class: "text-gray-400" }, "data-auto-submit-form-target": "auto" %>
                <% end %>
              <% end %>

              <%= f.collection_select :account_id, selectable_accounts, :id, :name, { prompt: t(".account_placeholder"), label: t(".account_label"), class: "text-gray-500" }, { class: "form-field__input cursor-not-allowed text-gray-400", disabled: "disabled" } %>
            </div>
          <% end %>
        </div>
      </details>

      <details class="group space-y-2" open>
        <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
          <h4><%= t(".additional") %></h4>
          <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
        </summary>

        <div class="pb-6 space-y-2">
          <%= form_with model: [account, entry], url: account_entry_path(account, entry), html: { data: { controller: "auto-submit-form" } } do |f| %>

            <%= f.fields_for :entryable do |ef| %>
              <%= ef.select :tag_ids,
                            options_for_select(selectable_tags, transaction.tag_ids),
                            {
                              multiple: true,
                              label: t(".tags_label"),
                              class: "placeholder:text-gray-500"
                            },
                            "data-auto-submit-form-target": "auto" %>
              <%= ef.text_area :notes, label: t(".note_label"), placeholder: t(".note_placeholder"), "data-auto-submit-form-target": "auto" %>
            <% end %>
          <% end %>
        </div>
      </details>

      <details class="group space-y-2" open>
        <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-none">
          <h4><%= t(".settings") %></h4>
          <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
        </summary>

        <div class="pb-6">
          <%= form_with model: [account, entry], url: account_entry_path(account, entry), html: { class: "p-3 space-y-3", data: { controller: "auto-submit-form" } } do |f| %>
            <%= f.fields_for :entryable do |ef| %>
              <div class="flex cursor-pointer items-center gap-2 justify-between">
                <div class="text-sm space-y-1">
                  <h4 class="text-gray-900"><%= t(".exclude_title") %></h4>
                  <p class="text-gray-500"><%= t(".exclude_subtitle") %></p>
                </div>

                <div class="relative inline-block select-none">
                  <%= ef.check_box :excluded, class: "sr-only peer", "data-auto-submit-form-target": "auto" %>
                  <label for="account_entry_entryable_attributes_excluded" class="maybe-switch"></label>
                </div>
              </div>
            <% end %>
          <% end %>

          <% unless entry.marked_as_transfer? %>
            <div class="flex items-center justify-between gap-2 p-3">
              <div class="text-sm space-y-1">
                <h4 class="text-gray-900"><%= t(".delete_title") %></h4>
                <p class="text-gray-500"><%= t(".delete_subtitle") %></p>
              </div>

              <%= button_to t(".delete"),
                            account_entry_path(account, entry),
                            method: :delete,
                            class: "rounded-lg px-3 py-2 text-red-500 text-sm font-medium border border-alpha-black-200",
                            data: { turbo_confirm: true, turbo_frame: "_top" } %>
            </div>
          <% end %>
        </div>
      </details>
    </div>
  </div>
<% end %>