<div class="ConfigContainer">
  <mat-card class="profile setting-card">
    <mat-card-header>
      <mat-card-title>
        <button mat-icon-button class="mat-button-withoutcaption" (click)="goHome()">
          <mat-icon class="icons">arrow_back_ios</mat-icon>
        </button>
        {{'core.caption.myaccount' | translate}}
      </mat-card-title>

      <button class="logout url" mat-raised-button (click)="logout()">
        <mat-icon class="logout-icon">logout</mat-icon>{{'core.caption.logout' | translate}}
      </button>

    </mat-card-header>
    <mat-card-content class="profile-content">
      <hensel-input
        class="user-name"
        placeholder="{{'core.caption.name' | translate}}"
        [ngModel]=user.name
        disabled="true">
      </hensel-input>

      <hensel-input
        class="user-loginname"
        placeholder="{{'core.caption.userloginname' | translate}}"
        [ngModel]=user.loginName
        disabled="true">
      </hensel-input>

      <hensel-selection *ngIf="usedLanguages.length > 1"
        class="language"
        [dataSource]=usedLanguages
        placeholder="{{'core.caption.language' | translate}}"
        keyExpr="langCode"
        displayExpr="languageName"
        sortField="*"
        [multiSelect]=false
        [canClear]=false
        [selectedItems]="this.localeService.currentLanguage"
        (selectedItemsChange)="setLangauge($event)"
        requered>
      </hensel-selection>

      <div *ngIf="usedCultures.length > 1" class="culture_section">
        <hensel-selection
          class="culture"
          [dataSource]=usedCultures
          placeholder="{{'core.caption.regionformat' | translate}}"
          keyExpr="culture"
          displayExpr="country"
          sortField="*"
          [multiSelect]=false
          [canClear]=false
          [selectedItems]="this.localeService.currentCulture"
          (selectedItemsChange)="setLocale($event)"
          requered>
        </hensel-selection>
        <div class="sample-date-capt">{{'core.caption.date' | translate}}:</div>
        <div class="sample-date">{{today | date:'shortDate'}}</div>
        <div class="sample-weight-capt">{{'core.account.caption.weight' | translate}}:</div>
        <div class="sample-weight">{{0.74 | number:'1.3-3'}} kg</div>
        <div class="sample-price-capt">{{'core.account.caption.price' | translate}}:</div>
        <div class="sample-price">{{44357.00 | currency:currencySymbol:"symbol":"1.2-2"}}</div>
      </div>
      <span class="profile-custom"><ng-content select="[profile-settings]"></ng-content></span>
    </mat-card-content>
  </mat-card>
  <span class="other-settings"><ng-content select="[other-settings]"></ng-content></span>
  <mat-card *ngIf="user.isAdmin" class="admin-settings setting-card">
    <mat-card-header>
      <mat-card-title>{{'core.caption.addsettings' | translate}}</mat-card-title>
    </mat-card-header>
    <mat-card-content class="admin-content">
      <div class="admin-std">
        <div class="abstand">
          <mat-checkbox name="cbFooter" [(ngModel)]="serverInfoService.serverInfoVisible">{{'core.caption.showstatusbar' | translate}}</mat-checkbox>
        </div>
        <div>
          <mat-checkbox name="cbId" [(ngModel)]="globals.showIds">{{'core.caption.showids' | translate}}</mat-checkbox>
        </div>
      </div>
      <span class="admin-custom"><ng-content select="[admin-settings]"></ng-content></span>
    </mat-card-content>
  </mat-card>
</div>
