<div class="page-header">
    <h1>{{'authenticatorTitle' | translate}}</h1>
</div>

<div class="col-sm-12 card-pf">
  <div class="card-pf-body p-b">
    <span class="label label-default m-r">OFF</span>
    <!-- <span class="label label-primary m-r">ON</span> -->
    {{'authenticatorStatusMessage' | translate}} off
  </div>
</div>

<div class="col-sm-12 card-pf">
  <div class="card-pf-body row">
    <div class="col-sm-4 col-md-4">
      <div class="card-pf-subtitle">
          {{'authenticatorFinishSetUpTitle' | translate}}
      </div>
      <div class="introMessage">
          <p>{{'authenticatorFinishSetUpMessage' | translate}}</p>
      </div>
    </div>
    <div class="col-sm-8 col-md-8">
      <div class="list-pf list-pf-stacked list-authenticator">
        <div class="list-authenticator-item">
          <div class="list-pf-container">
            <div class="list-pf-content list-pf-content-flex ">
              <div class="list-pf-left">
                <span class="fa fa-google list-pf-icon"></span>
              </div>
              <div class="list-pf-content-wrapper">
                <div class="list-pf-main-content">
                  <div class="list-pf-title text-overflow-pf">
                    {{'authenticatorMobileTitle' | translate}}
                    <span class="label label-default authenticator-label">{{'authenticatorDefaultStatus' | translate}}</span>
                  </div>
                  <div class="list-pf-description">
                    {{'authenticatorMobileFinishSetUpMessage' | translate}}
                  </div>
                  <div class="top-margin-m authenticator-entry">
                    <a href="javascript:void(0)">{{'authenticatorChangePhone' | translate}}</a>
                  </div>
                </div>
              </div>
              <div class="list-pf-actions">
                <div class="dropdown pull-right dropdown-kebab-pf">
                  <button id="dropdownKebabRight" class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <span class="fa fa-ellipsis-v"></span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
                    <li><a href="javascript:void(0)">{{'doRemove' | translate}}</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="col-sm-12 card-pf">
  <div class="card-pf-body row">
    <div class="col-sm-4 col-md-4">
      <div class="card-pf-subtitle">
          {{'authenticatorSubTitle' | translate}}
      </div>
      <div class="introMessage">
          <p>{{'authenticatorSubMessage' | translate}}</p>
      </div>
    </div>
    <div class="col-sm-8 col-md-8">
      <div class="list-pf list-pf-stacked list-authenticator">
        <div class="list-authenticator-item">
          <div class="list-pf-container">
            <div class="list-pf-content list-pf-content-flex">
              <div class="list-pf-left">
                <span class="fa fa-mobile list-pf-icon"></span>
              </div>
              <div class="list-pf-content-wrapper">
                <div class="list-pf-main-content">
                  <div class="list-pf-title text-overflow-pf">{{'authenticatorSMSTitle' | translate}}</div>
                  <div class="list-pf-description">{{'authenticatorSMSMessage' | translate}}</div>
                </div>
              </div>
              <div class="list-pf-actions">
                <a class="btn btn-link" href="javascript:void(0)">{{'authenticatorActionSetup' | translate}}</a>
              </div>
            </div>
          </div>
        </div>
        <div class="list-authenticator-item">
          <div class="list-pf-container">
            <div class="list-pf-content list-pf-content-flex ">
              <div class="list-pf-left">
                <span class="fa fa-lock list-pf-icon list-pf-icon-large"></span>
              </div>
              <div class="list-pf-content-wrapper">
                <div class="list-pf-main-content">
                  <div class="list-pf-title text-overflow-pf">{{'authenticatorBackupCodesTitle' | translate}}</div>
                  <div class="list-pf-description">{{'authenticatorBackupCodesMessage' | translate}}</div>
                </div>
              </div>
              <div class="list-pf-actions">
                <a class="btn btn-link" href="javascript:void(0)">{{'authenticatorActionSetup' | translate}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
