<div class="container">
  <div class="row">
    <div class="col">
      <h3 class="mb-3 text-center" i18n>Account</h3>
    </div>
  </div>
  <div *ngIf="user?.settings" class="mb-5 row">
    <div class="col">
      <mat-card class="mb-3">
        <mat-card-content>
          <div
            *ngIf="hasPermissionToUpdateUserSettings && user?.subscription"
            class="d-flex py-1"
          >
            <div class="pr-1 w-50" i18n>Membership</div>
            <div class="pl-1 w-50">
              <div class="align-items-center d-flex mb-1">
                <a [routerLink]="['/pricing']"
                  >{{ user?.subscription?.type }}</a
                >
                <gf-premium-indicator
                  *ngIf="user?.subscription?.type === 'Premium'"
                  class="ml-1"
                ></gf-premium-indicator>
              </div>
              <div *ngIf="user?.subscription?.type === 'Premium'">
                <ng-container i18n>Valid until</ng-container> {{
                user?.subscription?.expiresAt | date: defaultDateFormat }}
              </div>
              <div *ngIf="user?.subscription?.type === 'Basic'">
                <ng-container *ngIf="hasPermissionForSubscription">
                  <button
                    color="primary"
                    mat-flat-button
                    (click)="onCheckout(priceId)"
                  >
                    <ng-container i18n>Upgrade</ng-container>
                  </button>
                  <div *ngIf="price" class="mt-1">
                    <ng-container *ngIf="coupon"
                      ><del class="text-muted"
                        >{{ baseCurrency }}&nbsp;{{ price }}</del
                      >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
                      }}</ng-container
                    >
                    <ng-container *ngIf="!coupon"
                      >{{ baseCurrency }}&nbsp;{{ price }}</ng-container
                    >&nbsp;<span i18n>per year</span>
                  </div>
                </ng-container>
                <a
                  *ngIf="!user?.subscription?.expiresAt"
                  class="mr-2 my-2"
                  mat-stroked-button
                  [href]="trySubscriptionMail"
                  ><span i18n>Try Premium</span>
                  <gf-premium-indicator
                    class="d-inline-block ml-1"
                    [enableLink]="false"
                  ></gf-premium-indicator
                ></a>
                <a
                  class="mr-2 my-2"
                  i18n
                  mat-stroked-button
                  [routerLink]=""
                  (click)="onRedeemCoupon()"
                  >Redeem Coupon</a
                >
              </div>
            </div>
          </div>
          <div class="align-items-center d-flex mt-4 py-1">
            <div class="pr-1 w-50">
              <div i18n>Presenter View</div>
              <div class="hint-text text-muted" i18n>
                Protection for sensitive information like absolute performances
                and quantity values
              </div>
            </div>
            <div class="pl-1 w-50">
              <mat-slide-toggle
                color="primary"
                [checked]="user.settings.isRestrictedView"
                [disabled]="!hasPermissionToUpdateUserSettings"
                (change)="onRestrictedViewChange($event)"
              ></mat-slide-toggle>
            </div>
          </div>
          <div class="d-flex mt-4 py-1">
            <form #changeUserSettingsForm="ngForm" class="w-100">
              <div class="d-flex mb-2">
                <div class="align-items-center d-flex pt-1 pt-1 w-50">
                  <ng-container i18n>Base Currency</ng-container>
                </div>
                <div class="pl-1 w-50">
                  <mat-form-field
                    appearance="outline"
                    class="compact-with-outline w-100 without-hint"
                  >
                    <mat-select
                      name="baseCurrency"
                      [disabled]="!hasPermissionToUpdateUserSettings"
                      [value]="user.settings.baseCurrency"
                      (selectionChange)="onChangeUserSetting('baseCurrency', $event.value)"
                    >
                      <mat-option
                        *ngFor="let currency of currencies"
                        [value]="currency"
                        >{{ currency }}</mat-option
                      >
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>
              <div class="align-items-center d-flex mb-2">
                <div class="pr-1 w-50">
                  <div i18n>Language</div>
                </div>
                <div class="pl-1 w-50">
                  <mat-form-field
                    appearance="outline"
                    class="compact-with-outline w-100 without-hint"
                  >
                    <mat-select
                      name="language"
                      [disabled]="!hasPermissionToUpdateUserSettings"
                      [value]="language"
                      (selectionChange)="onChangeUserSetting('language', $event.value)"
                    >
                      <mat-option [value]="null"></mat-option>
                      <mat-option value="de">Deutsch</mat-option>
                      <mat-option value="en">English</mat-option>
                      <mat-option value="es"
                        >Español (<ng-container i18n>Community</ng-container
                        >)</mat-option
                      >
                      <mat-option value="fr"
                        >Français (<ng-container i18n>Community</ng-container
                        >)</mat-option
                      >
                      <mat-option value="it"
                        >Italiano (<ng-container i18n>Community</ng-container
                        >)</mat-option
                      >
                      <mat-option value="nl"
                        >Nederlands (<ng-container i18n>Community</ng-container
                        >)</mat-option
                      >
                      <!--<mat-option value="pt"
                        >Português (<ng-container i18n>Community</ng-container
                        >)</mat-option
                      >-->
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>
              <div class="align-items-center d-flex mb-2">
                <div class="pr-1 w-50">
                  <div i18n>Locale</div>
                  <div class="hint-text text-muted">
                    <ng-container i18n>Date and number format</ng-container>
                  </div>
                </div>
                <div class="pl-1 w-50">
                  <mat-form-field
                    appearance="outline"
                    class="compact-with-outline w-100 without-hint"
                  >
                    <mat-select
                      name="locale"
                      [disabled]="!hasPermissionToUpdateUserSettings"
                      [value]="user.settings.locale"
                      (selectionChange)="onChangeUserSetting('locale', $event.value)"
                    >
                      <mat-option [value]="null"></mat-option>
                      <mat-option
                        *ngFor="let locale of locales"
                        [value]="locale"
                        >{{ locale }}</mat-option
                      >
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>
              <div class="d-flex">
                <div class="align-items-center d-flex pr-1 pt-1 w-50">
                  <ng-container i18n>Appearance</ng-container>
                </div>
                <div class="pl-1 w-50">
                  <mat-form-field
                    appearance="outline"
                    class="compact-with-outline w-100 without-hint"
                  >
                    <mat-select
                      class="with-placeholder-as-option"
                      name="colorScheme"
                      [disabled]="!hasPermissionToUpdateUserSettings"
                      [placeholder]="appearancePlaceholder"
                      [value]="user?.settings?.colorScheme"
                      (selectionChange)="onChangeUserSetting('colorScheme', $event.value)"
                    >
                      <mat-option i18n [value]="null">Auto</mat-option>
                      <mat-option i18n value="LIGHT">Light</mat-option>
                      <mat-option i18n value="DARK">Dark</mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>
            </form>
          </div>
          <div class="d-flex mt-4 py-1">
            <div class="pr-1 w-50">
              <div i18n>Zen Mode</div>
              <div class="hint-text text-muted" i18n>
                Distraction-free experience for turbulent times
              </div>
            </div>
            <div class="pl-1 w-50">
              <mat-slide-toggle
                color="primary"
                [checked]="user.settings.viewMode === 'ZEN'"
                [disabled]="!hasPermissionToUpdateViewMode"
                (change)="onViewModeChange($event)"
              ></mat-slide-toggle>
            </div>
          </div>
          <div class="align-items-center d-flex mt-4 py-1">
            <div class="pr-1 w-50" i18n>Sign in with fingerprint</div>
            <div class="pl-1 w-50">
              <mat-slide-toggle
                #toggleSignInWithFingerprintEnabledElement
                color="primary"
                [disabled]="!hasPermissionToUpdateUserSettings"
                (change)="onSignInWithFingerprintChange($event)"
              ></mat-slide-toggle>
            </div>
          </div>
          <div
            *ngIf="hasPermissionToUpdateUserSettings && user?.subscription"
            class="align-items-center d-flex mt-4 py-1"
          >
            <div class="pr-1 w-50">
              <div i18n>Experimental Features</div>
              <div class="hint-text text-muted" i18n>
                Sneak peek at upcoming functionality
              </div>
            </div>
            <div class="pl-1 w-50">
              <mat-slide-toggle
                color="primary"
                [checked]="user.settings.isExperimentalFeatures"
                [disabled]="!hasPermissionToUpdateUserSettings"
                (change)="onExperimentalFeaturesChange($event)"
              ></mat-slide-toggle>
            </div>
          </div>
          <div class="align-items-center d-flex mt-4 py-1">
            <div class="pr-1 w-50" i18n>User ID</div>
            <div class="pl-1 w-50">{{ user?.id }}</div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <h3 class="mb-3 text-center" i18n>Granted Access</h3>
      <gf-access-table
        [accesses]="accesses"
        [showActions]="hasPermissionToDeleteAccess"
        (accessDeleted)="onDeleteAccess($event)"
      ></gf-access-table>
    </div>
  </div>

  <div *ngIf="hasPermissionToCreateAccess" class="fab-container">
    <a
      class="align-items-center d-flex justify-content-center"
      color="primary"
      mat-fab
      [queryParams]="{ createDialog: true }"
      [routerLink]="[]"
    >
      <ion-icon name="add-outline" size="large"></ion-icon>
    </a>
  </div>
</div>
