<div *ngIf="homologations$ | async as homologations">
<kendo-pdf-export #pdf
    paperSize="A4"
    [keepTogether]="'td'"
    [margin]="{
        top: '2cm', 
        bottom: standard.homologationForm.fields.length > 1 ? '2.5cm' : '4cm', 
        right: '2cm', 
        left: '2cm'
    }"
    [repeatHeaders]="true"
    [landscape]="standard.homologationForm.fields.length > 1"
    class="prevent-split"
>
    <ng-template kendoPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
        <div class="top-template">
            <div class="header">
                <span>FIA</span>
                <span>List n&deg;{{ standard.technicalList.number }}</span>
            </div>
        </div>
        <div class="bot-template">
            <span>
                <sup>(1)</sup> The homologation end date represents the final date on which the products may be manufactured
            </span>
            <span>
                <sup>(2)</sup> The validity of the product must always be that which is indicated on the product homologation label.
                The dates in this column are the latest possible dates that can be shown on the homologation label
            </span>
            <span *ngIf="warnings.length > 0">
                <sup>(3)</sup> Please refer to the end of this section
            </span>

            <div class="page-div">
                <span>{{ currentDate | appTechnicalDate:'dd.MM.YYYY' }}</span>
                <span>Page {{ pageNum }} / {{ totalPages }}</span>
            </div>
        </div>
    </ng-template>

    <div class="title-div">
        {{ standard.technicalList.englishTitle }}
    </div>

    <div class="center technical-div">
        TECHNICAL LIST N&deg; {{ standard.technicalList.number }}
    </div>

    <div class="center">
        <img *ngIf="headerPicture" [src]="headerPicture" class="header-picture" [style.max-height]="standard.homologationForm.fields.length > 1 ? '300px' : '400px'" />
    </div>

    <div [innerHtml]="standard.technicalList.linkUrl | appSafeHtml"></div>

    <ng-container *ngFor="let part of standard.parts; let i = index">
        <div *ngIf="part.name !== ''" class="part-infos" [class.page-break]="i > 0">
            <div class="center technical-div">
                {{ part.name }}
            </div>
            <div *ngIf="part.description !== null">
                {{ part.description }}
            </div>
        </div>

        <table class="table-contents">
            <thead>
                <th style="width: 50px;">
                    Homol. number
                </th>
                <th>
                    Brand
                </th>
                <th>
                    Model
                </th>
                <th *ngFor="let field of standard.homologationForm.fields">
                    {{ field.name }}
                </th>
                <th style="width: 35px;">
                    Start of homol.
                </th>
                <th style="width: 35px;">
                    End of homol.<sup>(1)</sup>
                </th>
                <th style="width: 55px;" *ngIf="standard.technicalList.validity">
                    Product valid until<sup>(2)</sup>
                </th>
            </thead>

            <tbody>
                <ng-container *ngFor="let homologation of getHomologationsPart(homologations, part)">
                    <tr [ngClass]="{
                            'row-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.TotalWithdraw),
                            'row-partial-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.PartialWithdraw)
                        }"
                    >
                        <td style="width: 50px;"
                            [rowSpan]="homologation.helmetRequests.length + homologation.extensionRequests.length + 1"
                        >
                            {{ homologation.homologationNumber }}
                            <sup *ngIf="homologation.withdrawType !== null">(3)</sup>
                        </td>
                        <td [rowSpan]="
                            homologation.helmetRequests.length +
                            homologation.extensionRequests.length + 1
                        ">{{ homologation.brand }}</td>
                        <td [rowSpan]="
                            homologation.helmetRequests.length +
                            homologation.extensionRequests.length + 1
                        ">
                            <span>{{ homologation.initialRequest.modelName }}</span>
                            <span *ngFor="let request of homologation.changeOfNameRequests">
                                <br />
                                {{ request.modelName }}
                            </span>
                        </td>

                        <td *ngFor="let field of standard.homologationForm.fields">
                            {{ getCustomFieldValue(homologation.customFields, field.name) }}
                        </td>

                        <td style="width: 35px;">
                            {{ homologation.startDate | appTechnicalDate }}
                        </td>

                        <td style="width: 35px;" 
                            [rowSpan]="homologation.extensionRequests.length + 1"
                        >
                            {{ homologation.endDate | appTechnicalDate }}
                        </td>

                        <td style="width: 55px;"
                            *ngIf="standard.technicalList.validity && standard.technicalList.validityDuration"
                            [rowSpan]="homologation.extensionRequests.length + 1"
                        >{{ homologation.endDate.getFullYear() + standard.technicalList.validityDuration }}</td>

                    </tr>

                    <!--tr *ngFor="let request of homologation.extensionRequests"
                        [ngClass]="{
                            'row-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.TotalWithdraw),
                            'row-partial-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.PartialWithdraw)
                        }"
                    >
                        <td *ngFor="let field of standard.homologationForm.fields">
                            {{ getCustomFieldValue(request.customFields, field.name) }}
                        </td>
                        <td style="border-right: none;">{{ request.homologationStartDate | appTechnicalDate }}</td>
                    </tr-->

                    <tr *ngFor="let request of homologation.helmetRequests"
                        [ngClass]="{
                            'row-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.TotalWithdraw),
                            'row-partial-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.PartialWithdraw)
                        }"
                    >
                        <!--td *ngIf="homologation.homologationNumber === 'PH.003.15-O'"></td>
                        <td *ngIf="homologation.homologationNumber === 'PH.003.15-O'"></td>
                        <td *ngIf="homologation.homologationNumber === 'PH.003.15-O'"></td-->
                        <td *ngFor="let field of standard.homologationForm.fields">
                            {{ getCustomFieldValue(request.customFields, field.name) }}
                        </td>
                        <td>{{ request.homologationStartDate | appTechnicalDate }}</td>
                        <td>{{ request.homologationEndDate | appTechnicalDate }}</td>
                        <td *ngIf="standard.technicalList.validity">{{ request.homologationEndDate.getFullYear() + 10 }}</td>
                    </tr>
                </ng-container>
            </tbody>
        </table>
    </ng-container>

    <div class="warning-title page-break">
        {{ standard.technicalList.englishWarning }}
    </div>

    <p *ngIf="warnings.length === 0">
        There are no warnings for this product
    </p>
    <div class="warning-div" *ngFor="let warning of warnings">
        <div [innerHtml]="warning"></div>
    </div>
</kendo-pdf-export>

.table-contents {
    text-transform: uppercase;
    border-collapse: collapse;
    font-size: 8px;
    width: 100%;
    border-spacing: 0 calc(1rem + 2px);
    padding-bottom: 2px;


    page-break-inside: avoid;


    th {
        background-color: #CCC;
        border:1px solid black;
        border-right: none;
        padding:5px;
        text-align: center;
        page-break-inside:avoid;


        &:last-child {
          border-right: 1px solid black;
        }
    }


    tr {

        page-break-inside:avoid;
        //transform: scale(1);
    }

    td {
        border:1px solid #000000;
        border-top: none;
        border-right: none;
        text-align: center;
        padding: 2px;
        page-break-inside:avoid;


        &:last-child {
            border-right: 1px solid black;
        }
    }
}

 <kendo-upload 
                    [saveUrl]="uploadUrl" 
                    [autoUpload]="false" 
                    [actionsLayout]="actionsLayout"
                    [restrictions]="imageRestrictions" 
                    (select)="select($event)"
                    (remove)="remove($event)" 
                    (clear)="clear()"
                    (upload)="uploadEventHandler($event)"
                    (complete)="complete()">
                        <ng-template kendoUploadFileInfoTemplate let-file>
                            <div><img [src]="findPreview(file)" style="height: 50px;"> Name: {{file[0].name}} </div>
                            <div *ngIf="file[0].validationErrors">You cannot upload this file :: {{file[0].validationErrors[0]}}</div>
                          </ng-template>
                    </kendo-upload>

 
publicselect(e: SelectEvent): void {
        const that = this;

        e.files.forEach((file) => {

            if (file.extension === '.jpg') {
                if (this.imageCount < this.maxImageCount) {

                    this.imageCount++

                    if (!file.validationErrors) {
                        const reader = newFileReader();

                        reader.onload = function (ev) {
                            const image = {
                                src: ev.target["result"],
                                uid: file.uid,
                            };

                            that.imagePreviews.unshift(image);
                        };
                        reader.readAsDataURL(file.rawFile);
                    }
                }else {
                     e.preventDefault();

                }
            }

        });
    }
 
             

    toast$ = createEffect(() =>
        this.actions$.pipe(
            ofType(CoreActions.Toast),
            filter(({message}) => !!message),
            tap(({message, messageType}) => {
                this.currentNotification?.hide();
                this.currentNotification = this.notificationService.show({
                    content: message,
                    hideAfter: 5000,
                    position: {horizontal: 'right', vertical: 'top'},
                    //animation: {type: 'fade', duration: 400}, //NOTE: Adding an animation unfortunately causes the toast to stack very shortly when using the 'hide()' function..
                    type: {style: messageType, icon: true},
                    closable: false //NOTE: If true the 'hideAfter' property is ignored
                });
            })
        ),
    {dispatch: false} // Because only an action is done, we should not redispatch (that would cause an infinite dispatch loop of toasts)
    );