<style include="shared-style cr-input-style cr-shared-style
credential-details-card cr-icons">
</style>
<div class="card" aria-label="[[getAriaLabelForPasswordCard_(passkey)]]"
role="region">
<div class="credential-container">
<div class="row-container">
<div class="column-container">
<credential-field value="[[getDisplayNameValue_(passkey)]]"
id="displayNameValue" label="$i18n{displayNameLabel}"
copy-button-label="$i18n{copyDisplayName}"
value-copied-toast-label="$i18n{displayNameCopiedToClipboard}"
interaction-id="[[
interactions_.PASSKEY_DISPLAY_NAME_COPY_BUTTON_CLICKED]]">
</credential-field>
</div>
<div class="column-container">
<div id="domainLabel" class="cr-form-field-label">
$i18n{sitesLabel}
</div>
<template id="links" is="dom-repeat"
items="[[passkey.affiliatedDomains]]">
<div class="elide-left">
<a href="[[item.url]]" class="site-link" target="_blank">
[[item.name]]
</a>
</div>
</template>
</div>
</div>
<div class="row-container">
<div class="column-container">
<credential-field value="[[getUsernameValue_(passkey)]]"
id="usernameValue" label="$i18n{usernameLabel}"
copy-button-label="$i18n{copyUsername}"
value-copied-toast-label="$i18n{usernameCopiedToClipboard}"
interaction-id="[[interactions_.USERNAME_COPY_BUTTON_CLICKED]]">
</credential-field>
</div>
</div>
<div class="row-container">
<div id="infoLabel" class="cr-secondary-text">
<iron-icon icon="passwords-icon:passkey"></iron-icon>
[[infoLabelText_]]
</div>
</div>
</div>
<div class="button-container">
<cr-button id="editButton" class="edit-button" on-click="onEditClicked_"
aria-label="[[getAriaLabelForEditButton_(passkey)]]">
$i18n{edit}
</cr-button>
<cr-button id="deleteButton" on-click="onDeleteClick_"
aria-label="[[getAriaLabelForDeleteButton_(passkey)]]">
$i18n{delete}
</cr-button>
</div>
</div>
<template is="dom-if" if="[[showEditPasskeyDialog_]]" restamp
id="editPasskeyTemplate">
<edit-passkey-dialog on-close="onEditPasskeyDialogClosed_"
id="editPasskeyDialog" passkey="{{passkey}}">
</edit-passkey-dialog>
</template>
<template is="dom-if" if="[[showDeletePasskeyDialog_]]" restamp
id="deletePasskeyTemplate">
<delete-passkey-dialog on-close="onDeletePasskeyDialogClosed_"
id="deletePasskeyDialog" passkey="{{passkey}}">
</delete-passkey-dialog>
</template>