<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
    <div class="ti-modal-header bg-primary text-center">
        <h5 class="text-xxl font-bold text-white">
            {{'ImportWorkingTimeData' | translate}}
        </h5>
    </div>
    <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
        <h1 class="mt-2rem text-xl" style="text-align: center;">{{'File' | translate}}</h1>
        <div class="mt-2rem p-2">
            <div class="flex rounded-md">
                <input #fileInput id="fileInput" type="file" (change)="onFileSelected($event)" hidden>
                <input type="text" [value]="selectedFileName | translate" readonly (click)="fileInput.click()"
                    class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10 cursor-pointer">
                <button type="button" (click)="fileInput.click()"
                    class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
                    <i class="ti ti-upload"></i>
                </button>
            </div>
            <div class="flex justify-center mt-2rem ">
                <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 
                text-center text-secondary border-secondary border-b-2 align-items-end text-xl"
                    (click)="downloadFile()">
                    {{'DownloadSampleFile' | translate}}</h1>
            </div>
            <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                <button type="submit" class="ti-btn ti-btn-secondary"
                    data-hs-overlay="#company-registration-page-upload-modal" [class.ti-btn-disabled]="!selectedFile"
                    (click)="uploadFile()" [disabled]="!selectedFile" [disabled]="!selectedFile">
                    {{'Upload' | translate}}
                </button>
            </div>
        </div>
    </div>
</div>