<div class="space-y-4">
  <div class="flex items-center justify-between">
    <div class="space-y-1">
      <p class="text-sm"><%= t(".title") %></p>
      <p class="text-secondary text-sm"><%= t(".description", product: product_name) %></p>
    </div>

    <%= styled_form_with model: Setting.new,
                         url: settings_hosting_path,
                         method: :patch,
                         data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "change" } do |form| %>
      <div class="form-field w-fit">
        <%= form.select :onboarding_state,
                        options_for_select(
                          [
                            [ t(".states.open"), "open" ],
                            [ t(".states.closed"), "closed" ],
                            [ t(".states.invite_only"), "invite_only" ]
                          ],
                          Setting.onboarding_state
                        ),
                        { label: false },
                        { data: { auto_submit_form_target: "auto" } } %>
      </div>
    <% end %>
  </div>

  <div class="flex items-center justify-between">
    <div class="space-y-1">
      <p class="text-sm"><%= t(".email_confirmation_title") %></p>
      <p class="text-secondary text-sm"><%= t(".email_confirmation_description") %></p>
    </div>

    <%= styled_form_with model: Setting.new,
                         url: settings_hosting_path,
                         method: :patch,
                         data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "change" } do |form| %>
      <%= form.toggle :require_email_confirmation, { data: { auto_submit_form_target: "auto" } } %>
    <% end %>
  </div>

  <% if Setting.onboarding_state == "invite_only" %>
    <div class="flex items-center justify-between">
      <div class="space-y-1">
        <p class="text-sm"><%= t(".default_family_title") %></p>
        <p class="text-secondary text-sm"><%= t(".default_family_description") %></p>
      </div>

      <%= styled_form_with model: Setting.new,
                           url: settings_hosting_path,
                           method: :patch,
                           data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "change" } do |form| %>
        <div class="form-field w-fit">
          <%= form.select :invite_only_default_family_id,
                          options_for_select(
                            [ [ t(".default_family_none"), "" ] ] +
                            Family.all.map { |f| [ f.name, f.id ] },
                            Setting.invite_only_default_family_id
                          ),
                          { label: false },
                          { data: { auto_submit_form_target: "auto" } } %>
        </div>
      <% end %>
    </div>

    <div class="flex items-center justify-between mb-4">
      <div>
        <span class="text-primary text-base font-medium"><%= t(".generated_tokens") %></span>
      </div>
      <div>
        <%= render DS::Button.new(
          text: t(".generate_tokens"),
          variant: "primary",
          href: invite_codes_path,
          method: :post
        ) %>
      </div>
    </div>

    <div>
      <%= turbo_frame_tag :invite_codes, src: invite_codes_path %>
    </div>
  <% end %>
</div>
