<admin-page-header [title]="'Holidays Import'"></admin-page-header>

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    @if (Error) {
      <div class="alert alert-danger">
        <p>{{ErrorMessage}}</p>
      </div>
    }

    <div class="card-header border-0">
      <h4 class="card-title">{{'Import file' | translate}}</h4>
    </div>
    <form #FormData="ngForm" (ngSubmit)="UploadHolidays(FormData, 'uploadaholiday')">
      <div class="card-body">
        <div class="row">
          <div class="form-group">
            <label class="form-label">{{'Upload File' | translate}} <span class="text-danger">*</span></label>
            <div class="input-group file-browser">
              <input #uploadFile ngModel class="form-control" (change)="File($event)" name="file" type="file" required>
            </div>
            <small class="text-muted"><i>{{'File Format: .xlsx and .csv' | translate}}</i></small>
            <p>{{'Download' | translate}} <a href="./download/holidaysample.csv" class="text-primary"
            download>{{'Sample File'| translate}}</a></p>
          </div>
          <span class="text-danger">{{"Please ensure to enter 'Yes/yes' or 'No/no' in the is_repetitive field when filling out the CSV." | translate}}</span>
        </div>
      </div>
      <div class="card-footer">
        <button type="submit" [disabled]="sendingResponse['uploadaholiday']" class="btn btn-secondary float-end mb-2"> {{'Import Data' | translate}}@if (sendingResponse['uploadprojects']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</div>