<ng-container *ngFor="let column of columnDefinitions">
    <kendo-grid-column
      *ngIf="column.isReadOnly"
      field="{{ column.systemName }}"
      title="{{ column.displayName }}"
      format="{{ column.format }}"
      [filter]="column.type"
      [width]="column.width"
      [hidden]="column.isHidden"
    >
      <ng-template
        kendoGridFilterCellTemplate
        let-filter
        *ngIf="column.hasFilterList"
      >
        <app-multi-select-filter-component
          [data]="getColumnFilterListValues(column.systemName)"
          [filter]="filter"
          [columnName]="column.systemName"
        ></app-multi-select-filter-component>
      </ng-template>
    </kendo-grid-column>

<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;
        }
    }
}