import { html } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
export function getTemplate() {
    return html `<!--_html_template_start_--><style include="shared-style cr-shared-style">
  #container:hover {
    background-color: var(--cr-hover-background-color);
    border-radius: inherit;
    cursor: pointer;
    --cr-icon-button-hover-background-color: transparent;
    --cr-icon-button-active-background-color: transparent;
  }

  #borderPart {
    display: grid;
    flex: 1;
    grid-template-columns: auto 1fr;
    min-height: var(--section-min-height);
  }

  #favicon {
    margin-inline-end: 20px;
    margin-inline-start: 20px;
  }

  .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #numberOfAccounts {
    margin-inline-start: 8px;
    unicode-bidi: embed;
  }

  #cloudUploadButton {
    --cr-icon-button-hover-background-color: var(--cr-hover-background-color);
    --cr-icon-button-margin-start: 10px;
  }

  #endIcons {
    --cr-icon-button-margin-start: 0px;
    --cr-icon-button-margin-end: 10px;
    justify-self: end;
    align-items: center;
    display: flex;
  }

  cr-tooltip::part(tooltip) {
    min-width: 0;
    white-space: normal;
    line-height: 1.1;
    padding: 6px 10px;
  }

  span {
    color: var(--cr-secondary-text-color);
  }

  #localPasswordsIcon {
    --iron-icon-width: 16px;
    --iron-icon-height: 16px;
  }
</style>
<div id="container" class="flex-centered">
  <!-- TODO(crbug.com/40234318): Support icons for android apps. -->
  <site-favicon id="favicon" url="[[item.iconUrl]]"
      domain="[[item.name]]" aria-hidden="true">
  </site-favicon>
  <div id="borderPart" class$="[[getElementClass_(first)]]">
    <div class="label" aria-hidden="true">
      <searchable-label id="displayedName"
          title="[[getTitle_(item, searchTerm)]]"
          search-term="[[searchTerm]]"></searchable-label>
      <span id="numberOfAccounts"
          hidden="[[!showNumberOfAccounts_(item, searchTerm)]]">
        [[numberOfAccounts_]]
      </span>
    </div>

    <div id="endIcons">
      <cr-icon id="localPasswordsIcon"
          icon="cr20:cloud-off" aria-hidden="true"
          hidden="[[!shouldShowDeviceOnlyCredentialsIcon_(
            isAccountStoreUser, item.entries)]]">
      </cr-icon>
      <cr-icon-button id="cloudUploadButton"
          iron-icon="passwords-icon:password-cloud-upload"
          hidden="[[!shouldShowUploadPasswordsIcon_(
            isAccountStoreUser, item.entries)]]"
          on-click="onUploadButtonClick_"
          aria-label="[[tooltipText_]]">
      </cr-icon-button>
      <cr-icon-button id="seePasswordDetails" class="subpage-arrow"
          aria-label="[[getAriaLabel_(
            item, deviceOnlyCredentialsAccessibilityLabelText_)]]">
      </cr-icon-button>
    </div>
  </div>
</div>
<template is="dom-if" if="[[showMovePasswordDialog_]]" restamp>
  <move-passwords-dialog on-close="onMovePasswordDialogClose_"
      id="movePasswordsDialog" passwords="[[getCredentialsOnDevice_(item)]]"
      url="[[item.name]]"
      has-only-one-device-credential="[[hasOnlyOneDeviceCredential_(item)]]">
  </move-passwords-dialog>
</template>

<cr-tooltip position="top"
    for="[[getLocalPasswordsIcon_()]]" offset="0">[[tooltipText_]]</cr-tooltip>
<!--_html_template_end_-->`;
}
