<div class="header">
  <h2>Notes</h2>
</div>

<ng-container [ngSwitch]="section">
  <div *ngSwitchCase="'TeamSelection'">
    <div class="row">
      <label id="team_number_label" class="label" for="team_number_notes">
        Team Number
      </label>
      <input [(ngModel)]="teamNumber" type="text" id="team_number_notes" />
    </div>
    <div class="row">
      <label for="match_number_notes">Match Number</label>
      <input
        [(ngModel)]="matchNumber"
        type="number"
        id="match_number_notes"
        min="1"
        max="999"
      />
    </div>
    <div class="row">
      <label for="set_number_notes">Set Number</label>
      <input
        [(ngModel)]="setNumber"
        type="number"
        id="set_number_notes"
        min="1"
        max="10"
      />
    </div>
    <div class="row">
      <label for="comp_level_notes">Comp Level</label>
      <select [(ngModel)]="compLevel" type="number" id="comp_level_notes">
        <option *ngFor="let level of COMP_LEVELS" [ngValue]="level">
          {{COMP_LEVEL_LABELS[level]}}
        </option>
      </select>
    </div>
    <button class="btn btn-primary" (click)="setTeamData()">Select</button>
  </div>

  <div *ngSwitchCase="'Data'">
    <div class="container-main" *ngFor="let team of newData; let i = index">
      <div class="pt-2 pb-2">
        <div class="d-flex flex-row">
          <div>
            <button
              class="btn bg-transparent ml-10 md-5"
              (click)="removeTeam(i)"
            >
              &#10006;
              <!--X Symbol-->
            </button>
          </div>
          <div><h3 id="team-key-{{i+1}}">{{team.teamNumber}}</h3></div>
        </div>
        <div class="">
          <!--
          Note Input Text Areas.
          ID property is used for keyboard shorcuts to focus
          on the corresponding text area.
          The data-toggle and title properties are
          used for bootstrap tooltips.
          -->
          <textarea
            class="text-input"
            id="text-input-{{i+1}}"
            [(ngModel)]="newData[i].notesData"
            data-toggle="tooltip"
            title="Ctrl + {{i+1}}"
          ></textarea>
        </div>
        <!--Key Word Checkboxes-->
        <!--Row 1 (Prevent Overflow on mobile by splitting checkboxes into 2 rows)-->
        <!--Slice KEYWORD_CHECKBOX_LABELS using https://angular.io/api/common/SlicePipe-->
        <div class="d-flex flex-row justify-content-around">
          <div
            *ngFor="let key of Object.keys(KEYWORD_CHECKBOX_LABELS) | slice:0:((Object.keys(KEYWORD_CHECKBOX_LABELS).length)/2); let k = index"
          >
            <div class="form-check">
              <input
                class="form-check-input"
                [(ngModel)]="newData[i]['keywordsData'][key]"
                type="checkbox"
                id="{{labelToId(KEYWORD_CHECKBOX_LABELS[key])}}_{{i}}"
                name="{{KEYWORD_CHECKBOX_LABELS[key]}}"
              />
              <label
                class="form-check-label"
                for="{{KEYWORD_CHECKBOX_LABELS[key]}}_{{i}}"
              >
                {{KEYWORD_CHECKBOX_LABELS[key]}}
              </label>
              <br />
            </div>
          </div>
        </div>
        <!--Row 2 (Prevent Overflow on mobile by splitting checkboxes into 2 rows)-->
        <div class="d-flex flex-row justify-content-around">
          <div
            *ngFor="let key of Object.keys(KEYWORD_CHECKBOX_LABELS) | slice:4:(Object.keys(KEYWORD_CHECKBOX_LABELS).length); let k = index"
          >
            <div class="form-check">
              <input
                class="form-check-input"
                [(ngModel)]="newData[i]['keywordsData'][key]"
                type="checkbox"
                id="{{labelToId(KEYWORD_CHECKBOX_LABELS[key])}}"
                name="{{KEYWORD_CHECKBOX_LABELS[key]}}"
              />
              <label
                class="form-check-label"
                for="{{KEYWORD_CHECKBOX_LABELS[key]}}"
              >
                {{KEYWORD_CHECKBOX_LABELS[key]}}
              </label>
              <br />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex flex-row justify-content-center pt-2">
      <div>
        <button
          id="add-team-button"
          class="btn btn-secondary"
          (click)="addTeam()"
        >
          Add team
        </button>
      </div>
      <div>
        <button
          id="submit-button"
          class="btn btn-success"
          (click)="submitData()"
        >
          Submit
        </button>
      </div>
    </div>
  </div>

  <div class="error">{{errorMessage}}</div>
</ng-container>