Untitled

<div class=" md:py-18 py-14 px-6 dark:bg-dark-footer rounded">
  <form [formGroup]="filterForm" (submit)="applyFilter()" *ngIf="categories.length > 0">
    <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 value="">All</option>
        <option *ngFor="let category of categories;" [value]="category._id">{{ category.description }}</option>
      </select>
    </div>

    <button type="submit"  name="apply"
            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">
      Apply filter
    </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>