<header>
  <div class="left">
    <button type="button" (click)="close()">{{ "close" | i18n }}</button>
  </div>
  <h1 class="center">
    <span class="title">{{ "twoStepOptions" | i18n }}</span>
  </h1>
  <div class="right"></div>
</header>
<main tabindex="-1">
  <div class="box">
    <div class="box-content">
      <button
        type="button"
        appStopClick
        *ngFor="let p of providers"
        class="box-content-row"
        (click)="choose(p)"
      >
        <span class="text">{{ p.name }}</span>
        <span class="detail">{{ p.description }}</span>
      </button>
      <button type="button" appStopClick class="box-content-row" (click)="recover()">
        <span class="text">{{ "recoveryCodeTitle" | i18n }}</span>
        <span class="detail">{{ "recoveryCodeDesc" | i18n }}</span>
      </button>
    </div>
  </div>
</main>
