{{template "app.html" .}}

{{define "title"}}Settings{{end}}

{{define "content"}}
<div class="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
    <h1 class="text-2xl font-bold text-white mb-2">Account Settings</h1>
    <p class="text-[#888] text-sm mb-8">Manage your profile and account preferences.</p>

    <!-- Profile Section -->
    <div class="p-6 rounded-2xl border border-white/10 bg-white/[0.02] mb-6">
        <h2 class="text-white font-semibold mb-4">Profile</h2>
        <form hx-post="/settings" hx-target="#settings-result" hx-swap="innerHTML" class="space-y-4">
            <div>
                <label class="text-sm text-[#ccc] mb-1.5 block" for="settings-email">Email</label>
                <input type="email" id="settings-email" disabled
                    value="{{if settings.CurrentUser}}{{settings.CurrentUser.Email}}{{end}}"
                    class="input w-full bg-white/5 border-white/10 text-[#666] cursor-not-allowed" />
                <p class="text-[#555] text-xs mt-1">Email cannot be changed.</p>
            </div>
            <div>
                <label class="text-sm text-[#ccc] mb-1.5 block" for="settings-name">Display Name</label>
                <input type="text" id="settings-name" name="name"
                    value="{{if settings.CurrentUser}}{{settings.CurrentUser.Name}}{{end}}"
                    placeholder="Your name"
                    class="input w-full bg-white/5 border-white/10 text-white placeholder:text-[#555] focus:border-white/30 focus:outline-none" />
            </div>
            <div class="flex items-center gap-3">
                <button type="submit" class="btn bg-white text-black hover:bg-[#e5e5e5] border-0 text-sm">Save Changes</button>
                <div id="settings-result"></div>
            </div>
        </form>
    </div>

    <!-- Plan Summary -->
    <div class="p-6 rounded-2xl border border-white/10 bg-white/[0.02] mb-6">
        <h2 class="text-white font-semibold mb-4">Plan Summary</h2>
        {{if settings.UserSites}}
        <div class="space-y-2">
            {{range $site := settings.UserSites}}
            <div class="flex items-center justify-between text-sm">
                <span class="text-[#ccc]">{{$site.Name}}</span>
                <span class="text-xs px-2.5 py-0.5 rounded-full font-medium {{if eq $site.Plan "pro"}}bg-violet-500/15 text-violet-400{{else}}bg-white/5 text-[#888]{{end}}">
                    {{if eq $site.Plan "pro"}}Pro{{else}}Free{{end}}
                </span>
            </div>
            {{end}}
        </div>
        <a href="/billing" class="inline-block mt-4 text-sm text-violet-400 hover:text-violet-300 transition-colors">Manage billing &rarr;</a>
        {{else}}
        <p class="text-[#888] text-sm">No sites yet. <a href="/sites" class="text-violet-400 hover:text-violet-300">Create one</a> to get started.</p>
        {{end}}
    </div>

    <!-- Danger Zone -->
    <div class="p-6 rounded-2xl border border-red-500/20 bg-red-500/[0.02]">
        <h2 class="text-red-400 font-semibold mb-2">Danger Zone</h2>
        <p class="text-[#888] text-sm mb-4">Permanently delete your account and all associated data.</p>
        <button disabled class="btn btn-sm border border-red-400/30 text-red-400/50 bg-transparent cursor-not-allowed text-sm">
            Delete Account
        </button>
        <p class="text-[#555] text-xs mt-2">Contact hello@readysite.org to delete your account.</p>
    </div>
</div>
{{end}}