<style include="common">
#container {
display: grid;
grid-template-areas:
'leftspacertop userpreview rightspacertop '
'leftspacerbottom avatars rightspacerbottom';
grid-template-columns: minmax(10px, 1fr) minmax(568px, 920px) minmax(10px, 1fr);
grid-template-rows: auto minmax(0, 1fr);
height: 100%;
min-height: var(--personalization-app-subpage-container-min-height);
}
user-preview {
grid-area: userpreview;
margin-bottom: 16px;
}
avatar-list {
background-color: var(--cros-bg-color);
border: none;
grid-area: avatars;
padding-bottom: 12px;
}
user-preview + avatar-list {
border-top: 1px solid var(--cros-separator-color);
padding-top: 10px;
}
</style>
<div id="container">
<div class="leftspacertop"></div>
<div class="leftspacerbottom"></div>
<template is="dom-if"
if="[[isNotEnterpriseManaged_(isUserImageEnterpriseManaged_)]]">
<user-preview path="[[path]]"></user-preview>
<avatar-list></avatar-list>
</template>
<div class="rightspacertop"></div>
<div class="rightspacerbottom"></div>
</div>