Forms

<div class="max-w-4xl mx-auto p-6">
  <h1 class="text-2xl text-zinc-800 dark:text-zinc-200 font-bold mb-8">Account Settings</h1>

  <.form :let={f} for={%{}} class="space-y-14" phx-change="validate" as={:account}>
    <!-- User Profile -->
    <section class="mb-12">
      <h2 class="text-xl font-semibold text-zinc-700 dark:text-zinc-300 mb-4">User Profile</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <.input field={f[:full_name]} label="Full Name" />
        <.input field={f[:email]} label="Email Address" />
        <.input field={f[:job_title]} label="Job Title" />
        <.select
          multiple
          field={f[:department]}
          label="Department"
          options={["Engineering", "Marketing", "Sales", "Human Resources"]}
        />
      </div>
    </section>
    <!-- Notifications -->
    <section class="mb-12">
      <h2 class="text-xl font-semibold text-zinc-700 dark:text-zinc-300 mb-4">Notifications</h2>
      <div class="space-y-4">
        <.checkbox
          field={f[:email_notifications]}
          label="Email Notifications"
          value="email-notifications"
          description="Receive important updates and alerts via email"
        />
        <.checkbox
          field={f[:push_notifications]}
          label="Push Notifications"
          value="push-notifications"
          description="Get instant notifications on your desktop or mobile device"
        />
        <.checkbox
          field={f[:sms_notifications]}
          label="SMS Notifications"
          value="sms-notifications"
          description="Receive urgent alerts via text message on your phone"
        />
      </div>
    </section>
    <!-- Project Preferences -->
    <section class="mb-12">
      <h2 class="text-xl font-semibold text-zinc-700 dark:text-zinc-300 mb-4">Project Preferences</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <.select
          field={f[:default_view]}
          label="Default Project View"
          options={["Board", "List", "Calendar", "Timeline"]}
          help_text="Choose how you want to view your projects by default"
        />
        <.select
          field={f[:task_reminders]}
          label="Task Reminders"
          options={["1 hour before", "1 day before", "Custom"]}
          help_text="Set when you'd like to receive reminders for your tasks"
        />
      </div>
    </section>
    <!-- Integration Settings -->
    <section class="mb-12">
      <h2 class="text-xl font-semibold text-zinc-700 dark:text-zinc-300 mb-4">Integration Settings</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <.label for="google-calendar" description="Connect your Google Calendar to sync events and reminders">
            Google Calendar
          </.label>
          <.switch checked id="google-calendar" />
        </div>

        <div class="flex items-center justify-between">
          <.label for="slack" description="Connect your Slack to sync messages and notifications">Slack</.label>
          <.switch id="slack" />
        </div>

        <div class="flex items-center justify-between">
          <.label for="github" description="Connect your GitHub to sync repositories and issues">GitHub</.label>
          <.switch id="github" />
        </div>
      </div>
    </section>
    <!-- Appearance -->
    <section class="mb-12">
      <h2 class="text-xl font-semibold mb-4 text-zinc-700 dark:text-zinc-300">Appearance</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <.select
          field={f[:theme]}
          label="Theme"
          options={["Light", "Dark", "System"]}
          help_text="Choose your preferred theme for a more comfortable experience"
        />
        <.input class="pl-6" maxlength="6" type="text" name="accent-color" label="Accent Color">
          <:inner_prefix class="px-3 pointer-events-none text-sm text-zinc-400 dark:text-zinc-500">#</:inner_prefix>
        </.input>
      </div>
    </section>

    <div class="flex justify-end space-x-4">
      <.button type="button">Cancel</.button>
      <.button variant="solid" color="blue" type="submit">Save Changes</.button>
    </div>
  </.form>
</div>

<div class="max-w-4xl mx-auto w-full p-6 space-y-8">
  <div class="border-b border-zinc-200 dark:border-white/10 pb-6">
    <h1 class="text-2xl font-semibold text-zinc-700 dark:text-zinc-300">Account Settings</h1>
    <p class="text-sm text-zinc-500 dark:text-zinc-400">Manage your account settings.</p>
  </div>

  <div>
    <h2 class="font-semibold text-zinc-700 dark:text-zinc-300">Update Email</h2>
    <p class="text-sm text-zinc-500 dark:text-zinc-400">Change your email address.</p>

    <.form for={@email_form} id="email_form" phx-submit="update_email" phx-change="validate_email" class="mt-6">
      <div class="w-full max-w-lg space-y-6">
        <.input field={@email_form[:email]} type="email" label="Email" />
        <.input
          field={@email_form[:current_password]}
          name="current_password"
          id="current_password_for_email"
          type="password"
          label="Current password"
          value={@email_form_current_password}
          required
        />
        <.button variant="solid" type="submit" phx-disable-with="Changing...">
          Change Email
        </.button>
      </div>
    </.form>
  </div>

  <.separator class="my-6 bg-zinc-200/70" />

  <div>
    <h2 class="font-semibold text-zinc-700 dark:text-zinc-300">Update Password</h2>
    <p class="text-sm text-zinc-500 dark:text-zinc-400">Change your password.</p>

    <.form
      for={@password_form}
      class="mt-6"
      id="password_form"
      action={~p"/signin?_action=password_updated"}
      method="post"
      phx-change="validate_password"
      phx-submit="update_password"
      phx-trigger-action={@trigger_submit}
    >
      <input name={@password_form[:email].name} type="hidden" id="hidden_user_email" value={@current_email} />
      <div class="w-full max-w-lg space-y-6">
        <.input field={@password_form[:password]} type="password" label="New password" required />
        <.input field={@password_form[:password_confirmation]} type="password" label="Confirm new password" />
        <.input
          field={@password_form[:current_password]}
          name="current_password"
          type="password"
          label="Current password"
          id="current_password_for_password"
          value={@current_password}
          required
        />
        <.button variant="solid" type="submit" phx-disable-with="Changing...">
          Change Password
        </.button>
      </div>
    </.form>
  </div>
</div>

<div class="w-full max-w-4xl mx-auto p-4 sm:p-6">
  <div class="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-x-4 mb-8">
    <div class="flex items-center justify-center size-14 rounded-full bg-blue-100 dark:bg-zinc-800">
      <.icon name="hero-bell" class="size-7 text-blue-600 dark:text-zinc-400" />
    </div>
    <div>
      <h1 class="text-xl sm:text-2xl text-zinc-800 dark:text-zinc-200 font-semibold">Communication Preferences</h1>
      <p class="text-sm sm:text-base text-zinc-500 dark:text-zinc-400">
        Choose how and when you want to receive updates about your account, projects, and platform features.
      </p>
    </div>
  </div>

  <.separator />

  <.form :let={f} for={%{}} phx-change="validate" as={:account}>
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-x-12 py-6 sm:py-8">
      <div class="w-full lg:max-w-lg">
        <h3 class="font-semibold text-zinc-700 dark:text-zinc-300">Account Notifications</h3>
        <p class="text-sm sm:text-base text-zinc-500 dark:text-zinc-400">
          Control essential notifications about your account security and billing.
        </p>
      </div>
      <div class="space-y-6 w-full">
        <.switch
          field={f[:transactional_emails]}
          label="Security Alerts"
          color="blue"
          description="Get notified about sign-ins from new devices and security-related updates"
        />
        <.switch
          field={f[:low_credits_alerts]}
          label="Usage & Billing Alerts"
          color="blue"
          description="Receive notifications when your usage reaches 80% of your plan limit or billing requires attention"
        />
        <.switch
          field={f[:marketing_emails]}
          label="Product Updates"
          color="blue"
          description="Stay informed about new features, improvements, and special offers"
        />
      </div>
    </div>

    <.separator />

    <div class="flex flex-col lg:flex-row gap-6 lg:gap-x-12 py-6 sm:py-8">
      <div class="w-full lg:max-w-lg">
        <h3 class="font-semibold text-zinc-700 dark:text-zinc-300">Delivery Methods</h3>
        <p class="text-sm sm:text-base text-zinc-500 dark:text-zinc-400">
          Select your preferred ways to receive notifications.
        </p>
      </div>
      <div class="space-y-6 w-full">
        <.checkbox
          field={f[:email_notifications]}
          label="Email Digest"
          class="checked:bg-blue-600"
          description="Receive a daily summary of all notifications via email"
        />
        <.checkbox
          field={f[:push_notifications]}
          label="Browser Notifications"
          class="checked:bg-blue-600"
          description="Get real-time notifications while using the platform"
        />
        <.checkbox
          field={f[:sms_notifications]}
          label="Mobile Alerts"
          class="checked:bg-blue-600"
          description="Receive critical alerts via SMS for immediate attention"
        />
      </div>
    </div>

    <.separator />

    <div class="flex flex-col lg:flex-row gap-6 lg:gap-x-12 py-6 sm:py-8">
      <div class="w-full lg:max-w-lg">
        <h3 class="font-semibold text-zinc-700 dark:text-zinc-300">Display Preferences</h3>
        <p class="text-sm sm:text-base text-zinc-500 dark:text-zinc-400">
          Customize your viewing experience across all devices.
        </p>
      </div>
      <div class="space-y-6 w-full">
        <.radio_group field={f[:theme]}>
          <:radio
            class="checked:bg-blue-600"
            value="light"
            label="Light Mode"
            description="Optimized for daylight viewing"
            sublabel="(recommended)"
          />
          <:radio
            class="checked:bg-blue-600"
            value="dark"
            label="Dark Mode"
            description="Easier on the eyes in low-light conditions"
          />
          <:radio
            class="checked:bg-blue-600"
            value="system"
            label="Match System"
            description="Automatically adjust based on your device settings"
          />
        </.radio_group>
      </div>
    </div>

    <.separator class="mb-6" />

    <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-4 sm:gap-x-4">
      <.button type="button" class="w-full sm:w-auto">Reset to Default</.button>
      <.button variant="solid" color="blue" type="submit" class="w-full sm:w-auto">Apply Changes</.button>
    </div>
  </.form>
</div>

<div class="w-full max-w-xl mx-auto p-4 sm:p-6">
  <div class="rounded-lg border inline-flex items-center justify-center size-12 bg-zinc-100 dark:bg-zinc-800 shadow-sm dark:border-white/10">
    <.icon name="hero-envelope" class="size-7 text-zinc-600 dark:text-zinc-400" />
  </div>
  <div class="mt-6">
    <h1 class="text-2xl/[3rem] sm:text-4xl/[3.5rem] text-zinc-800 dark:text-zinc-200 font-semibold">Contact Us</h1>
    <p class="text-sm sm:text-base text-zinc-500 dark:text-zinc-400">
      We'd love to hear from you! Please use the form below to get in touch with us.
    </p>
  </div>

  <.form :let={f} for={%{}} as={:contact_us} class="py-10" phx-submit="send_message">
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-10">
      <div class="col-span-2 sm:col-span-1">
        <.input field={f[:first_name]} label="First Name" placeholder="First Name" size="lg" />
      </div>
      <div class="col-span-2 sm:col-span-1">
        <.input field={f[:last_name]} label="Last Name" placeholder="Last Name" size="lg" />
      </div>

      <div class="col-span-2">
        <.input field={f[:email]} label="Email" placeholder="Email" size="lg" />
      </div>

      <div class="col-span-2">
        <.input field={f[:phone_number]} label="Phone Number" sublabel="(optional)" size="lg" placeholder="234 567 8901">
          <:outer_prefix class="w-20">
            <.select
              size="lg"
              name="country_code"
              value="+1"
              native
              options={["+1", "+44", "+49"]}
              class="border-none shadow-none rounded-r-none"
            />
          </:outer_prefix>
        </.input>
      </div>

      <div class="col-span-2">
        <.textarea field={f[:message]} label="Message" placeholder="Message" size="lg" />
      </div>
    </div>
    <div class="flex *:flex-1 gap-x-4 mt-4">
      <.button variant="solid" type="submit" class="w-full sm:w-auto">Send Message</.button>
      <.button type="button" class="w-full sm:w-auto">Schedule a Call</.button>
    </div>
  </.form>
</div>