<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'core.dataprivacy.pluginname' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshContent($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>
    <core-loading [hideUntil]="loaded">
        <ion-item-divider class="ion-text-wrap">
            <ion-label>
                <h2 class="big">{{ 'core.dataprivacy.datarequests' | translate }}</h2>
            </ion-label>
        </ion-item-divider>
        <ion-list *ngIf="requests.length && !isTablet">
            <ion-card *ngFor=" let request of requests">
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <p class="item-heading">
                            <ng-container *ngTemplateOutlet="type; context: {request: request}" />
                        </p>
                        <ion-row class="ion-justify-content-between ion-no-padding">
                            <ion-col class="ion-no-padding">
                                <p>{{request.timecreated * 1000 | coreFormatDate }}</p>
                            </ion-col>
                            <ion-col class="core-flex-no-grow ion-text-end  ion-no-padding">
                                <ng-container *ngTemplateOutlet="statusBadge; context: {request: request}" />
                            </ion-col>
                        </ion-row>
                    </ion-label>
                </ion-item>
                <ion-item *ngIf="request.requestedbyuser" class="ion-text-wrap">
                    <ion-label>
                        <p class="item-heading">{{ 'core.dataprivacy.requestby' | translate }}</p>
                        <p>{{ request.requestedbyuser.fullname }}</p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" [lines]="request.canCancel || request.downloadlink ? 'full' : 'none'">
                    <ion-label>
                        <p class="item-heading">{{ 'core.dataprivacy.message' | translate }}</p>
                        <p><core-format-text [text]="request.messagehtml" /></p>
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap ion-text-end" *ngIf="request.canCancel || request.downloadlink">
                    <ion-label>
                        <ion-button fill="outline" expand="block" (click)="cancelRequest(request.id)" *ngIf="request.canCancel">
                            {{ 'core.dataprivacy.cancelrequest' | translate }}
                        </ion-button>
                        <ion-button fill="outline" expand="block" *ngIf="request.downloadlink" [href]="request.downloadlink" core-link
                            [showBrowserWarning]="false">
                            {{ 'core.dataprivacy.download' | translate }}
                        </ion-button>
                    </ion-label>
                </ion-item>
            </ion-card>
        </ion-list>

        <table *ngIf="requests.length && isTablet" class="core-table">
            <thead>
                <tr>
                    <th>{{ 'core.dataprivacy.requesttype' | translate }}</th>
                    <th>{{ 'core.dataprivacy.daterequested' | translate }}</th>
                    <th class="shrink">{{ 'core.dataprivacy.requestby' | translate }}</th>
                    <th class="shrink">{{ 'core.dataprivacy.requeststatus' | translate }}</th>
                    <th>{{ 'core.dataprivacy.message' | translate }}</th>
                    <th class=" shrink">{{ 'core.dataprivacy.requestactions' | translate }}</th>
                </tr>
            </thead>
            <tbody class="auto-striped">
                <tr *ngFor=" let request of requests">
                    <td>
                        <p><ng-container *ngTemplateOutlet="type; context: {request: request}" /></p>
                    </td>
                    <td>
                        <p>{{request.timecreated * 1000 | coreFormatDate }}</p>
                    </td>
                    <td>
                        <p>{{ request.requestedbyuser.fullname }}</p>
                    </td>
                    <td>
                        <ng-container *ngTemplateOutlet="statusBadge; context: {request: request}" />
                    </td>
                    <td>
                        <p><core-format-text [text]="request.messagehtml" /></p>
                    </td>
                    <td>
                        <ion-button fill="outline" size="small" (click)="cancelRequest(request.id)" *ngIf="request.canCancel">
                            {{ 'core.dataprivacy.cancelrequest' | translate }}
                        </ion-button>
                        <ion-button fill="outline" size="small" *ngIf="request.downloadlink" [href]="request.downloadlink" core-link
                            [showBrowserWarning]="false">
                            {{ 'core.dataprivacy.download' | translate }}
                        </ion-button>
                    </td>
                </tr>
            </tbody>
        </table>

        <core-empty-box *ngIf="!requests.length" icon="fas-bell-concierge"
            [message]="'core.dataprivacy.nopersonaldatarequests' | translate" />

        <div collapsible-footer *ngIf="loaded" slot="fixed">
            <div class="list-item-limited-width adaptable-buttons-row">
                <ion-button class="ion-margin ion-text-wrap" expand="block" (click)="contactDPO()" *ngIf="accessInfo?.cancontactdpo"
                    fill="outline">
                    <ion-icon slot="start" name="fas-envelope" [attr.aria-hidden]="true" />
                    {{ 'core.dataprivacy.contactdataprotectionofficer' | translate }}
                </ion-button>
                <ion-button class="ion-margin ion-text-wrap" expand="block" (click)="newRequest()"
                    *ngIf="accessInfo?.cancreatedatadownloadrequest || accessInfo?.cancreatedatadeletionrequest">
                    <ion-icon slot="start" name="fas-pen-to-square" [attr.aria-hidden]="true" />
                    {{ 'core.dataprivacy.newrequest' | translate }}
                </ion-button>
            </div>
        </div>

    </core-loading>
</ion-content>

<ng-template #statusBadge let-request="request">
    @switch (request.status) {
        @case (0) {
            <ion-badge color="info">{{'core.dataprivacy.statuspending' | translate }}</ion-badge>
        } @case (1) {
            <ion-badge color="info">{{'core.dataprivacy.statuspreprocessing' | translate }}</ion-badge>
        } @case (2) {
            <ion-badge color="info">{{'core.dataprivacy.statusawaitingapproval' | translate }}</ion-badge>
        } @case (3) {
            <ion-badge color="info">{{'core.dataprivacy.statusapproved' | translate }}</ion-badge>
        } @case (4) {
            <ion-badge color="info">{{'core.dataprivacy.statusprocessing' | translate }}</ion-badge>
        } @case (5) {
            <ion-badge color="success">{{'core.dataprivacy.statuscomplete' | translate }}</ion-badge>
        } @case (6) {
            <ion-badge color="warning">{{'core.dataprivacy.statuscancelled' | translate }}</ion-badge>
        } @case (7) {
            <ion-badge color="danger">{{'core.dataprivacy.statusrejected' | translate }}</ion-badge>
        } @case (8) {
            <ion-badge color="success">{{'core.dataprivacy.statusready' | translate }}</ion-badge>
        } @case (9) {
            <ion-badge color="secondary">{{'core.dataprivacy.statusexpired' | translate }}</ion-badge>
        } @case (10) {
            <ion-badge color="success">{{'core.dataprivacy.statusdeleted' | translate }}</ion-badge>
        } @default {
            <ion-badge class="ion-text-wrap">{{request.statuslabel}}</ion-badge>
        }
    }
</ng-template>

<ng-template #type let-request="request">
    @switch (request.type) {
        @case (1) {
            {{ 'core.dataprivacy.requesttypeexport' | translate }}
        } @case (2) {
            {{ 'core.dataprivacy.requesttypedelete' | translate }}
        } @case (3) {
            {{ 'core.dataprivacy.requesttypeothers' | translate }}
        } @default {
            {{request.typename}}
        }
    }
</ng-template>
