<router-outlet></router-outlet>

<ng-template #shortUrl let-url>
    <div class="flex flex-col gap-2 bg rounded-lg p-3 w-full max-w-lg justify-between">
        <div class="flex flex-col gap-2">
            <h3>{{ url.shortUrl }}</h3>
            <ng-container *ngFor="let row of resolvedColumns.get(url.shortUrl) ">
                <div class="grid-container">
                    <span class="grid-label font-bold">{{ row.column.translationKey | translate }}:</span>

                    <ng-container *ngIf="row.column.type === 'boolean'; else text">
                        <div class="pi pi-{{ row.value ? 'check-circle' : 'times-circle' }}"></div>
                    </ng-container>
                    <ng-template #text>
                        <span [class]="'grid-value ' + row.column.class">{{ row.column.value(url) }}</span>
                    </ng-template>
                </div>
            </ng-container>

        </div>
        <div class="flex justify-between">
            <div class="flex">
                <p-button
                        class="icon-btn btn"
                        icon="pi pi-qrcode"
                        (onClick)="qrDialog(url)"></p-button>
            </div>
            <div class="flex justify-end">
                <p-button
                        class="icon-btn btn"
                        icon="pi pi-clone"
                        (onClick)="copy(url.shortUrl)"></p-button>
                <p-button
                        class="icon-btn btn"
                        icon="pi pi-external-link"
                        (onClick)="open(url.shortUrl)"></p-button>

                <p-button
                        class="icon-btn btn"
                        icon="pi pi-pencil"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.update' | translate }}"
                        [disabled]="url.deleted"
                        routerLink="edit/{{ url.id }}"></p-button>
                <p-button
                        class="icon-btn btn danger-icon-btn"
                        icon="pi pi-trash"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.delete' | translate }}"
                        [disabled]="url.deleted"
                        (click)="delete(url)"></p-button>
                <p-button
                        *ngIf="url.deleted"
                        class="icon-btn btn"
                        icon="pi pi-undo"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.restore' | translate }}"
                        (click)="restore(url)"></p-button>
                <p-button
                        class="icon-btn btn"
                        icon="pi pi-history"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.history' | translate }}"
                        routerLink="history/{{ url.id }}"></p-button>
            </div>
        </div>
    </div>
</ng-template>

<div class="flex flex-col gap-2">
    <div class="flex justify-between gap-1">
        <div><h1>{{ 'short_url.short_url' | translate }}</h1></div>
        <div class="flex space-x-2">
            <p-button
                    class="icon-btn btn"
                    icon="pi pi-plus"
                    tooltipPosition="left"
                    pTooltip="{{ 'table.create' | translate }}"
                    routerLink="create"></p-button>
            <p-button
                    class="icon-btn btn"
                    [styleClass]="showDeleted ? 'highlight2' : ''"
                    icon="pi pi-trash"
                    tooltipPosition="left"
                    pTooltip="{{
            (showDeleted ? 'table.hide_deleted' : 'table.show_deleted')
              | translate
          }}"
                    (click)="toggleShowDeleted()"></p-button>
            <p-button
                    class="icon-btn btn"
                    icon="pi pi-filter-slash"
                    tooltipPosition="left"
                    pTooltip="{{ 'table.reset_filters' | translate }}"
                    (click)="resetFilters()"></p-button>
            <app-column-selector
                    [columns]="columns"
                    (selectChange)="resolveColumns()"></app-column-selector>
        </div>
    </div>

    <div class="divider"></div>
    <div class="bg2 rounded-xl p-3" *ngIf="shortUrlsWithoutGroup.length > 0">
        <div class="flex flex-wrap gap-1.5">
            <ng-template *ngFor="let url of shortUrlsWithoutGroup" [ngTemplateOutlet]="shortUrl"
                         [ngTemplateOutletContext]="{ $implicit: url }"></ng-template>
        </div>
    </div>

    <div *ngFor="let group of groupsFromGroupedShortUrls" class="bg2 rounded-xl p-3">
        <div><h2>{{ group }}</h2></div>
        <div class="flex flex-wrap gap-1.5">
            <ng-template class="flex-1" *ngFor="let url of groupedShortUrls[group]" [ngTemplateOutlet]="shortUrl"
                         [ngTemplateOutletContext]="{ $implicit: url }"></ng-template>
        </div>
    </div>
</div>

<p-dialog header="QR Code" [(visible)]="qrCodeDialog.visible" [modal]="true" [closable]="true"
          (onHide)="qrDialogClose()"
          [style]="{width: '320px'}">
    <div class="flex flex-col gap-5">
        <div class="flex flex-col gap-3">
            <div class="flex gap-1 justify-center items-center">
                <input pInputText type="number" class="w-20"
                       [(ngModel)]="qrCodeDialog.width"/>px
            </div>
            <p-slider [(ngModel)]="qrCodeDialog.width" [min]="32" [max]="8192" (onChange)="qr()"></p-slider>
        </div>
        <div>
            <p-fileUpload
                #imageUpload
                maxFileSize="1000000"
                customUpload="true"
                chooseLabel="{{ 'common.choose' | translate }}"
                uploadLabel="{{ 'common.upload' | translate }}"
                cancelLabel="{{ 'common.cancel' | translate }}"
                name="logo"
                class="icon-btn btn"
                mode="basic"
                chooseIcon="pi pi-image"
                accept="image/*"
                [maxFileSize]="1000000000"
                [customUpload]="true"
                (uploadHandler)="logoUpload($event)"
                [auto]="true"
            ></p-fileUpload>
        </div>
        <div>
            <img id="qrCode" alt="QR Code"/>
        </div>

        <div class="flex justify-end">
            <p-button class="btn"
                      label="{{ 'common.download' | translate }}"
                      icon="pi pi-save"
                      (onClick)="downloadQr()"></p-button>
        </div>
    </div>
</p-dialog>