<mat-list>
  <mat-list-item>
    <span matListItemIcon>
      <mat-icon class="primaryColor">notification_important</mat-icon>
    </span>
    <span matListItemTitle>
      {{'account.common.tabs.settings.notifications-title' | translate}}
    </span>
    <span matListItemLine>
      {{'account.common.tabs.settings.notifications-line' | translate}}
    </span>
    <mat-slide-toggle matListItemMeta color="accent" [formControl]="notificationsToggle"></mat-slide-toggle>

  </mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item>
    <span matListItemIcon>
      <mat-icon class="primaryColor">security</mat-icon>
    </span>
    <span matListItemTitle>
      {{'account.common.tabs.settings.change-password-title' | translate}}
    </span>
    <div matListItemLine>
      {{'account.common.tabs.settings.change-password-line' | translate}}
    </div>
    <span matListItemMeta>
      <button mat-raised-button color="accent" (click)="changePassword()">
        {{'account.common.tabs.settings.change-password-button' | translate}}
      </button>
    </span>
  </mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item>
    <span matListItemIcon>
      <mat-icon class="warnColor">delete_forever</mat-icon>
    </span>
    <span matListItemTitle>
      {{'account.common.tabs.settings.delete-title' | translate}}
    </span>

    <span matListItemMeta>
      <button mat-raised-button color="warn" (click)="deleteAccount()">
        {{'account.common.tabs.settings.delete-button' | translate}}
      </button>
    </span>
  </mat-list-item>
</mat-list>
