<div class="small-middle-container" *ngIf="username">
  <div class="d-flex">
    <img class="profile-img" [src]="userProfileImageUrl" (error)="onProfileImageError()" >
    <h2 id="usernameTitle">{{username}}
      <small id="emailTitle" *ngIf="user?.emailAddress">({{user.emailAddress}})</small>
    </h2>
  </div>

  <mat-tab-group>
    <mat-tab label="{{'UserPreferences.Profile' | translate}}">
      <div class="tab-content">

        <div class="row user-type-row">
          <div class="col-5 col-sm-3 col-md-2">
            {{'UserPreferences.UserType' | translate}}
          </div>
          <div class="col-7 col-sm-9 col-md-10">
            {{'UserTypeLabel.' + user?.userType | translate }}
          </div>
        </div>

        <div class="row">
          <div class="col-12 col-sm-6 col-xl-5">
            <div>
              <small>{{'UserPreferences.LanguageDescription' | translate}}</small>
              <br>
              <mat-form-field>
                <mat-label [translate]="'UserPreferences.OmbiLanguage'"></mat-label>
                <mat-select id="langSelect" [(value)]="selectedLang" (selectionChange)="languageSelected();">
                  <mat-option id="langSelect{{lang.value}}" *ngFor="let lang of availableLanguages"
                    [value]="lang.value">
                    {{lang.display}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>

            <div>
              <small>{{'UserPreferences.StreamingCountryDescription' | translate}}</small>
              <br>
              <mat-form-field>
                <mat-label [translate]="'UserPreferences.StreamingCountry'"></mat-label>
                <mat-select id="streamingSelect" [(value)]="selectedCountry" (selectionChange)="countrySelected();">
                  <mat-option id="streamingSelect{{value}}" *ngFor="let value of countries" [value]="value">
                    {{value}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>

          <div style="margin-left:4%" class="col-12 col-sm-6 col-xl-5">
            <mat-label [translate]="'UserPreferences.MobileQRCode'"></mat-label>
            <div id="noQrCode" *ngIf="!qrCodeEnabled" [translate]="'UserPreferences.NoQrCode'"></div>
            <div class="row">
              <qrcode id="qrCode" *ngIf="qrCodeEnabled" [qrdata]="qrCode" [size]="256" [level]="'L'"></qrcode>
              <div class="row">
                <div class="col-12">
                  <a href="https://play.google.com/store/apps/details?id=com.tidusjar.Ombi&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"
                    target="_blank"><img width="200" alt="Get it on Google Play"
                      src="https://play.google.com/intl/{{ selectedLang }}/badges/static/images/badges/{{ selectedLang }}_badge_web_generic.png" /></a>
                </div>
                <div class="col-12">
                  <a href="https://apps.apple.com/us/app/ombi/id1335260043" target="_blank"><img
                      style="margin-left:13px" width="170" alt="Get it from the App Store"
                      src="{{baseUrl}}/images/appstore.svg" /></a>
                </div>
                <div class="col-12">
                  <button style="margin-left:13px; margin-top: 20px;" mat-raised-button color="accent" type="button" (click)="openMobileApp($event)">
                    {{'NavigationBar.OpenMobileApp' | translate}}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </mat-tab>
    <mat-tab *ngIf="user?.userType === UserType.LocalUser" label="{{'UserPreferences.Security' | translate}}">
      <div class="tab-content">
        <h2>{{'UserPreferences.ChangeDetails' | translate}}</h2>
        <form novalidate [formGroup]="passwordForm" (ngSubmit)="updatePassword()">
          <div class="row">
            <div class="col-md-6 col-12">
              <span>{{'UserPreferences.NeedCurrentPassword' | translate}}</span>
              <mat-form-field appearance="outline" floatLabel=always>
                <mat-label>{{'UserPreferences.CurrentPassword' | translate}}</mat-label>
                <input id="currentPassword" matInput type="password" formControlName="currentPassword">
              </mat-form-field>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-12">
              <mat-form-field appearance="outline" floatLabel=always>
                <mat-label>{{'UserPreferences.EmailAddress' | translate}}</mat-label>
                <input id="email" matInput formControlName="emailAddress">
              </mat-form-field>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 col-12">
              <mat-form-field appearance="outline" floatLabel=always>
                <mat-label>{{'UserPreferences.NewPassword' | translate}}</mat-label>
                <input id="newPassword" matInput type="password" formControlName="password">
              </mat-form-field>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-12">
              <mat-form-field appearance="outline" floatLabel=always>
                <mat-label>{{'UserPreferences.NewPasswordConfirm' | translate}}</mat-label>
                <input id="confirmPassword" matInput type="password" formControlName="confirmPassword">
              </mat-form-field>
            </div>
          </div>
          <button id="submitSecurity" mat-raised-button color="accent" type="submit">
            {{'Common.Update' | translate}}
          </button>
        </form>

      </div>

    </mat-tab>


    <!-- <mat-tab label="Preferences"> Coming Soon... </mat-tab> -->


  </mat-tab-group>



</div>
