    <style include="settings-shared passwords-shared action-link">
      #change-password-link-icon {
        height: 16px;
        margin-inline-start: 10px;
        width: 16px;
        --iron-icon-fill-color: var(--text-color-action);
      }

      #insecurePassword {
        background-color: transparent;
        border: none;
        font-size: inherit;
        margin-inline-start: 4px;
      }

      #insecure-item {
        margin-bottom: 12px;
        margin-top: 12px;
      }

      #insecure-info {
        display: flex;
        flex: 2;
        width: 0;
      }

      #insecureUsername {
        align-items: baseline;
        display: flex;
        flex: 1;
      }

      #changePasswordInApp {
        display: flex;
        flex: 2;
        flex-direction: row-reverse;
        text-align: end;
      }

      #changePasswordUrl {
        align-items: flex-end;
        display: flex;
        flex: 1.5;
        flex-direction: column;
      }

      #changePasswordButton {
        white-space: nowrap;
      }

      #alreadyChanged {
        margin-top: 8px;
        text-align: end;
      }

      #info-column {
        display: flex;
        flex: 1;
        flex-direction: column;
      }

      #insecureOrigin {
        direction: rtl;
        display: flex;
        justify-content: flex-end;
      }

      .icon-weak-cta {
        fill: var(--google-blue-600);
      }

      /* dark mode */
      @media (prefers-color-scheme: dark) {
        .icon-weak-cta {
          fill: var(--google-blue-refresh-300);
        }
      }

      :host-context([dir='rtl']) #insecureOrigin {
        justify-content: flex-start;
      }

      :host-context([dir='rtl']) #change-password-link-icon {
        transform: scaleX(-1);
      }
    </style>
    <div class="list-item" id="insecure-item" focus-row-container>
      <site-favicon url="[[item.changePasswordUrl]]"></site-favicon>
      <div id="insecure-info">
        <div id="info-column" class="no-min-width">
          <div id="insecureOrigin" class="no-min-width">
            <span class="text-elide">
              <!-- This bdo tag is necessary to fix the display of domains
                starting with numbers. -->
              <bdo dir="ltr">[[item.formattedOrigin]]</bdo>
            </span>
          </div>
          <div class="no-min-width" id="insecureUsername" >
            <span class="no-min-width text-elide secondary">
              [[item.username]]
            </span>
            <input class="no-min-width secondary text-elide"
                id="insecurePassword" focus-row-control
                focus-type="passwordField" readonly
                type="[[getInputType_(isPasswordVisible_)]]"
                value="[[password_]]" on-click="onReadonlyInputTap_"
                disabled$="[[!isPasswordVisible_]]">
          </div>
          <template is="dom-if" if="[[isCompromisedItem_(item)]]">
            <div class="secondary" id="leakType">
              [[getCompromiseType_(item)]]
            </div>
            <div class="secondary" id="elapsedTime">
              [[item.compromisedInfo.elapsedTimeSinceCompromise]]
            </div>
          </template>
        </div>
      </div>
      <template is="dom-if" if="[[item.changePasswordUrl]]">
        <div class="button-container" id="changePasswordUrl">
          <cr-button id="changePasswordButton" class$="[[buttonClass_]]"
              on-click="onChangePasswordClick_">
            $i18n{changePasswordButton}
            <iron-icon icon="cr:open-in-new" id="change-password-link-icon"
                class$="[[iconClass_]]">
            </iron-icon>
          </cr-button>
          <a id="alreadyChanged" hidden="[[!clickedChangePassword]]"
              is="action-link" on-click="onAlreadyChangedClick_">
            $i18n{alreadyChangedPasswordLink}
          </a>
        </div>
      </template>
      <template is="dom-if" if="[[!item.changePasswordUrl]]">
        <span id="changePasswordInApp">$i18n{changePasswordInApp}</span>
      </template>
      <cr-icon-button class="icon-more-vert" id="more"
          title="$i18n{moreActions}" on-click="onMoreClick_">
      </cr-icon-button>
    </div>