<%= render DS::Dialog.new do |dialog| %>
  <% dialog.with_header(title: "Enter property manually") %>
  <% dialog.with_body do %>
    <div class="flex gap-4">
      <!-- Left sidebar with tabs -->
      <%= render "properties/form_tabs", account: @account, active_tab: "address" %>

      <!-- Right content area with form -->
      <div class="flex-1">
        <%= styled_form_with model: @property, url: update_address_property_path(@account), method: :patch, data: { turbo_frame: @property.address.persisted? ? nil : :_top } do |form| %>
          <div class="flex flex-col gap-2 min-h-[320px]">
            <%= render "properties/form_alert", notice: @success_message, error: @error_message %>

            <%= form.fields_for :address do |address_form| %>
              <%= address_form.text_field :line1,
                    label: "Address Line 1",
                    placeholder: "123 Main Street" %>

              <div class="flex items-center gap-2">
                <%= address_form.text_field :locality,
                      label: "City",
                      placeholder: "San Francisco" %>
                <%= address_form.text_field :region,
                      label: "State/Region",
                      placeholder: "CA" %>
              </div>

              <div class="flex items-center gap-2">
                <%= address_form.text_field :postal_code,
                      label: "Postal Code",
                      placeholder: "12345" %>
                <%= address_form.text_field :country,
                      label: "Country",
                      placeholder: "USA" %>
              </div>
            <% end %>
          </div>

          <!-- Save button -->
          <div class="flex justify-end mt-4">
            <%= render DS::Button.new(
              text: "Save",
              variant: "primary",
            ) %>
          </div>
        <% end %>
      </div>
    </div>
  <% end %>
<% end %>
