<ion-header>
  <ion-toolbar mode="ios" [color]="color">
    <ion-buttons slot="end">
      <ion-button (click)="tapHaptic(); shareQrCode()" fill="clear" [color]="'primary'">
        {{ 'SHARE' | translate }}
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content [color]="color">
  <div class="d-flex align-items-center justify-content-top flex-column" style="height: 100%;">
    <ion-row>
      <ion-col class="ion-text-center ion-padding" style="max-width: 100% !important;">
        <ngx-qrcode [elementType]="qrElementType" [value]="qrCodeContent" [width]="defaultWidth"
          [errorCorrectionLevel]="errorCorrectionLevel" [colorDark]="qrColorDark" [colorLight]="qrColorLight"
          [margin]="env.qrCodeMargin" #qrcode [hidden]="isSharing">
        </ngx-qrcode>
        <div class="d-flex flex-column align-items-center" *ngIf="isSharing">
          <ion-spinner class="my-3"></ion-spinner>
        </div>
      </ion-col>
    </ion-row>
    <ion-row style="max-width: 300px;">
      <ion-col class="ion-text-center">
        <span class="qr-code">
          {{ qrCodeContent }}
        </span>
      </ion-col>
    </ion-row>
    <ion-row class="pt-3 px-4" style="width: 100%;">
      <ion-item class="ion-no-padding" lines="none" [color]="color">
        <ion-label>
          <p class="ion-padding-horizontal">
            <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'"
              style="white-space: normal; font-size: large;">
              <div [innerHTML]="('ERROR_CORRECTION_LEVEL' | translate)">
              </div>
            </ion-text>
          </p>
        </ion-label>
      </ion-item>
      <ion-radio-group [(ngModel)]="env.errorCorrectionLevel" (ionChange)="onErrorCorrectionLevelChange()"
        style="width: 100%;">
        <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" [color]="color">
          <ion-label>
            <p class="ion-padding-horizontal">
              <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
                {{ 'LEVEL_L' | translate }}
              </ion-text>
            </p>
          </ion-label>
          <ion-radio slot="end" [value]="'L'" [color]="'primary'">
          </ion-radio>
        </ion-item>
        <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" [color]="color">
          <ion-label>
            <p class="ion-padding-horizontal">
              <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
                {{ 'LEVEL_M' | translate }}
              </ion-text>
            </p>
          </ion-label>
          <ion-radio slot="end" [value]="'M'" [color]="'primary'">
          </ion-radio>
        </ion-item>
        <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" [color]="color">
          <ion-label>
            <p class="ion-padding-horizontal">
              <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
                {{ 'LEVEL_Q' | translate }}
              </ion-text>
            </p>
          </ion-label>
          <ion-radio slot="end" [value]="'Q'" [color]="'primary'">
          </ion-radio>
        </ion-item>
        <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none" [color]="color">
          <ion-label>
            <p class="ion-padding-horizontal">
              <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
                {{ 'LEVEL_H' | translate }}
              </ion-text>
            </p>
          </ion-label>
          <ion-radio slot="end" [value]="'H'" [color]="'primary'">
          </ion-radio>
        </ion-item>
      </ion-radio-group>
      <ion-button class="pt-2 ion-margin-bottom" fill="clear" (click)="goQrSetting()" color="primary">
        {{ 'QR_CODE_STYLE' | translate }}
      </ion-button>
    </ion-row>
  </div>
</ion-content>