Settings

import { Component } from '@angular/core';

@Component({
  selector: 'app-settings',
  template: `
    <div class="max-w-lg vstack gap-4">
      <details class="accordion" open>
        <summary>Account</summary>
        <div class="vstack gap-3">
          <label>Display Name <input type="text" value="Sashi Kumar" /></label>
          <label>Email <input type="email" value="sashi@example.com" /></label>
          <label>Bio <textarea rows="2">Full-stack developer.</textarea></label>
          <div class="flex justify-end">
            <button class="btn">Save Changes</button>
          </div>
        </div>
      </details>

      <details class="accordion">
        <summary>Notifications</summary>
        <div class="vstack gap-3">
          <label class="hstack justify-between">
            <span>Email notifications</span>
            <label class="switch"><input type="checkbox" checked /><span></span></label>
          </label>
          <label class="hstack justify-between">
            <span>Push notifications</span>
            <label class="switch"><input type="checkbox" checked /><span></span></label>
          </label>
          <label class="hstack justify-between">
            <span>Marketing emails</span>
            <label class="switch"><input type="checkbox" /><span></span></label>
          </label>
        </div>
      </details>

      <details class="accordion">
        <summary>Appearance</summary>
        <div class="vstack gap-3">
          <label>Theme
            <select><option>System</option><option>Light</option><option>Dark</option></select>
          </label>
          <label class="hstack justify-between">
            <span>Compact mode</span>
            <label class="switch"><input type="checkbox" /><span></span></label>
          </label>
        </div>
      </details>

      <details class="accordion">
        <summary>Danger Zone</summary>
        <div class="vstack gap-3">
          <p class="text-light mb-0">Permanently delete your account.</p>
          <div><button class="btn danger">Delete Account</button></div>
        </div>
      </details>
    </div>
  `,
})
export class SettingsComponent {}