@if (!isShareMode()) {
<p-confirmdialog />

<app-dialog-shell [title]="'share.dialog.title' | transloco" [visible]="showShareDialog()" (visibleChange)="onShareDialogVisibleChange($event)" [secondaryLabel]="'common.actions.close' | transloco" [showPrimary]="false" width="860px">
    <div class="flex flex-col gap-4">
        <div class="flex items-start justify-between gap-3 share-dialog-header">
            <p class="text-sm text-[var(--p-text-muted-color)] m-0">{{ "share.dialog.description" | transloco }}</p>
            <p-button [label]="'share.dialog.generateAction' | transloco" icon="pi pi-link" (onClick)="generateShareLink()" [loading]="createLoading()" [disabled]="!canManageShares()" styleClass="p-button-sm shrink-0" />
        </div>

        @if (notice(); as noticeMessage) {
        <div
            class="hk-feedback-message flex items-center gap-3"
            [class.hk-feedback-message--success]="noticeMessage.kind === 'success'"
            [class.hk-feedback-message--error]="noticeMessage.kind === 'error'"
            [attr.role]="noticeMessage.kind === 'error' ? 'alert' : 'status'"
            [attr.aria-live]="noticeMessage.kind === 'error' ? 'assertive' : 'polite'"
        >
            <i class="pi" [class.pi-check-circle]="noticeMessage.kind === 'success'" [class.pi-exclamation-circle]="noticeMessage.kind === 'error'" aria-hidden="true"></i>
            <span class="font-medium">{{ noticeMessage.key | transloco }}</span>
        </div>
        }

        <div class="flex justify-end">
            <p-iconfield class="hk-crud-search">
                <p-inputicon class="pi pi-search" />
                <input pInputText #shareSearch [placeholder]="'common.searchPlaceholder' | transloco" (input)="shareLinksTable.filterGlobal($any($event.target).value, 'contains')" class="w-full" />
            </p-iconfield>
        </div>

        <div class="hk-crud-table-wrap">
            <p-table
                #shareLinksTable
                [value]="shareLinks()"
                [loading]="linksLoading()"
                dataKey="id"
                [globalFilterFields]="['token_hint', 'created_at', 'url']"
                [sortField]="'created_at'"
                [sortOrder]="-1"
                [paginator]="true"
                [rows]="10"
                [rowsPerPageOptions]="[10, 25, 50]"
                [rowHover]="true"
                responsiveLayout="scroll"
                styleClass="hk-crud-table p-datatable-sm"
                [tableStyle]="{ 'min-width': '760px' }"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th pSortableColumn="token_hint">
                            {{ "share.dialog.tokenHintLabel" | transloco }}
                            <p-sortIcon field="token_hint" />
                        </th>
                        <th pSortableColumn="created_at">
                            {{ "common.columns.created" | transloco }}
                            <p-sortIcon field="created_at" />
                        </th>
                        <th pSortableColumn="url">
                            {{ "share.dialog.shareUrlLabel" | transloco }}
                            <p-sortIcon field="url" />
                        </th>
                        <th class="hk-actions-column">{{ "common.columns.actions" | transloco }}</th>
                    </tr>
                </ng-template>

                <ng-template pTemplate="body" let-link>
                    <tr>
                        <td>
                            <code class="share-token">{{ link.token_hint }}</code>
                        </td>
                        <td><app-relative-date-time [value]="link.created_at" /></td>
                        <td>
                            @if (link.url) {
                            <input pInputText readonly [value]="link.url" class="w-full share-url-input" />
                            } @else {
                            <span class="text-sm text-[var(--p-text-muted-color)]">{{ "share.dialog.urlUnavailable" | transloco }}</span>
                            }
                        </td>
                        <td class="hk-actions-cell">
                            <app-table-row-actions [items]="shareLinkActions(link)" [loading]="deletingShareId() === link.id" />
                        </td>
                    </tr>
                </ng-template>

                <ng-template pTemplate="emptymessage">
                    <tr>
                        <td colspan="4" class="text-center text-muted-color py-4">{{ "share.dialog.empty" | transloco }}</td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
</app-dialog-shell>
}