<div class="content">
  <mat-card style="max-width: 500px" flex="50">
    <mat-card-header
      style="
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.03);
      "
    >
      <mat-card-title>{{ "Login_Title" | translate }}</mat-card-title>

      <mat-select
        (selectionChange)="switchLang($event)"
        [(value)]="selectedLanguageFlag"
        style="width: 60px; padding-left: 30px"
      >
        <mat-select-trigger>
          <img
            src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}"
            style="width: 30px"
          />
        </mat-select-trigger>
        <mat-option value="fr">
          <img src="assets/img/fr.svg" style="width: 30px" />
        </mat-option>
        <mat-option value="en">
          <img src="assets/img/en.svg" style="width: 30px" />
        </mat-option>
      </mat-select>
    </mat-card-header>

    <mat-card-content>
      <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
        <mat-tab label="{{ 'Login_Tab_WithUser' | translate }}" tabIndex="-1">
          <app-login-user></app-login-user>
        </mat-tab>
        <mat-tab label="{{ 'Login_Tab_CreateUser' | translate }}" tabIndex="-1">
          <app-create-user></app-create-user>
        </mat-tab>
      </mat-tab-group>
    </mat-card-content>
  </mat-card>
</div>
