MT-work-fronted/src/app/modules/meetings/components/ceate-meeting/ceate-meeting.component.html

<h2 mat-dialog-title class="text-center">
  <span>Create Meeting</span>
</h2>
<mat-dialog-content class="mat-typography">
  <form fxLayout="column" fxLayoutAlign="start stretch" class="gap-20">
    <div
      class="form-input"
      fxLayout="column"
      fxLayoutAlign="start stretch"
      fxFlex="100"
    >
      <label for="title">
        <span>Title <span class="red">*</span></span>
      </label>
      <input type="text" id="title" placeholder="Enter Meeting Title" />
    </div>
    <div
      class="form-input"
      fxLayout="column"
      fxLayoutAlign="start stretch"
      fxFlex="100"
    >
      <label for="location">
        <span>Meeting location or Link <span class="red">*</span></span>
      </label>
      <input
        type="text"
        id="location"
        placeholder="Enter meeting location or link"
      />
    </div>

    <div
      class="form-input"
      fxLayout="column"
      fxLayoutAlign="start stretch"
      fxFlex="100"
    >
      <label for="location">
        <span>Details <span class="red">*</span></span>
      </label>
      <textarea
        rows="4"
        cols="6"
        placeholder="Enter meeting details"
      ></textarea>
    </div>

    <div fxLayout="row" fxLayoutAlign="start start" class="gap-20">
      <div
        fxLayout="column"
        fxLayoutAlign="start stretch"
        fxFlex.lt-md="100"
        fxFlex.gt-sm="50"
      >
        <label for="date">
          <span class="fz-13">Date<span class="red">*</span></span>
        </label>
        <input class="date" type="date" id="date" placeholder="Select Date" />
      </div>

      <div
        fxLayout="column"
        fxLayoutAlign="start stretch"
        fxFlex.lt-md="100"
        fxFlex.gt-sm="50"
      >
        <label for="time">
          <span class="fz-13">Time<span class="red">*</span></span>
        </label>
        <div fxLayout="row" fxLayoutAlign="start ccenter" class="gap-20">
          <input
            type="time"
            id="time"
            placeholder="From"
            class="time"
            fxFlex.lt-md="100"
            fxFlex.gt-sm="50"
          />
          <input
            type="time"
            id="time"
            placeholder="To"
            class="time"
            fxFlex.lt-md="100"
            fxFlex.gt-sm="50"
          />
        </div>
      </div>
    </div>

    <div
      class="form-input"
      fxLayout="column"
      fxLayoutAlign="start stretch"
      fxFlex="100"
    >
      <label for="repeated">
        <span>Repeat</span>
      </label>
      <select></select>
    </div>

    <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100">
      <span class="fz-13">Assigne</span>
      <mat-form-field appearance="outline">
        <mat-select multiple>
          <!-- <mat-select-trigger>
            {{toppings.value?.[0] || ''}}
            @if ((toppings.value?.length || 0) > 1) {
            <span class="example-additional-selection">
              (+{{ (toppings.value?.length || 0) - 1 }}
              {{ toppings.value?.length === 2 ? "other" : "others" }})
            </span>
            }
          </mat-select-trigger> -->
          <!-- @for (topping of toppingList; track topping) {
          <mat-option [value]="topping">{{ topping }}</mat-option>
          } -->
        </mat-select>
      </mat-form-field>
    </div>
  </form>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>save</button>
</mat-dialog-actions>