import { Component } from '@angular/core'
import { TranslocoDirective } from '@jsverse/transloco'

@Component({
	selector: 'kadi-network-error',
	template: `
		<ng-container *transloco="let t">
			<div class="w-screen h-screen">
				<div class="flex justify-center items-center h-full">
					<div class="flex flex-col items-center">
						<img
							class="mb-8"
							src="/assets/icons/no-internet.svg"
							alt="{{ t('No Internet') }}" />

						<div class="font-bold mb-2 text-xl">{{ t('no_network_warning') }}</div>
						<div class="mb-12">
							{{ t('no_network_notice') }}
						</div>

						<button
							(click)="reload()"
							class="btn btn-primary text-lg font-bold mb-12">
							{{ t('Reload') }}
						</button>
					</div>
				</div>
			</div>
		</ng-container>
	`,
	imports: [TranslocoDirective],
})
export class NetworkErrorComponent {
	reload(): void {
		window.open(window.location.origin, '_self')
	}
}