<admin-header></admin-header>

<form #myForm="ngForm">
  <div class="form-group">
    <div class="container_page">
      <div class="container" style="margin-top: 15px;">
        <a routerLink="/admin/research/users">
          <span class="fa fa-chevron-circle-left"></span> Back to Research/Users
        </a>
      </div>

      <!-- Add Participant Users starts here -->

      <div class="container mt-3">
        <div align="right">
          <button type="submit" class="btn btn-primary col-3 margin" (click)="addParticipant()"
                  [disabled]="!myForm.form.valid">
            Add Participant(s)
          </button>
        </div>

        <div class="container frame-fooditem">
          <h6> New Participant User(s) </h6><br>

          <div>
            <div class="form-group col-12">
              <!--                <label for="limitNumberOfParticipants" style="font-weight: bold"> limit Number Of Participants </label>-->
              <!--                <label style="font-style: italic; font-size: small; margin-left: 10px"> *required </label>-->
              <!--                <input placeholder="limitNumberOfParticipants" width="25" style="border-color: mediumblue; border-width: 0.05cm" type="number"-->
              <!--                    class="form-control" id="limitNumberOfParticipants" name="limitNumberOfParticipants" [(ngModel)]="limitNumberOfParticipants" required/>-->
              <!--                <br>-->
              <label style="font-weight: bold">Choose Research Institution to assign to:</label>
              <br>
              <mat-form-field>
                <mat-label appearance="fill">Choose Research Institution...</mat-label>
                <mat-select matNativeControl id="assignedResearchInstitutionName" name="assignedResearchInstitutionName" [(ngModel)]="selectedId">
                  <mat-option (click)="handleChange()" *ngFor="let c of ffqinstitutionList" [value]="c.researchInstitutionId">{{ c.institutionName }}</mat-option>
                </mat-select>
              </mat-form-field>
              <br>
              <label>Number of participants:</label>
              <input [(ngModel)]="numToAdd" name="numToAdd" type="number" min="1" max={{limit}} />
              <br>
              <p style="color:grey;"><small>Current limit: {{limit - numParticipants}}</small></p>
              <p style="color:red;" *ngIf="noMoreRoom">Exceeded limit, no participants added</p>
            </div>
          </div>
          <!-- Add Research Institution ends here -->
        </div>
      </div>
    </div>
  </div>
</form>
