//-  Copyright (c) 2019 AT&T Intellectual Property.                             #
//-                                                                             #
//-  Licensed under the Apache License, Version 2.0 (the "License");            #
//-  you may not use this file except in compliance with the License.           #
//-  You may obtain a copy of the License at                                    #
//-                                                                             #
//-      http://www.apache.org/licenses/LICENSE-2.0                             #
//-                                                                             #
//-  Unless required by applicable law or agreed to in writing, software        #
//-  distributed under the License is distributed on an "AS IS" BASIS,          #
//-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #
//-  See the License for the specific language governing permissions and        #
//-  limitations under the License.                                             #
//- #############################################################################


div([@routerTransition])
  app-page-header([heading]="'Create Group'")
  form.ml-2(style="width:100%")
    .row
      .col-md-6
        .row
          mat-form-field.mr-2
            mat-select([(value)]="newGroup.parentGroupId", placeholder="Parent Group", required)
              mat-option(value="None") None
              mat-option(*ngFor="let group of groups", [value]="group._id") {{group.groupName}} 
              
        .row
          mat-form-field.mr-2(required)
            input(matInput, placeholder="New Group Name", [(ngModel)]="newGroup.groupName", name="Group Name", required)
        
      .col-md-6
        mat-form-field.mr-2
          textarea(matInput, cdkTextareaAutosize, placeholder="Description", #autosize="cdkTextareaAutosize", cdkAutosizeMinRows="2", cdkAutosizeMaxRows="5", name="description", [(ngModel)]="newGroup.groupDescription")

    button.pull-left(mat-raised-button, color="primary", (click)="createGroup()") Create
    button.pull-right(mat-raised-button, color="warn", (click)="close()") Cancel