<%= render DS::Dialog.new do |dialog| %>
  <% dialog.with_header(title: t(".title")) %>
  <% dialog.with_body do %>
    <% if @account.owned_by?(Current.user) %>
      <% if @family_members.any? %>
        <%= styled_form_with url: account_sharing_path(@account), method: :patch, class: "space-y-4" do |form| %>
          <div class="bg-container-inset rounded-xl p-1">
            <div class="px-4 py-2">
              <div class="grid grid-cols-3 gap-4">
                <p class="uppercase text-xs text-secondary font-medium"><%= t(".member") %></p>
                <p class="uppercase text-xs text-secondary font-medium"><%= t(".permission") %></p>
                <p class="uppercase text-xs text-secondary font-medium text-right"><%= t(".shared") %></p>
              </div>
            </div>
            <% @family_members.each_with_index do |member, index| %>
              <% share = @account_shares[member.id] %>
              <div class="flex items-center bg-container p-4 shadow-border-xs rounded-lg mt-2">
                <input type="hidden" name="sharing[members][<%= index %>][user_id]" value="<%= member.id %>">
                <div class="grid grid-cols-3 gap-4 items-center w-full">
                  <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full bg-surface-inset flex items-center justify-center text-xs font-medium text-secondary">
                      <%= member.initials %>
                    </div>
                    <span id="member-name-<%= index %>" class="text-sm text-primary"><%= member.display_name %></span>
                  </div>
                  <div>
                    <% selected_permission = share&.permission || "read_only" %>
                    <select name="sharing[members][<%= index %>][permission]" aria-labelledby="member-name-<%= index %>" class="text-sm border border-primary rounded-lg px-3 py-1.5 bg-container text-primary w-full">
                      <% AccountShare::PERMISSIONS.each do |perm| %>
                        <option value="<%= perm %>" <%= "selected" if selected_permission == perm %>>
                          <%= t(".permissions.#{perm}") %>
                        </option>
                      <% end %>
                    </select>
                  </div>
                  <div class="flex justify-end">
                    <%= render DS::Toggle.new(
                      id: "sharing_members_#{index}_shared",
                      name: "sharing[members][#{index}][shared]",
                      checked: share.present?,
                      "aria-labelledby": "member-name-#{index}"
                    ) %>
                  </div>
                </div>
              </div>
            <% end %>
          </div>
          <div class="flex justify-end">
            <%= render DS::Button.new(text: t(".save"), class: "md:w-auto w-full justify-center") %>
          </div>
        <% end %>
      <% else %>
        <p class="text-sm text-secondary"><%= t(".no_members", moniker: family_moniker_downcase) %></p>
      <% end %>
    <% else %>
      <%# Non-owner can only toggle finance inclusion %>
      <% share = @account.account_shares.find_by(user: Current.user) %>
      <% if share %>
        <div class="space-y-4">
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 rounded-full bg-surface-inset flex items-center justify-center text-xs font-medium text-secondary">
              <%= @account.owner.initials %>
            </div>
            <div>
              <p class="text-sm text-primary font-medium"><%= t(".owner_label", name: @account.owner.display_name) %></p>
              <p class="text-xs text-secondary"><%= t(".permissions.#{share.permission}") %></p>
            </div>
          </div>

          <%= styled_form_with url: account_sharing_path(@account), method: :patch, class: "space-y-4" do |form| %>
            <input type="hidden" name="update_finance_inclusion" value="1">
            <div class="bg-container-inset rounded-xl p-4">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-sm text-primary font-medium"><%= t(".include_in_finances") %></p>
                  <p class="text-xs text-secondary"><%= t(".finance_toggle_description") %></p>
                </div>
                <%= render DS::Toggle.new(
                  id: "include_in_finances",
                  name: "include_in_finances",
                  checked: share.include_in_finances?
                ) %>
              </div>
            </div>
            <div class="flex justify-end">
              <%= render DS::Button.new(text: t(".save"), class: "md:w-auto w-full justify-center") %>
            </div>
          <% end %>
        </div>
      <% end %>
    <% end %>
  <% end %>
<% end %>
