<div class="hidden sm:flex justify-between items-center gap-4 shadow sticky top-0 z-50 bg-slate-800 p-4">
  <h1 class="text-2xl font-medium"><%= it("Settings") %></h1>
</div>
<div class="flex flex-col gap-4 p-4">
  <%= it("Welcome to User Settings! Here, you can customize your account preferences,
                    manage your privacy settings, and tailor your experience within the application to better suit your needs.
                    If you have any questions or need assistance, please visit our Help Center or contact our support team", classes: "max-w-prose") %>
  <%= form_with(model: current_user.becomes(User), url: settings_path, method: :patch, class: "text-gray-300 max-w-prose space-y-4" ) do |form| %>
    <% t("settings").each do |key, val| %>
      <% SettingField.new(current_user, form, key, val).then do |field| %>
        <div class="<%= field.wrapper_class %>">
          <%= field.label %>
          <%= field.input %>
        </div>
      <% end %>
    <% end %>
    <%= form.submit it("Save"), class: "btn btn-primary" %>
  <% end %>
</div>
