<div class="settings-container">
  <div class="settings-box">
    <h1 class="settings-title">User Settings</h1>

    <%= if @error do %>
      <div class="error-message">
        <%= @error %>
      </div>
    <% end %>

    <%= if @success do %>
      <div class="success-message">
        <%= @success %>
      </div>
    <% end %>

    <div class="settings-section">
      <h2 class="settings-section-title">Profile Information</h2>
      <.form
        for={@changeset}
        id="profile-form"
        phx-submit="update_profile"
        phx-change="validate"
        class="settings-form"
      >
        <.form_group
          name="email"
          label="Email"
          type="email"
          value={@changeset[:email].value}
          required
        />
        <.form_group
          name="username"
          label="Username"
          type="text"
          value={@changeset[:username].value}
          required
        />

        <div class="mt-4">
          <.button type="submit" class="settings-button">
            Update Profile
          </.button>
        </div>
      </.form>
    </div>

    <div class="settings-section">
      <h2 class="settings-section-title">Change Password</h2>
      <.form
        for={@changeset}
        id="password-form"
        phx-submit="update_password"
        phx-change="validate"
        class="settings-form"
      >
        <.form_group
          name="current_password"
          label="Current Password"
          type="password"
          value={@changeset[:current_password].value}
          required
        />
        <.form_group
          name="password"
          label="New Password"
          type="password"
          value={@changeset[:password].value}
          required
        />
        <.form_group
          name="password_confirmation"
          label="Confirm New Password"
          type="password"
          value={@changeset[:password_confirmation].value}
          required
        />

        <div class="mt-4">
          <.button type="submit" class="settings-button">
            Update Password
          </.button>
        </div>
      </.form>
    </div>

    <div class="settings-section">
      <h2 class="settings-section-title">Account Preferences</h2>
      <div class="preferences-form">
        <div class="preference-item">
          <label class="preference-label">
            <input type="checkbox" name="notifications" />
            Enable Email Notifications
          </label>
        </div>
        <div class="preference-item">
          <label class="preference-label">
            <input type="checkbox" name="dark_mode" />
            Dark Mode
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
