open-learning-exchange/planet

<mat-toolbar *ngIf="!isDialog">
  <a mat-icon-button routerLink="/meetups">
    <mat-icon>arrow_back</mat-icon>
  </a>
</mat-toolbar>

<div [ngClass]="{'space-container':!isDialog}">
  <mat-toolbar class="primary-color font-size-1" i18n>{this.pageType, select, Add new {Add new} Update {Update}} Meetup</mat-toolbar>
  <div class="view-container">
    <form class="form-spacing" [formGroup]="meetupForm" novalidate>
      <mat-form-field>
        <input matInput i18n-placeholder placeholder="Title" formControlName="title" required>
        <mat-error>
          <planet-form-error-messages [control]="meetupForm.controls.title"></planet-form-error-messages>
        </mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput i18n-placeholder placeholder="Location" formControlName="meetupLocation">
        <mat-error>
          <planet-form-error-messages [control]="meetupForm.controls.meetupLocation"></planet-form-error-messages>
        </mat-error>
      </mat-form-field>
      <mat-form-field class="full-width mat-form-field-type-no-underline">
        <planet-markdown-textbox class="full-width" required="true" i18n-placeholder placeholder="Description" [formControl]="meetupForm.controls.description"></planet-markdown-textbox>
        <mat-error><planet-form-error-messages [control]="meetupForm.controls.description"></planet-form-error-messages></mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput [matDatepicker]="datepickerStart" i18n-placeholder required="true" placeholder="Start Date" formControlName="startDate">
        <mat-datepicker-toggle matSuffix [for]="datepickerStart"></mat-datepicker-toggle>
        <mat-datepicker #datepickerStart></mat-datepicker>
        <mat-error><planet-form-error-messages [control]="meetupForm.controls.startDate"></planet-form-error-messages></mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput [matDatepicker]="datepickerEnd" i18n-placeholder placeholder="End Date" formControlName="endDate">
        <mat-datepicker-toggle matSuffix [for]="datepickerEnd"></mat-datepicker-toggle>
        <mat-datepicker #datepickerEnd></mat-datepicker>
        <mat-error><planet-form-error-messages [control]="meetupForm.controls.endDate"></planet-form-error-messages></mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput planetTimeMask i18n-placeholder placeholder="Start Time" formControlName="startTime">
        <mat-error><planet-form-error-messages [control]="meetupForm.controls.startTime"></planet-form-error-messages></mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput planetTimeMask i18n-placeholder placeholder="End Time" formControlName="endTime">
        <mat-error><planet-form-error-messages [control]="meetupForm.controls.endTime"></planet-form-error-messages></mat-error>
      </mat-form-field>
      <div class="full-width">
        <label i18n>Recurring Frequency</label>
        <mat-radio-group formControlName="recurring">
          <mat-radio-button class="margin-tblr" value="daily" (change)="toggleDaily($event.value, false)" i18n>Daily</mat-radio-button>
          <mat-radio-button class="margin-tblr" value="weekly" (change)="toggleDaily($event.value, true)" i18n>Weekly</mat-radio-button>
          <mat-radio-button class="margin-tblr" value="none" (change)="toggleDaily($event.value, false)" i18n>None</mat-radio-button>
          <mat-error><planet-form-error-messages [control]="meetupForm.controls.recurring"></planet-form-error-messages></mat-error>
        </mat-radio-group>
      </div>
      <div *ngIf="meetupForm.controls.recurring.value==='weekly'" class="full-width">
        <mat-checkbox (change)="onDayChange(day, $event.checked)" *ngFor="let day of days" class="margin-lr" [checked]="isClassDay(day)">{{day}}</mat-checkbox>
      </div>
      <ng-container *ngIf="meetupForm.controls.recurring.value==='weekly' || meetupForm.controls.recurring.value==='daily'">
        <mat-form-field>
          <input matInput type="number" min="2" i18n-placeholder placeholder="Number of Recurrences" formControlName="recurringNumber">
          <mat-error><planet-form-error-messages [control]="meetupForm.controls.recurringNumber"></planet-form-error-messages></mat-error>
        </mat-form-field>
      </ng-container>
    </form>
  </div>
</div>
<mat-dialog-actions>
  <button class="margin-lr-2" mat-raised-button type="button" (click)="cancel()" i18n>Cancel</button>
  <button mat-raised-button type="button" color="primary" [planetSubmit]="meetupForm.valid" [disabled]="!meetupForm.dirty" (click)="onSubmit()" i18n>Save</button>
</mat-dialog-actions>