<div class="admin-container" [class.admin-is-mobile]="appService.getViewMode()">
<mat-sidenav-container autosize class="admin-sidenav-container">
<mat-sidenav #snav [mode]="appService.getViewMode() ? 'over' : 'side'"
[fixedInViewport]="appService.getViewMode()" fixedTopGap="56"
[opened]="appService.getViewMode() ? false : true">
<menu-shortcut></menu-shortcut>
<menu-nav></menu-nav>
</mat-sidenav>
<mat-sidenav-content>
<div *ngIf="loading" style="display:flex;height:100%;">
<mat-spinner style="margin:auto;"></mat-spinner>
</div>
<mat-card *ngIf="!loading" class="card-app-content">
<mat-tab-group>
<mat-tab [label]="lang.usableFields">
<div class="alert-message alert-message-info" role="alert" *ngIf="customFields.length === 0"
[innerHTML]="lang.noCustomFieldInfo">
</div>
<mat-accordion>
<mat-expansion-panel *ngFor="let custom of customFields;index as indexCustom">
<mat-expansion-panel-header>
<mat-panel-title color="primary">
{{custom.label}}
</mat-panel-title>
<mat-panel-description>
{{lang[custom.type + 'Input']}}
</mat-panel-description>
</mat-expansion-panel-header>
<div class="col-md-12">
<mat-form-field>
<input matInput name="id" [(ngModel)]="custom.id" disabled
[placeholder]="lang.technicalId" [value]="custom.id">
</mat-form-field>
<mat-form-field>
<input matInput name="label" [(ngModel)]="custom.label"
[placeholder]="lang.label" [value]="custom.label">
</mat-form-field>
</div>
<div class="col-md-12"
*ngIf="['select', 'radio', 'checkbox'].indexOf(custom.type) > -1">
<mat-expansion-panel class="customFieldValues" opened>
<mat-expansion-panel-header>
<mat-panel-title [matBadge]="custom.values.length" matBadgeSize="small">
{{lang.valuesList}}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="actionValuesCustom">
<div style="flex: 1;">
<button mat-raised-button color="primary"
(click)="addValue(indexCustom)">
{{lang.addValue}}</button>
</div>
<div>
<button mat-mini-fab color="default" *ngIf="custom.values.length > 0"
(click)="sortValues(custom)" [title]="lang.orderValues">
<mat-icon color="primary" class="fas fa-sort-alpha-down"
style="height:auto;"></mat-icon>
</button>
</div>
</div>
<div class="col-md-12">
<mat-form-field *ngFor="let value of custom.values;let i=index;"
floatLabel="never">
<input matInput [(ngModel)]="value.label"
[placeholder]="this.lang.newValue">
<button color="warn" mat-icon-button matSuffix [title]="lang.delete"
(click)="removeValue(custom, i)">
<mat-icon class="fa fa-trash"></mat-icon>
</button>
</mat-form-field>
</div>
</mat-expansion-panel>
</div>
<div class="col-md-12 text-center">
<button mat-raised-button color="primary"
(click)="updateCustomField(custom,indexCustom)"
[disabled]="isModified(custom,indexCustom)">{{lang.update}}</button>
<button mat-raised-button color="warn"
(click)="removeCustomField(indexCustom)">{{lang.delete}}</button>
</div>
</mat-expansion-panel>
</mat-accordion>
</mat-tab>
</mat-tab-group>
</mat-card>
</mat-sidenav-content>
<mat-sidenav #snav2 [mode]="appService.getViewMode() ? 'over' : 'side'"
[fixedInViewport]="appService.getViewMode()" fixedTopGap="56" position='end' opened
class="col-md-4 col-sm-12 customFielsdPanel">
<mat-tab-group>
<mat-tab [label]="lang.customFieldsTypesAvailable">
<div class="customFieldsTypesItem" *ngFor="let customField of customFieldsTypes">
<div class="addCustomFieldTypeContainer">
<button mat-icon-button color="primary" (click)="addCustomField(customField)"
[title]="lang.add">
<mat-icon class="fas fa-plus-circle fa-2x"></mat-icon>
</button>
</div>
<div style="flex:1;">
<div style="color: rgba(0,0,0,0.54);">{{customField.label}} :</div>
<ng-container *ngIf="customField.type === 'string'">
<mat-form-field class="input-form" floatLabel="never">
<textarea matInput [placeholder]="lang[customField.type + 'Input']"
matTextareaAutosize matAutosizeMinRows="1" cdkAutosizeMaxRows="6" disabled></textarea>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'integer'">
<mat-form-field class="input-form" floatLabel="never">
<input type="number" matInput [placeholder]="lang[customField.type + 'Input']" disabled>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'select'">
<mat-form-field class="input-form" floatLabel="never">
<mat-select [placeholder]="lang[customField.type + 'Input']" disabled>
<mat-option *ngFor="let sample of sampleIncrement" [value]="sample">
{{lang.choice}} {{sample}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'date'">
<mat-form-field class="input-form" floatLabel="never">
<input matInput [matDatepicker]="picker"
[placeholder]="lang[customField.type + 'Input']" (click)="picker.open()" disabled>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'radio'">
<mat-radio-group class="radio-form" color="primary" disabled>
<mat-radio-button *ngFor="let sample of sampleIncrement" [value]="sample">
{{lang.choice}} {{sample}}
</mat-radio-button>
</mat-radio-group>
</ng-container>
<ng-container *ngIf="customField.type === 'checkbox'">
<div class="input-form checkbox-form">
<mat-selection-list #sampleList class="div-list" disabled>
<mat-list-option *ngFor="let sample of sampleIncrement" [value]="sample"
checkboxPosition="before">
{{lang.choice}} {{sample}}
</mat-list-option>
</mat-selection-list>
</div>
<mat-chip-list class="checkbox-selected-list">
<mat-chip *ngFor="let chip of sampleList.selectedOptions.selected">
{{lang.selectedValue}}
</mat-chip>
</mat-chip-list>
</ng-container>
</div>
</div>
</mat-tab>
</mat-tab-group>
</mat-sidenav>
</mat-sidenav-container>
</div>