<xf:title>{{ phrase('account_details') }}</xf:title>

<xf:wrap template="account_wrapper" />

<xf:if is="!$xf.visitor.canEditProfile()">
    <div class="blockMessage blockMessage--important">{{ phrase('your_full_account_details_not_currently_editable') }}</div>
</xf:if>

<xf:if is="$pendingUsernameChange">
    <div class="blockMessage blockMessage--important">
        {{ phrase('pending_username_change_message', {'username': $pendingUsernameChange.new_username}) }}
    </div>
</xf:if>

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <div class="memberHeader {{ $user.Profile.banner_date ? 'memberHeader--withBanner' : '' }}" style="position:relative;">
                <xf:profilebanner user="$xf.visitor" size="l" class="memberHeader-main" toggle="memberHeader--withBanner">
                    <div class="memberHeader-mainContent" style="text-align: center;padding:10px;">
                        <span class="memberHeader-avatar">
                            <span class="avatarWrapper">
                                <xf:avatar user="{$xf.visitor}" size="l" href="" notooltip="true" />
                                <xf:if is="$xf.visitor.canUploadAvatar()">
                                    <a class="avatarWrapper-update" href="{{ link('account/avatar') }}" data-xf-click="overlay"><span>{{ phrase('edit') }}</span></a>
                                </xf:if>
                            </span>
                                </span>
                    <h1 class="message-name" style="margin: 5px 0px 0px;">
                        <span style="font-size:24px!important;font-weight:500; margin-top: 1px;">
                            <span class="username--style2">{$xf.visitor.username}</span> <a href="{{ link('account/username') }}" class="help_links" style="font-size:20px;" data-xf-click="overlay" title="{{ phrase('change_username') }}" data-xf-init="tooltip"><i class="fas fa-edit"></i></a>
                <xf:if is="$xf.visitor.canChangeUsername()">
                    
                            </xf:if></span></h1>
                        <div class="memberHeader-blurb" style="text-align:center!important;font-size:11px;"><xf:userbanners user="$xf.visitor" tag="div" class="message-userBanner" itemprop="jobTitle" /></div>
                        <div class="memberHeader-content memberHeader-content--info">
                            <xf:if contentcheck="true">
                            <div class="memberHeader-actionTop" style="position:absolute;top:0;right:0;padding:10px;">
                                <xf:contentcheck>
                                <!--[XF:action_top_start]-->
                                <xf:if contentcheck="true">
                                    <div class="buttonGroup">
                                        <xf:contentcheck>
                                            <xf:if is="$xf.visitor.canUploadProfileBanner()">
                                                <xf:button href="{{ link('account/banner') }}"
                                                    class="button--link" overlay="true" title="{{ phrase('edit_profile_banner') }}" data-xf-init="tooltip">
                                                    <i class="fas fa-camera"></i>
                                                </xf:button></xf:if>
                                        </xf:contentcheck>
                                    </div>
                                </xf:if>
                                <!--[XF:action_top_end]-->
                                </xf:contentcheck>
                            </div>
                        </xf:if>
                        </div></div></xf:profilebanner></div></div></div></div>
<xf:form action="{{ link('account/account-details') }}" ajax="true" class="block" data-force-flash-message="true">
    <div class="block-container">
        <div class="block-body">

            <xf:formrow rowtype="button"
                label="{{ phrase('email') }}">

                <xf:if is="$xf.visitor.email">
                    {$xf.visitor.email}
                <xf:else />
                    <i>{{ phrase('none') }}</i>
                </xf:if>
                <xf:button href="{{ link('account/email') }}" class="button--link" overlay="true">{{ phrase('change') }}</xf:button>
            </xf:formrow>

                <xf:if is="{{ $xf.visitor.Profile.dob_day && $xf.visitor.Profile.dob_month && $xf.visitor.Profile.dob_year }}">
                    <xf:formrow
                        label="{{ phrase('date_of_birth') }}"
                        explain="{{ phrase('once_your_birthday_has_been_entered_it_cannot_be_changed') }}">

                        <xf:set var="$birthday" value="{{ $xf.visitor.Profile.getBirthday(true) }}" />
                        {{ date($birthday.timeStamp, $birthday.format) }}
                    </xf:formrow>
                <xf:else />
                    <xf:macro template="helper_user_dob_edit" name="dob_edit" arg-dobData="{$xf.visitor.Profile}" />
                </xf:if>
            
            <xf:if is="$xf.visitor.canEditProfile()">
                <xf:if is="{{ $xf.visitor.hasPermission('general', 'editCustomTitle') }}">
                    <xf:textboxrow name="user[custom_title]" value="{$xf.visitor.custom_title_}"
                        maxlength="{{ max_length($xf.visitor, 'custom_title') }}"
                        label="{{ phrase('custom_title') }}"
                        explain="{{ phrase('if_specified_replace_title_that_displays_under_name_in_posts') }}" />
                </xf:if>

            <hr class="formRowSep" />


                <xf:textboxrow name="profile[location]" value="{$xf.visitor.Profile.location_}"
                    maxlength="{{ max_length($xf.visitor.Profile, 'location') }}"
                    label="{{ phrase('location') }}" />
                <xf:textboxrow name="profile[website]" value="{$xf.visitor.Profile.website_}" type="url"
                    maxlength="{{ max_length($xf.visitor.Profile, 'website') }}"
                    label="{{ phrase('website') }}" />

                <xf:macro template="custom_fields_macros" name="custom_fields_edit" arg-type="users" arg-group="personal" arg-set="{$xf.visitor.Profile.custom_fields}" />

                <hr class="formRowSep" />

                <xf:editorrow name="about" value="{$xf.visitor.Profile.about_}" previewable="0"
                    label="{{ phrase('about_you') }}"/>
            </xf:if>
        </div>
        <xf:if is="$xf.visitor.canEditProfile()">
            <xf:if contentcheck="true">
                <h2 class="block-formSectionHeader"><span class="block-formSectionHeader-aligner">{{ phrase('identities') }}</span></h2>
                <div class="block-body">
                    <xf:contentcheck>
                        <xf:macro template="custom_fields_macros" name="custom_fields_edit" arg-type="users" arg-group="contact" arg-set="{$xf.visitor.Profile.custom_fields}" />
                    </xf:contentcheck>
                </div>
            </xf:if>
            <xf:submitrow icon="save" sticky="true" />
        </xf:if>
    </div>
</xf:form>

[data-template="account_details"] {
.avatar img {
    background-color: transparent !important;
}
}