Cloud-CV/EvalAI

<section class="ev-sm-container ev-view">
  <div class="row">
  <div *ngIf="!(allTeams.length == 0 && filterTeamsQuery == '')" class="filter-card">
    <div class="filter-team">
      <strong class="fw-semibiold content fs-15">Filter team by name</strong>
    </div>
    <div class="row row-lr-margin">
      <div class="col-sm-6 col-xs-12 team-name-filter">
        <input
          type="text"
          label="Team name"
          placeholder="Team name"
          name="filterByTeamName"
          (input)="filterTeam($event.target.value)"
        />
      </div>
    </div>
  </div>
</div>
  <div class="row">
    <div class="col s12 m6">
      <div class="ev-card-panel ev-z-depth-5">
        <div class="ev-md-container ev-panel-title">
          <strong>{{ teamSelectTitle }}</strong>
        </div>
        <div class="ev-md-container ev-card-body exist-team-card">
          <div *ngIf="allTeams.length === 0" class="page-msg">
            No team exists for now. Start by creating a new team!
          </div>
          <ul class="collapsible" data-collapsible="accordion">
            <app-teamcard
              *ngFor="let team of filteredTeams"
              [team]="team"
              [selected]="team['isSelected']"
              [isOnChallengePage]="isOnChallengePage"
              (deleteTeamCard)="deleteTeamWrapper()($event)"
              (deleteMemberCard)="deleteTeamMemberWrapper()($event)"
              (editTeamCard)="editTeamWrapper()($event)"
              (addMembersTeamCard)="addMembersToTeamWrapper()($event)"
              (selectTeamCard)="selectTeamWrapper()($event)"
              (deselectTeamCard)="deselectTeamWrapper()($event)"
            >
            </app-teamcard>
          </ul>
          <section class="pagination" *ngIf="allTeams.length !== 0">
            <div class="row rm-gut">
              <div class="col s12 pagination">
                <a
                  [class.disabled]="seeMore <= 1"
                  class="btn-floating btn-pagination waves-effect waves-light"
                  (click)="seeLessClicked()"
                >
                  <i class="fa fa-chevron-left"></i>
                </a>
                <span class="pagination-title">
                  <strong class="text-med-black">
                    Page {{ seeMore | number }} of {{ allTeams.length / windowSize | number: '1.0-0' }}
                  </strong></span
                >
                <a
                  [class.disabled]="seeMore * windowSize >= allTeams.length"
                  class="btn-floating btn-pagination waves-effect waves-light"
                  (click)="seeMoreClicked()"
                >
                  <i class="fa fa-chevron-right"></i>
                </a>
              </div>
              <div class="align-right reg-control">
                <button
                  class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14"
                  *ngIf="selectedTeam !== null && isHost == true && !isTemplateChallenge"
                  type="submit"
                  value="Submit"
                  (click)="createChallenge()"
                >
                  Next
                </button>
                <button
                  class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14"
                  *ngIf="selectedTeam !== null && isOnChallengePage == true && !isTemplateChallenge"
                  type="submit"
                  value="Submit"
                  (click)="participateInChallenge()"
                >
                  Next
                </button>
                <button
                  class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14"
                  *ngIf="selectedTeam != null && isTemplateChallenge"
                  type="submit"
                  value="Submit"
                  (click)="createChallengeFromTemplate()"
                >
                  Next
                </button>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <div class="col s12 m6">
      <div class="list-card ev-card-panel ev-z-depth-5">
        <div class="ev-md-container ev-panel-title">
          <strong>{{ teamCreateTitle }}</strong>
        </div>
        <div class="ev-md-container ev-card-body new-team-card">
          <form name="createTeamForm" #createTeamForm="ngForm" (ngSubmit)="createTeamSubmit(createTeamForm.valid)">
            <div class="input-field align-left">
              <input
                id="name"
                type="text"
                class="validate text-dark-black dark-autofill w-400"
                name="team_name"
                (focusin)="isnameFocused = true"
                (focusout)="isnameFocused = create_team['team_name'] !== ''"
                #teamName="ngModel"
                [(ngModel)]="create_team['team_name']"
                required
              />
              <span class="form-icon form-icon-dark"><i class="fa fa-user"></i></span>
              <label for="name" [class.active]="isnameFocused" data-error="wrong" data-success="right"
                >Team Name*</label
              >
              <div class="wrn-msg text-highlight" *ngIf="create_team['team_name'] === '' && isTeamNameRequired">
                Team name is required
              </div>
            </div>
            <div class="input-field align-left">
              <input
                id="url"
                type="text"
                class="validate text-dark-black dark-autofill w-400"
                name="team_url"
                (focusin)="isurlFocused = true"
                (focusout)="isurlFocused = create_team['team_url'] !== ''"
                [(ngModel)]="create_team['team_url']"
              />
              <span class="form-icon form-icon-dark"><i class="fa fa-link"></i></span>
              <label for="url" [class.active]="isurlFocused" data-error="wrong" data-success="right"
                >Team URL (Optional)</label
              >
            </div>
            <div class="align-left reg-control">
              <button class="waves-effect waves-dark btn grad-btn ev-btn-dark w-300 fs-14" type="submit" value="Submit">
                {{ teamCreateButton }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>