<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>