<section class="profile-view" id="profileView" hidden>
    <div class="profile-header">
        <div>
            <div class="viewer-key">Account</div>
            <h1>Edit Profile</h1>
        </div>
    </div>

    <form class="profile-layout" id="profileForm" enctype="multipart/form-data">
        <section class="profile-avatar-panel">
            <div class="profile-avatar-preview" id="profileAvatarPreview">
                <span class="profile-avatar-fallback">
                    <i class="fa-solid fa-user"></i>
                </span>
            </div>

            <label class="btn btn-outline-secondary btn-sm profile-picture-button">
                <i class="fa-solid fa-image me-1"></i>
                Upload picture
                <input
                    type="file"
                    name="picture"
                    id="profilePictureInput"
                    accept="image/png,image/jpeg,image/webp,image/gif"
                    hidden
                >
            </label>

            <label class="profile-remove-picture">
                <input type="checkbox" name="remove_picture" value="1" id="profileRemovePicture">
                Remove current picture
            </label>
        </section>

        <section class="profile-form-panel">
            <div class="mb-3">
                <label class="form-label" for="profileName">Username</label>
                <input
                    type="text"
                    class="form-control"
                    name="name"
                    id="profileName"
                    maxlength="128"
                    required
                >
            </div>

            <div class="mb-3">
                <label class="form-label" for="profileEmail">Email</label>
                <input
                    type="email"
                    class="form-control"
                    name="email"
                    id="profileEmail"
                    maxlength="128"
                    required
                >
            </div>

            <div class="mb-3">
                <label class="form-label" for="profilePassword">New Password</label>
                <input
                    type="password"
                    class="form-control"
                    name="password"
                    id="profilePassword"
                    minlength="8"
                    autocomplete="new-password"
                >
            </div>

            <div class="mb-3">
                <label class="form-label" for="profilePasswordConfirm">Confirm Password</label>
                <input
                    type="password"
                    class="form-control"
                    id="profilePasswordConfirm"
                    minlength="8"
                    autocomplete="new-password"
                >
            </div>

            <div class="mb-3">
                <label class="form-label" for="profileTheme">Theme</label>
                <select class="form-select" name="theme" id="profileTheme">
                    <option value="white">White</option>
                    <option value="dark">Dark</option>
                    <option value="purple">Purple</option>
                    <option value="green">Green</option>
                    <option value="beige">Beige</option>
                </select>
            </div>

            <div class="profile-actions">
                <button class="btn btn-primary" type="submit" id="profileSubmitButton">
                    <i class="fa-solid fa-floppy-disk me-1"></i>
                    Save Profile
                </button>
                <span class="profile-status" id="profileStatus" aria-live="polite"></span>
            </div>
        </section>
    </form>
</section>
