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">
  .permission-item {
    align-items: center;
    border-bottom: var(--cr-separator-line);
    display: flex;
    flex: 1;
    min-height: 48px;
  }

  .flex-centered {
    align-items: center;
    display: flex;
  }

  .favicon {
    margin-inline-end: 16px;
    margin-inline-start: 16px;
  }

  .section {
    margin-inline-end: var(--cr-section-padding);
    margin-inline-start: var(--cr-section-padding);
  }

  .no-sites {
    padding-bottom: 32px;
    padding-top: 16px;
    padding-inline-start: 40px;
  }

  .header-container {
    padding-bottom: 14px;
  }

  .url-column {
    flex: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .username-column {
    flex: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  cr-icon-button {
    --cr-icon-button-icon-size: 16px;
  }
</style>
<template is="dom-if" if="[[selectedPermissionToRemove_]]" restamp>
  <settings-simple-confirmation-dialog
      title-text="$i18n{glicRemoveActorLoginDialogTitle}"
      body-text="[[getRemoveDialogDescription_(
          selectedPermissionToRemove_.displayName)]]"
      confirm-text="$i18n{remove}"
      on-close="onRemoveDialogClose_">
  </settings-simple-confirmation-dialog>
</template>
<settings-subpage page-title="$i18n{glicActorLoginPermissionsSectionTitle}"
    route-path$="[[routePath]]">
  <div class="header-container section">
    <div id="actorLoginPermissionsTitle">
      $i18n{glicLoginPermissionsPageTitle}
    </div>
    <div id="actorLoginPermissionsHeader" class="cr-secondary-text">
      $i18n{glicLoginPermissionsPageDescription}
    </div>
  </div>
  <div id="actorLoginPermissionsList" class="section">
    <template is="dom-if" if="[[!isOnline_]]">
      <div id="offlineWarning" class="no-sites cr-secondary-text">
        $i18n{glicLoginPermissionsOfflineWarning}
      </div>
    </template>
    <template is="dom-if" if="[[isOnline_]]">
      <div class="no-sites cr-secondary-text"
          hidden="[[actorLoginPermissions_.length]]">
        $i18n{glicLoginPermissionsNoSites}
      </div>
      <template is="dom-repeat" items="[[actorLoginPermissions_]]">
        <div class="flex-centered">
          <site-favicon class="favicon" url="[[item.signonRealm]]">
          </site-favicon>
          <div class="permission-item">
            <div class="url-column">[[item.displayName]]</div>
            <div class="username-column">[[item.username]]</div>
            <cr-icon-button
                class="icon-clear"
                on-click="onRemoveActorLoginPermissionClick_"
                title="$i18n{remove}"
                aria-label="[[i18n('glicRevokeActorLoginPermissionAriaLabel',
                        item.displayName)]]">
            </cr-icon-button>
          </div>
        </div>
      </template>
    </template>
  </div>
</settings-subpage>

<cr-toast id="removeErrorToast" duration="3000">
  <div>$i18n{glicLoginPermissionsRemoveError}</div>
</cr-toast><!--_html_template_end_-->`;
}
