@if (migration) {
    <div class="mt-4 mx-2">
        <div class="flex text-xl align-items-baseline font-normal text-primary mb-4">
            <div class="fa fa-suitcase mr-2"></div>
            <div id="tab-title-span">Migration: {{ migration.id }}</div>
        </div>
        <div class="grid gap-4">
            <!-- Status Info -->
            <div class="col flex-initial max-w-50rem">
                <p-fieldset legend="Status">
                    <div class="flex flex-column gap-3">
                        <div class="flex align-items-center">
                            <span class="font-semibold w-8rem">Status:</span>
                            <p-tag [severity]="statusSeverity" [value]="statusText" styleClass="capitalize"></p-tag>
                        </div>
                        @if (migration.generalError) {
                            <div class="flex align-items-center">
                                <span class="font-semibold w-8rem">General error:</span>
                                <span class="text-red-500">{{ migration.generalError }}</span>
                            </div>
                        }
                        @if (totalErrors > 0) {
                            <div class="flex align-items-center">
                                <span class="font-semibold w-8rem">Errors:</span>
                                <p-tag
                                    severity="danger"
                                    [value]="totalErrors + ' errors'"
                                    styleClass="capitalize"
                                ></p-tag>
                            </div>
                        }
                        <div class="flex align-items-center">
                            <span class="font-semibold w-8rem">Progress:</span>
                            <p-progressBar
                                [value]="completionPercentage"
                                [showValue]="true"
                                class="flex-1"
                            ></p-progressBar>
                        </div>
                        <div class="flex align-items-center">
                            <span class="font-semibold w-8rem">Entities:</span>
                            <span>{{ migration.processedItemsCount }} / {{ migration.totalItemsCount }}</span>
                        </div>
                        <div class="flex align-items-center">
                            <span class="font-semibold w-8rem">Start Date:</span>
                            <span>{{ migration.startDate | localtime }}</span>
                        </div>
                        @if (migration.endDate) {
                            <div class="flex align-items-center">
                                <span class="font-semibold w-8rem">End Date:</span>
                                <span>{{ migration.endDate | localtime }}</span>
                            </div>
                        }
                        <div class="flex align-items-center">
                            <span class="font-semibold w-8rem">Duration:</span>
                            <span>{{ migration.elapsedTime | duration }}</span>
                        </div>
                        @if (isRunning) {
                            <div class="flex align-items-center">
                                <span class="font-semibold w-8rem">Estimated Left:</span>
                                <span>{{ migration.estimatedLeftTime | duration }}</span>
                            </div>
                        }
                        <div class="flex align-items-center">
                            <span class="font-semibold w-8rem">Started by:</span>
                            <app-entity-link
                                entity="user"
                                [attrs]="{ id: migration.authorId, login: migration.authorLogin }"
                            ></app-entity-link>
                        </div>
                    </div>
                </p-fieldset>
                <!-- Actions Section -->
                <div class="mt-4 flex gap-2 flex-wrap">
                    <p-button label="Refresh" icon="pi pi-refresh" (click)="onRefresh()"></p-button>
                    <p-button
                        label="Cancel Migration"
                        icon="pi pi-times"
                        severity="danger"
                        [disabled]="!isRunning || migration.canceling || !canCancelMigration"
                        (click)="onCancel()"
                        appAccessEntity="migrations"
                        appAccessType="update"
                    ></p-button>
                </div>
            </div>
            <!-- Errors Section - Always visible if there are errors -->
            <div class="col max-w-50rem">
                @if (totalErrors > 0) {
                    <div>
                        <p-fieldset legend="Errors">
                            <p-table
                                [value]="errorItems"
                                [totalRecords]="totalErrors"
                                [paginator]="true"
                                [rows]="50"
                                [rowsPerPageOptions]="[10, 50, 100, 200, 500]"
                                [showCurrentPageReport]="true"
                                [alwaysShowPaginator]="false"
                                size="small"
                            >
                                <ng-template #header>
                                    <tr>
                                        <th>Entity</th>
                                        <th>Error</th>
                                    </tr>
                                </ng-template>
                                <ng-template #body let-error>
                                    <tr>
                                        <td>
                                            @switch (error.causeEntity) {
                                                @case ('host') {
                                                    <app-entity-link
                                                        entity="host"
                                                        [attrs]="{ id: error.id, label: error.label }"
                                                        [showIdentifier]="true"
                                                    ></app-entity-link>
                                                }
                                                @default {
                                                    <span
                                                        >{{ error.causeEntity }} [{{ error.id }}]
                                                        {{ error.label }}</span
                                                    >
                                                }
                                            }
                                        </td>
                                        <td class="text-red-500">{{ error.error }}</td>
                                    </tr>
                                </ng-template>
                                <ng-template #emptymessage>
                                    <tr>
                                        <td colspan="2">No error details available</td>
                                    </tr>
                                </ng-template>
                            </p-table>
                        </p-fieldset>
                    </div>
                }
            </div>
        </div>
    </div>
}