Untitled

<div class=" md:py-18 py-14 px-6 dark:bg-dark-footer rounded">
  <form [formGroup]="addOfferForm" (submit)="addOffer()" *ngIf="categories.length > 0">
    <!-- SHOULD BE A DROPDOWN -->
    <div class="lg:col-span-6 mb-5">
      <label
        for="idCategory"
        class="mb-2 inline-block text-neutral-500 dark:text-neutral-400">Select category</label>

      <select name="idCategory" id="idCategory" type="text"
              class=" cursor-pointer form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface
dark:bg-gray-800 dark:border-gray-700 text-gray-900"
              formControlName="idCategory">

        <option *ngFor="let category of categories;" [value]="category._id">{{ category.description }}</option>
      </select>
    </div>

    <div class="grid lg:grid-cols-12 lg:gap-6 mb-5">
      <div class="lg:col-span-6">
        <input name="place" id="place" type="text"
               class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"
               placeholder="Place" formControlName="place">
      </div>

      <div class="lg:col-span-6">
        <input name="plageOffer" id="plageOffer" type="text"
               class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"
               placeholder="Plage Offer"
               formControlName="plageOffer">
      </div>
    </div>

    <div class="mb-5">
      <input name="limitMax" id="limitMax" type="number"
             class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"
             placeholder="Maximum limit"
             formControlName="limitMax">
    </div>

    <div class="mb-5">
      <textarea name="description" id="description"
                class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface textarea h-24"
                placeholder="Description" formControlName="description"></textarea>
    </div>

    <div class="flex gap-3 items-center mb-5">
      <div class="flex-1">
        <input formControlName="startDate" id="startDate"
               class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"
               placeholder="Start date"
               [owlDateTimeTrigger]="startDate" [owlDateTime]="startDate">
        <owl-date-time [pickerType]="'calendar'" #startDate></owl-date-time>
      </div>

      <div class="flex-1">
        <input formControlName="endDate" id="endDate"
               class="form-input dark:border-white/70 dark:text-white bg-transparent bg-clip-padding text-base font-normal text-surface"
               placeholder="End date"
               [owlDateTimeTrigger]="endDate" [owlDateTime]="endDate">
        <owl-date-time [pickerType]="'calendar'" #endDate></owl-date-time>
      </div>
    </div>

    <div class="mb-5">
      <label
        for="imageUrl"
        class="mb-2 inline-block text-neutral-500 dark:text-neutral-400"
      >Select image</label>
      <input
        class=" form-input relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3  file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white  file:dark:text-white"
        type="file"
        (change)="onImageSelected($event)"
        id="imageUrl"
        name="imageUrl"/>
    </div>
    <button type="submit" id="submit" name="add"
            class="btn bg-orange-600 hover:bg-orange-700 border-orange-600 hover:border-orange-700 text-white rounded-md h-11 justify-center flex items-center">
      Add
    </button>
  </form>

  <div *ngIf="categories.length === 0">
    <div class="grid grid-cols-1 pb-8">
      <div class="flex justify-center gap-3 rounded bg-orange-100 dark:bg-orange-400 p-4">
        <span class="mdi mdi-cancel text-5xl text-slate-600 dark:text-slate-300"></span>
        <div>
          <p class="text-slate-600 text-lg font-bold dark:text-slate-300 max-w-xl mx-auto">No categories yet..</p>
          <p class="text-slate-600 dark:text-slate-300 max-w-xl mx-auto">Please add a category first.</p>
        </div>
      </div>
    </div>
  </div>

</div>