<mat-list
  *ngIf="dataMap"
  [style.width]="width"
  [style.min-width]="minWidth"
  class="nm-simple-item-list"
>
  <div *ngFor="let field of dataMap | keyvalue: keepOrder">
    <mat-list-item
      *ngIf="field.value ? !field.value.hideListItem : true"
      class="nm-simple-item {{ listItemClasses }}"
      [ngClass]="field.value.listItemClasses"
      [class.--enableLabelMargin]="editValue && field.value.type === 'EDIT'"
    >
      <nm-ellipsis
        *ngIf="field.value ? !field.value.hideLabel : true"
        [content]="field.key | translate"
        (click)="enableKeyClick ? onKeyClick(field.value) : ''"
        class="nm-simple-item__label"
        [class.--enableLink]="enableKeyClick"
      >
      </nm-ellipsis>
      <ng-container *ngIf="field.value">
        <div
          [ngSwitch]="field.value.type"
          class="nm-simple-item__value {{ valueClasses }}"
          [ngClass]="field.value.valueClasses"
        >
          <div *ngSwitchCase="'STATE'">
            <nm-trafficlight [status]="field.value.data"></nm-trafficlight>
          </div>
          <nm-ellipsis
            *ngSwitchCase="'DATE'"
            [content]="field.value.data | datepipe: 'standardDate'"
          ></nm-ellipsis>
          <nm-ellipsis
            *ngSwitchCase="'TIME'"
            [content]="field.value.data | datepipe: 'mediumDateTime'"
          ></nm-ellipsis>
          <nm-ellipsis
            *ngSwitchCase="'NUMBER'"
            [content]="field.value.data | number: numberFormat:selectedUiLocale"
          ></nm-ellipsis>
          <nm-ellipsis
            *ngSwitchCase="'TRANSLATE'"
            [content]="field.value.data | translate"
          ></nm-ellipsis>
          <div *ngSwitchCase="'LINK'">
            <ng-container
              *ngTemplateOutlet="links; context: { link: field.value.data }"
            ></ng-container>
          </div>
          <div *ngSwitchCase="'HALACTION'" class="nm-simple-item__actions">
            <ng-container
              *ngTemplateOutlet="
                halActions;
                context: { actions: field.value.data }
              "
            ></ng-container>
          </div>
          <div *ngSwitchCase="'ACTION_AND_LINK'">
            <div
              *ngFor="let actionLinkData of field.value.data"
              class="nm-simple-item__action-and-link"
            >
              <ng-container
                *ngTemplateOutlet="
                  links;
                  context: { link: actionLinkData.link }
                "
              ></ng-container>
              <ng-container
                *ngTemplateOutlet="
                  halActions;
                  context: { actions: actionLinkData.halAction }
                "
              ></ng-container>
            </div>
          </div>
          <div *ngSwitchCase="'TOGGLER'">
            <div class="nm-simple-item__button">
              <mat-slide-toggle
                [disabled]="field.value.data.disabled"
                [(ngModel)]="field.value.data.state"
                (change)="togglerClicked.emit(field.value.data.state)"
              ></mat-slide-toggle>
            </div>
          </div>
          <div *ngSwitchCase="'EXPAND_BUTTON'">
            <div>
              <button
                class="__button"
                mat-button
                type="button"
                (click)="expandItems()"
              >
                <span>{{
                  (isExpanded
                    ? field.value.data.showLessText
                    : field.value.data.showMoreText
                  ) | translate
                }}</span>
              </button>
            </div>
          </div>
          <div *ngSwitchCase="'BUTTON'">
            <div class="nm-simple-item__buttonWrapper">
              <nm-button
                buttonClass ="__button"
                [disabled]="field.value.data.disabled"
                (fireEvent)="buttonClicked.emit(field.value.data)"
                [buttonType]=" field.value.data.type"
                [icon]="field.value.data.icon"
                [buttonColor]="
                  field.value.data.buttonColor
                "
                [placeholder]="field.value.data.description | translate"
              >
              </nm-button>
            </div>
          </div>
          <div *ngSwitchCase="'CURRENCY'">
            <div *ngIf="field.value.data">
              <nm-ellipsis
                [content]="
                  (field.value.data.amount | number: '1.2-2':selectedUiLocale) +
                  ' ' +
                  field.value.data.currency
                "
              ></nm-ellipsis>
            </div>
          </div>
          <div *ngSwitchCase="'DESCRIPTION'" class="--description">
            <div *ngIf="field.value.data">
              {{ field.value.data }}
            </div>
          </div>
          <div #editedElement *ngSwitchCase="'EDIT'">
            <ng-container *ngIf="editValue; else originalValue">
              <div class="--editableField">
                <mat-form-field floatLabel="never">
                  <input
                    #editInput
                    [(ngModel)]="editedValue"
                    (keydown.enter)="saveEditedValue()"
                    maxlength="{{ field.value.data.maxLength }}"
                    autofocus
                    matInput
                  />
                  <mat-hint class="__hint">
                    {{
                      field.value.data.hint
                        ? (field.value.data.hint | translate)
                        : ""
                    }}
                  </mat-hint>
                </mat-form-field>
                <div>
                  <button
                    mat-icon-button
                    primary
                    matSuffix
                    (click)="saveEditedValue()"
                    class="__button"
                    [disabled]="disableSave()"
                  >
                    <mat-icon>done</mat-icon>
                  </button>
                  <button
                    mat-icon-button
                    primary
                    matSuffix
                    class="__button"
                    (click)="clearEditedValue()"
                  >
                    <mat-icon>clear</mat-icon>
                  </button>
                </div>
              </div>
            </ng-container>

            <ng-template #originalValue>
              <span>{{
                field.value.data.value
                  ? field.value.data.value
                  : (field.value.data.label | translate)
              }}</span>
              <button
                mat-icon-button
                primary
                matSuffix
                (click)="onEditClick(field.value.data.value)"
              >
                <mat-icon>edit</mat-icon>
              </button>
            </ng-template>
          </div>

          <div *ngSwitchCase="'CHIPLIST'">
            <nm-chiplist
              *ngIf="field.value.data"
              [configuration]="field.value.data.chipConfiguration"
              [chipsData]="field.value.data.source"
              (onChipClick)="chipClicked.emit($event)"
              [selectable]="field.value.data.selectable"
            >
            </nm-chiplist>
          </div>

          <nm-ellipsis
            *ngSwitchDefault
            [content]="field.value.data"
          ></nm-ellipsis>
        </div>
      </ng-container>
    </mat-list-item>
  </div>
</mat-list>

<ng-template #halActions let-actions="actions">
  <span class="__icon {{ act.key }}" *ngFor="let act of actions">
    <ng-container *ngIf="act.data.hidden !== true">
      <nm-action-icon
        [action]="act.data"
        [name]="act.key"
        [disabled]="act.data.disabled ? act.data.disabled : false"
      >
      </nm-action-icon>
    </ng-container>
  </span>
</ng-template>

<ng-template #links let-link="link">
  <div
    *ngFor="let linkData of link; let i = index"
    class="nm-simple-item__linkList"
  >
    <a
      (click)="openURL(linkData, $event)"
      [matTooltip]="linkData.tooltip"
      tabindex="-1"
      [href]="linkService.getLink(linkData, baseRedirectionPage)"
    >
      <span>{{
        linkData.value ? (linkData.value | translate) : linkData.link
      }}</span>
    </a>
    <span *ngIf="i < link.length - 1">,</span>
  </div>
</ng-template>