<div class="col-sm-12 col-md-6">
    <form role="form" id="user-profile-form">
        <div class="panel panel-default">
            <header class="panel-heading">
                <strong class="panel-title">User Profile</strong>
            </header>

            <section class="panel-body">
                <FwNotifications @outlet="profile" />

                <div class="form-group">
                    <label>Username:</label>
                    <p class="control-static">{{user.id}}</p>
                </div>

                <FwValidatedTextfield @valuePath="nameFirst" @label="First Name" @model={{user}} @placeholder="First Name" @update={{action (mut user.nameFirst)}} @maxlength={{45}} />

                <FwValidatedTextfield @valuePath="nameLast" @label="Last Name" @model={{user}} @placeholder="Last Name" @update={{action (mut user.nameLast)}} @maxlength={{45}} />

                <FwValidatedTextfield @valuePath="namePref" @label="Preferred Name" @model={{user}} @placeholder="Preferred Name" @update={{action (mut user.namePref)}} @maxlength={{45}} />

                <FwValidatedTextfield @valuePath="email" @label="Email" @model={{user}} @placeholder="Email" @update={{action (mut user.email)}} @maxlength={{45}} />
            </section>

            <footer class="panel-footer clearfix">
                <FwPromiseButton @class="btn btn-sm btn-primary" @type="submit" @promise={{action "saveUser"}}>
                    <i class="fa-regular fa-floppy-disk"></i>
                    Save Profile
                </FwPromiseButton>

                <button class="btn btn-sm btn-primary pull-right" type="button" {{action "changePassword"}}>
                    <i class="fa-solid fa-pencil"></i>
                    Change Password
                </button>
            </footer>
        </div>
    </form>
</div>

<div class="col-md-6 col-sm-12">
    <form role="form" id="user-settings-form">
        <div class="panel panel-default">
            <header class="panel-heading">
                <strong class="panel-title">Settings</strong>
            </header>

            <section class="panel-body">
                <FwNotifications @outlet="settings" />

                <div class="form-group">
                    <label>Default Department</label>

                    {{one-way-select
                        settings.defaultDepartment
                        class="form-control"
                        options=model.departments
                        optionLabelPath="name"
                        optionValuePath="id"
                        optionTargetPath="id"
                        prompt="Select a Department"
                        update=(action (mut settings.defaultDepartment))
                    }}

                    <span class="help-block">
                        Choose the department that you will see for this app ({{config.name}})
                        when you initially log in.
                    </span>
                </div>
            </section>

            <footer class="panel-footer">
                <FwPromiseButton @class="btn btn-sm btn-primary" @type="submit" @promise={{action "saveSettings"}}>
                    <i class="fa-regular fa-floppy-disk"></i>
                    Save Settings
                </FwPromiseButton>
            </footer>
        </div>
    </form>
</div>
