<vdr-page-block>
    <vdr-action-bar>
        <vdr-ab-left>
            <div class="flex clr-align-items-center">
                <vdr-language-selector
                    [disabled]="isNew$ | async"
                    [availableLanguageCodes]="availableLanguages$ | async"
                    [currentLanguageCode]="languageCode$ | async"
                    (languageCodeChange)="setLanguage($event)"
                ></vdr-language-selector>
            </div>
        </vdr-ab-left>

        <vdr-ab-right>
            <vdr-action-bar-items locationId="promotion-detail" />
            <button
                class="btn btn-primary"
                *ngIf="isNew$ | async; else updateButton"
                (click)="create()"
                [disabled]="!saveButtonEnabled()"
            >
                {{ 'common.create' | translate }}
            </button>
            <ng-template #updateButton>
                <button
                    class="btn btn-primary"
                    (click)="save()"
                    *vdrIfPermissions="'UpdatePromotion'"
                    [disabled]="!saveButtonEnabled()"
                >
                    {{ 'common.update' | translate }}
                </button>
            </ng-template>
            <vdr-action-bar-dropdown-menu locationId="promotion-detail" />
        </vdr-ab-right>
    </vdr-action-bar>
</vdr-page-block>

<form class="form" [formGroup]="detailForm">
    <vdr-page-detail-layout>
        <vdr-page-detail-sidebar>
            <vdr-card *vdrIfPermissions="'UpdatePromotion'">
                <clr-toggle-wrapper>
                    <input type="checkbox" clrToggle name="enabled" formControlName="enabled" />
                    <label>{{ 'common.enabled' | translate }}</label>
                </clr-toggle-wrapper>
            </vdr-card>
            <vdr-card *ngIf="entity$ | async as entity">
                <vdr-page-entity-info [entity]="entity" />
            </vdr-card>
        </vdr-page-detail-sidebar>
        <vdr-page-block>
            <vdr-card>
                <div class="form-grid">
                    <vdr-form-field [label]="'common.name' | translate" for="name">
                        <input
                            id="name"
                            [readonly]="!('UpdatePromotion' | hasPermission)"
                            type="text"
                            formControlName="name"
                        />
                    </vdr-form-field>
                    <vdr-rich-text-editor
                        class="form-grid-span"
                        formControlName="description"
                        [readonly]="!('UpdatePromotion' | hasPermission)"
                        [label]="'common.description' | translate"
                    ></vdr-rich-text-editor>
                    <vdr-form-field [label]="'marketing.starts-at' | translate" for="startsAt">
                        <vdr-datetime-picker formControlName="startsAt"></vdr-datetime-picker>
                    </vdr-form-field>
                    <vdr-form-field [label]="'marketing.ends-at' | translate" for="endsAt">
                        <vdr-datetime-picker formControlName="endsAt"></vdr-datetime-picker>
                    </vdr-form-field>
                    <vdr-form-field [label]="'marketing.coupon-code' | translate" for="couponCode">
                        <input
                            id="couponCode"
                            [readonly]="!('UpdatePromotion' | hasPermission)"
                            type="text"
                            formControlName="couponCode"
                        />
                    </vdr-form-field>
                    <vdr-form-field
                        [label]="'marketing.per-customer-limit' | translate"
                        [tooltip]="'marketing.per-customer-limit-tooltip' | translate"
                        for="perCustomerUsageLimit"
                    >
                        <input
                            id="perCustomerUsageLimit"
                            [readonly]="!('UpdatePromotion' | hasPermission)"
                            type="number"
                            min="1"
                            max="999"
                            formControlName="perCustomerUsageLimit"
                        />
                    </vdr-form-field>
                    <vdr-form-field
                        [label]="'marketing.usage-limit' | translate"
                        [tooltip]="'marketing.usage-limit-tooltip' | translate"
                        for="usageLimit"
                    >
                        <input
                            id="usageLimit"
                            [readonly]="!('UpdatePromotion' | hasPermission)"
                            type="number"
                            min="1"
                            max="9999999"
                            formControlName="usageLimit"
                        />
                    </vdr-form-field>
                </div>
            </vdr-card>
            <vdr-card
                [title]="'common.custom-fields' | translate"
                formGroupName="customFields"
                *ngIf="customFields.length"
            >
                <vdr-tabbed-custom-fields
                    entityName="Promotion"
                    [customFields]="customFields"
                    [customFieldsFormGroup]="detailForm.get('customFields')"
                    [readonly]="!('UpdatePromotion' | hasPermission)"
                ></vdr-tabbed-custom-fields>
            </vdr-card>

            <vdr-custom-detail-component-host
                locationId="promotion-detail"
                [entity$]="entity$"
                [detailForm]="detailForm"
            ></vdr-custom-detail-component-host>

            <vdr-card [title]="'marketing.conditions' | translate" formArrayName="conditions">
                <div *ngFor="let condition of conditions; index as i">
                    <vdr-configurable-input
                        (remove)="removeCondition($event)"
                        [position]="i"
                        [readonly]="!('UpdatePromotion' | hasPermission)"
                        [operation]="condition"
                        [operationDefinition]="getConditionDefinition(condition)"
                        [formControlName]="i"
                    ></vdr-configurable-input>
                </div>
                <div>
                    <vdr-dropdown *vdrIfPermissions="'UpdatePromotion'">
                        <button class="btn btn-outline" vdrDropdownTrigger>
                            <clr-icon shape="plus"></clr-icon>
                            {{ 'marketing.add-condition' | translate }}
                        </button>
                        <vdr-dropdown-menu vdrPosition="bottom-left">
                            <button
                                *ngFor="let condition of getAvailableConditions()"
                                type="button"
                                vdrDropdownItem
                                class="item-wrap"
                                (click)="addCondition(condition)"
                            >
                                {{ condition.description }}
                            </button>
                        </vdr-dropdown-menu>
                    </vdr-dropdown>
                </div>
            </vdr-card>
            <vdr-card [title]="'marketing.actions' | translate" formArrayName="actions">
                <div *ngFor="let action of actions; index as i">
                    <vdr-configurable-input
                        (remove)="removeAction($event)"
                        [position]="i"
                        [operation]="action"
                        [readonly]="!('UpdatePromotion' | hasPermission)"
                        [operationDefinition]="getActionDefinition(action)"
                        [formControlName]="i"
                    ></vdr-configurable-input>
                </div>
                <div>
                    <vdr-dropdown *vdrIfPermissions="'UpdatePromotion'">
                        <button class="btn btn-outline" vdrDropdownTrigger>
                            <clr-icon shape="plus"></clr-icon>
                            {{ 'marketing.add-action' | translate }}
                        </button>
                        <vdr-dropdown-menu vdrPosition="bottom-left">
                            <button
                                *ngFor="let action of getAvailableActions()"
                                type="button"
                                vdrDropdownItem
                                class="item-wrap"
                                (click)="addAction(action)"
                            >
                                {{ action.description }}
                            </button>
                        </vdr-dropdown-menu>
                    </vdr-dropdown>
                </div>
            </vdr-card>
        </vdr-page-block>
    </vdr-page-detail-layout>
</form>
