<h4>{{ 'customer.customer-history' | translate }}</h4>
<div class="entry-list">
    <vdr-timeline-entry iconShape="note" displayType="muted" *vdrIfPermissions="'UpdateCustomer'">
        <div class="note-entry">
            <textarea [(ngModel)]="note" name="note" class="note"></textarea>
            <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToCustomer()">
                {{ 'order.add-note' | translate }}
            </button>
        </div>
    </vdr-timeline-entry>
    <vdr-timeline-entry
        *ngFor="let entry of history"
        [displayType]="getDisplayType(entry)"
        [iconShape]="getTimelineIcon(entry)"
        [createdAt]="entry.createdAt"
        [name]="getName(entry)"
        [featured]="isFeatured(entry)"
    >
        <ng-container [ngSwitch]="entry.type">
            <ng-container *ngSwitchCase="type.CUSTOMER_REGISTERED">
                <div class="title">
                    {{ 'customer.history-customer-registered' | translate }}
                </div>
                <ng-container *ngIf="entry.data.strategy === 'native'; else namedStrategy">
                    {{ 'customer.history-using-native-auth-strategy' | translate }}
                </ng-container>
                <ng-template #namedStrategy>
                    {{
                    'customer.history-using-external-auth-strategy'
                        | translate: { strategy: entry.data.strategy }
                    }}
                </ng-template>
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_VERIFIED">
                <div class="title">
                    {{ 'customer.history-customer-verified' | translate }}
                </div>
                <ng-container *ngIf="entry.data.strategy === 'native'; else namedStrategy">
                    {{ 'customer.history-using-native-auth-strategy' | translate }}
                </ng-container>
                <ng-template #namedStrategy>
                    {{
                        'customer.history-using-external-auth-strategy'
                            | translate: { strategy: entry.data.strategy }
                    }}
                </ng-template>
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_DETAIL_UPDATED">
                <div class="flex">
                    {{ 'customer.history-customer-detail-updated' | translate }}
                    <vdr-history-entry-detail>
                        <vdr-object-tree [value]="entry.data.input"></vdr-object-tree>
                    </vdr-history-entry-detail>
                </div>
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_ADDED_TO_GROUP">
                {{
                    'customer.history-customer-added-to-group'
                        | translate: { groupName: entry.data.groupName }
                }}
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_REMOVED_FROM_GROUP">
                {{
                    'customer.history-customer-removed-from-group'
                        | translate: { groupName: entry.data.groupName }
                }}
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_ADDRESS_CREATED">
                {{ 'customer.history-customer-address-created' | translate }}
                <div class="flex">
                    <div class="address-string">{{ entry.data.address }}</div>
                </div>
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_ADDRESS_UPDATED">
                {{ 'customer.history-customer-address-updated' | translate }}
                <div class="flex">
                    <div class="address-string">{{ entry.data.address }}</div>
                    <vdr-history-entry-detail>
                        <vdr-object-tree [value]="entry.data.input"></vdr-object-tree>
                    </vdr-history-entry-detail>
                </div>
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_ADDRESS_DELETED">
                {{ 'customer.history-customer-address-deleted' | translate }}
                <div class="address-string">{{ entry.data.address }}</div>
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_PASSWORD_UPDATED">
                {{ 'customer.history-customer-password-updated' | translate }}
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_PASSWORD_RESET_REQUESTED">
                {{ 'customer.history-customer-password-reset-requested' | translate }}
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_PASSWORD_RESET_VERIFIED">
                {{ 'customer.history-customer-password-reset-verified' | translate }}
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_EMAIL_UPDATE_REQUESTED">
                <div class="flex">
                    {{ 'customer.history-customer-email-update-requested' | translate }}
                    <vdr-history-entry-detail>
                        <vdr-labeled-data [label]="'customer.old-email-address' | translate">{{
                            entry.data.oldEmailAddress
                        }}</vdr-labeled-data>
                        <vdr-labeled-data [label]="'customer.new-email-address' | translate">{{
                            entry.data.newEmailAddress
                        }}</vdr-labeled-data>
                    </vdr-history-entry-detail>
                </div>
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_EMAIL_UPDATE_VERIFIED">
                <div class="flex">
                    {{ 'customer.history-customer-email-update-verified' | translate }}
                    <vdr-history-entry-detail>
                        <vdr-labeled-data [label]="'customer.old-email-address' | translate">{{
                            entry.data.oldEmailAddress
                        }}</vdr-labeled-data>
                        <vdr-labeled-data [label]="'customer.new-email-address' | translate">{{
                            entry.data.newEmailAddress
                        }}</vdr-labeled-data>
                    </vdr-history-entry-detail>
                </div>
            </ng-container>
            <ng-container *ngSwitchCase="type.CUSTOMER_NOTE">
                <div class="flex">
                    <div class="note-text">
                        {{ entry.data.note }}
                    </div>
                    <div class="flex-spacer"></div>
                    <vdr-dropdown>
                        <button class="icon-button" vdrDropdownTrigger>
                            <clr-icon shape="ellipsis-vertical"></clr-icon>
                        </button>
                        <vdr-dropdown-menu vdrPosition="bottom-right">
                            <button
                                class="button"
                                vdrDropdownItem
                                (click)="updateNote.emit(entry)"
                                [disabled]="!('UpdateCustomer' | hasPermission)"
                            >
                                <clr-icon shape="edit"></clr-icon>
                                {{ 'common.edit' | translate }}
                            </button>
                            <div class="dropdown-divider"></div>
                            <button
                                class="button"
                                vdrDropdownItem
                                (click)="deleteNote.emit(entry)"
                                [disabled]="!('UpdateCustomer' | hasPermission)"
                            >
                                <clr-icon shape="trash" class="is-danger"></clr-icon>
                                {{ 'common.delete' | translate }}
                            </button>
                        </vdr-dropdown-menu>
                    </vdr-dropdown>
                </div>
            </ng-container>
        </ng-container>
    </vdr-timeline-entry>
    <vdr-timeline-entry [isLast]="true"></vdr-timeline-entry>
</div>
