<%= render DS::Dialog.new do |dialog| %>
  <% dialog.with_header(title: "Match transfer or payment") %>
  <% dialog.with_body do %>
    <%= styled_form_with(
          url: transaction_transfer_match_path(@entry),
          scope: :transfer_match,
          class: "space-y-8",
          data: { turbo_frame: :_top }
        ) do |f| %>
      <section class="space-y-4">
        <div class="space-y-2">
          <h2 class="text-sm font-medium text-gray-700">
            <%= @entry.amount.positive? ? "From account: #{@entry.account.name}" : "From account" %>
          </h2>

          <% if @entry.amount.positive? %>
            <%= f.select(
                  :entry_id,
                  [[entry_name_detailed(@entry), @entry.id]],
                  {
                    label: "Outflow transaction",
                    selected: @entry.id,
                  },
                  disabled: true
                ) %>
          <% else %>
            <%= render "transfer_matches/matching_fields",
                        form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.outflow_transaction.entry }, accounts: @accounts %>
          <% end %>
        </div>
      </section>

      <div class="flex justify-center py-2">
        <%= icon "arrow-down" %>
      </div>

      <section class="space-y-4">
        <div class="space-y-2">
          <h2 class="text-sm font-medium text-gray-700">
            <%= @entry.amount.negative? ? "To account: #{@entry.account.name}" : "To account" %>
          </h2>

          <% if @entry.amount.negative? %>
            <%= f.select(
                  :entry_id,
                  [[entry_name_detailed(@entry), @entry.id]],
                  {
                    label: "Inflow transaction",
                    selected: @entry.id,
                  },
                  disabled: true
                ) %>
          <% else %>
            <%= render "transfer_matches/matching_fields",
                        form: f, entry: @entry, candidates: @transfer_match_candidates.map { |pm| pm.inflow_transaction.entry }, accounts: @accounts %>
          <% end %>
        </div>
      </section>

      <%= f.submit "Create transfer match" %>
    <% end %>
  <% end %>
<% end %>
