<style include="settings-shared iron-flex">
:host {
--icon-width: 40px;
}
.sync-row {
align-items: center;
flex: auto;
}
#profile-icon {
background: center / cover no-repeat;
border-radius: 20px;
flex-shrink: 0;
height: 40px;
width: 40px;
}
#syncSetupRow {
--cr-secondary-text-color: var(--cros-sys-error);
}
cr-link-row {
--cr-link-row-icon-width: var(--icon-width);
border-top: var(--cr-separator-line);
}
settings-parental-controls-page {
--cr-link-row-icon-width: var(--icon-width);
}
parental-controls-settings-card {
--cr-link-row-icon-width: var(--icon-width);
}
.icon-container {
display: flex;
flex-shrink: 0;
justify-content: center;
width: 40px;
}
</style>
<os-settings-animated-pages id="pages" section="[[section_]]">
<template is="dom-if" if="[[isRevampWayfindingEnabled_]]">
<div route-path="default">
<account-manager-settings-card
prefs="{{prefs}}"
device-account="[[deviceAccount_]]">
</account-manager-settings-card>
<additional-accounts-settings-card
prefs="{{prefs}}"
accounts="[[accounts_]]">
</additional-accounts-settings-card>
<template is="dom-if" if="[[showParentalControls_]]">
<parental-controls-settings-card
prefs="{{prefs}}">
</parental-controls-settings-card>
</template>
</div>
</template>
<template is="dom-if" if="[[!isRevampWayfindingEnabled_]]">
<div route-path="default">
<settings-card header-text="$i18n{osPeoplePageTitle}">
<div class="settings-box first two-line">
<template is="dom-if" if="[[syncStatus]]">
<!-- Does not use <cr-link-row> due to custom aria label. -->
<div id="profile-icon"
style="background-image: [[getIconImageSet_(profileIconUrl_)]]"
on-click="onAccountManagerClick_"
actionable$="[[isAccountManagerEnabled_]]">
</div>
<div class="middle two-line no-min-width"
id="profile-row"
on-click="onAccountManagerClick_"
actionable$="[[isAccountManagerEnabled_]]">
<div class="flex text-elide settings-box-text">
<span id="profile-name" aria-hidden="true">
[[getProfileName_(profileName_)]]
</span>
<div id="profile-label" class="secondary"
aria-hidden="true">
[[profileLabel_]]
</div>
</div>
<cr-icon-button class="subpage-arrow"
hidden="[[!isAccountManagerEnabled_]]"
id="accountManagerSubpageTrigger"
aria-label="$i18n{accountManagerSubMenuLabel}"
aria-describedby="profile-name profile-label"
aria-roledescription="$i18n{subpageArrowRoleDescription}">
</cr-icon-button>
</div>
</template>
</div>
<cr-link-row id="syncSetupRow"
start-icon="cr:sync"
label="$i18n{syncAndNonPersonalizedServices}"
sub-label="[[getSyncAndGoogleServicesSubtext_(syncStatus)]]"
on-click="onSyncClick_"
role-description="$i18n{subpageArrowRoleDescription}">
</cr-link-row>
<template is="dom-if" if="[[showParentalControls_]]">
<settings-parental-controls-page>
</settings-parental-controls-page>
</template>
</settings-card>
</div>
<template is="dom-if" route-path="/osSyncSetup">
<os-settings-subpage
page-title="$i18n{syncPageTitle}"
learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
<os-settings-sync-subpage
sync-status="[[syncStatus]]" prefs="{{prefs}}">
</os-settings-sync-subpage>
</os-settings-subpage>
</template>
<template is="dom-if" route-path="/osSync">
<os-settings-subpage page-title="[[getSyncAdvancedTitle_()]]"
learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
<os-sync-controls-subpage>
</os-sync-controls-subpage>
</os-settings-subpage>
</template>
<template is="dom-if" route-path="/accountManager">
<os-settings-subpage page-title="$i18n{accountManagerPageTitle}">
<settings-account-manager-subpage prefs="[[prefs]]">
</settings-account-manager-subpage>
</os-settings-subpage>
</template>
</template>
</os-settings-animated-pages>