pages/profile.php

<div class="page-content" id="page-profile">
    <h1 class="page-title">Profile</h1>
    <p class="page-subtitle">Personal profile, password and page preferences</p>
    <div class="page-file-strip">
        <a class="page-file-pill" href="/maps/view.php?file=pages/profile.php" target="_blank" rel="noreferrer">profile.php <span class="page-file-code">DEV-F89AA1A8</span></a>
        <a class="page-file-pill" href="/maps/view.php?file=js/profile.js" target="_blank" rel="noreferrer">profile.js <span class="page-file-code">DEV-A21A761B</span></a>
        <a class="page-file-pill" href="/maps/view.php?file=css/profile.css" target="_blank" rel="noreferrer">profile.css <span class="page-file-code">DEV-A9071E4E</span></a>
    </div>

    <div class="profile-grid">
        <section class="profile-card">
            <h3>Profile details</h3>
            <div class="profile-form-grid">
                <div class="dummy-form-group"><label>Name</label><input type="text" id="profileName" placeholder="Your name"></div>
                <div class="dummy-form-group"><label>Email</label><input type="email" id="profileEmail" placeholder="you@example.com"></div>
                <div class="dummy-form-group"><label>Phone</label><input type="tel" id="profilePhone" placeholder="070-123 45 67"></div>
                <div class="dummy-form-group">
                    <label>Language</label>
                    <select id="profileLanguage"><option value="sv">Svenska</option><option value="en">English</option></select>
                </div>
            </div>
            <button class="dummy-btn" type="button" onclick="saveProfileSettings()">Save profile</button>
            <div class="profile-status" id="profileSaveStatus"></div>
        </section>

        <section class="profile-card">
            <h3>Password</h3>
            <div class="dummy-form-group"><label>Current password</label><input type="password" id="profileCurrentPassword"></div>
            <div class="dummy-form-group"><label>New password</label><input type="password" id="profileNewPassword"></div>
            <div class="dummy-form-group"><label>Confirm new password</label><input type="password" id="profileConfirmPassword"></div>
            <button class="dummy-btn secondary" type="button" onclick="saveProfilePassword()">Update password</button>
            <div class="profile-status" id="profilePasswordStatus"></div>
        </section>
    </div>

    <div class="profile-grid">
        <section class="profile-card">
            <h3>Page preferences</h3>
            <p class="profile-helper">Choose which personal pages should be visible in the left menu.</p>
            <label class="profile-toggle"><input type="checkbox" id="profileShowCalendar"> <span>Show Calendar in menu</span></label>
            <label class="profile-toggle"><input type="checkbox" id="profileShowInbox"> <span>Show Inbox in menu</span></label>
            <label class="profile-toggle"><input type="checkbox" id="profileShowSalary"> <span>Show My Salary in menu</span></label>
            <button class="dummy-btn" type="button" onclick="saveProfilePreferences()">Save preferences</button>
            <div class="profile-status" id="profilePreferencesStatus"></div>
        </section>

        <section class="profile-card">
            <h3>Mail signature</h3>
            <p class="profile-helper">Used when sending emails from Inbox.</p>
            <div class="dummy-form-group"><label>Signature</label><textarea id="profileSignature" class="profile-textarea" placeholder="Best regards"></textarea></div>
            <button class="dummy-btn secondary" type="button" onclick="saveProfileSignature()">Save signature</button>
            <div class="profile-status" id="profileSignatureStatus"></div>
        </section>
    </div>
</div>