@page
@model Media.JoshHeaps.Net.Pages.ProfileModel
@{
    ViewData["Title"] = "Profile Settings";
    Layout = "_Layout";
}

@section Styles {
    <link rel="stylesheet" href="~/css/Home/page.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/css/profile.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/css/theme-customizer.css" asp-append-version="true" />
}

<div class="profile-container">
    <a href="/" class="back-link">← Back to Dashboard</a>

    <div class="profile-section">
        <h2>Profile Information</h2>
        <div class="profile-field">
            <label>Username</label>
            <div class="profile-field-value">@Model.Dashboard?.Username</div>
        </div>
        <div class="profile-field">
            <label>Email</label>
            <div class="profile-field-value">@Model.Dashboard?.Email</div>
        </div>
        <div class="profile-field">
            <label>Email Status</label>
            <div class="profile-field-value">
                @if (Model.Dashboard?.EmailVerified == true)
                {
                    <span class="status-badge status-verified">Verified</span>
                }
                else
                {
                    <span class="status-badge status-unverified">Unverified</span>
                }
            </div>
        </div>
    </div>

    <div class="profile-section">
        <h2>Appearance</h2>
        <div class="theme-toggle-container">
            <div class="theme-toggle-label">
                <strong>Dark Mode</strong>
                <span>Enable dark theme across the application</span>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" id="theme-toggle" />
                <span class="toggle-slider"></span>
            </label>
        </div>
        <div class="theme-toggle-container">
            <div class="theme-toggle-label">
                <strong>Custom Colors</strong>
                <span>Personalize individual theme colors</span>
            </div>
            <button class="customize-btn" onclick="openThemeCustomizer()">Customize</button>
        </div>
    </div>
</div>

<script src="~/js/theme-customizer.js" asp-append-version="true"></script>
