<style include="shared-style">
#avatar {
border-radius: 50%;
height: 16px;
margin-inline-end: 10px;
width: 16px;
}
#passwords {
margin-bottom: 4px;
margin-top: 16px;
}
div[slot='body'] {
max-height: 60vh;
}
</style>
<cr-dialog id="dialog">
<div slot="title" class="dialog-title">$i18n{movePasswordsTitle}</div>
<div slot="body">
<div>$i18n{movePasswordsDescription}</div>
<div id="passwords">
<dom-repeat items="[[passwords]]">
<template>
<password-preview-item password-id="[[item.id]]"
url="[[getUrl_(item)]]" username="[[item.username]]"
password="[[item.password]]" first="[[!index]]"
on-change="passwordSelected_">
</password-preview-item>
</template>
</dom-repeat>
</div>
</div>
<div slot="button-container">
<cr-button id="cancel" class="cancel-button" on-click="onCancel_" autofocus>
$i18n{cancel}
</cr-button>
<cr-button id="move" class="action-button" on-click="onMoveButtonClick_"
disabled="[[!selectedPasswordIds_.length]]">
$i18n{movePasswordsButton}
</cr-button>
</div>
<div slot="footer" class="flex-centered">
<img id="avatar" src="[[avatarImage]]"></img>
<div id="accountEmail" class="label">[[accountEmail]]</div>
</div>
</cr-dialog>