frontend/src/views/web/challenge-host-teams.html
<section class="ev-sm-container ev-view ">
<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>Select a Challenge Host Team</strong></div>
<div class="loader-container card-loader-container" id="loader" ng-show="challengeHostTeams.isExistLoader" class="fade">
<!-- <div class="text-dark-gray center w-300 loader-title">{{challengeHostTeams.loaderTitle}}</div> -->
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="ev-md-container ev-card-body exist-team-card">
<div ng-if="!showPagination" class="page-msg">{{challengeHostTeams.paginationMsg}}</div>
<ul class="collapsible" data-collapsible="accordion">
<li ng-repeat="(key, value) in challengeHostTeams.existTeam.results">
<div class="collapsible-header">
<input type="radio" name="selectHostTeam" class="with-gap selectTeam" id="{{value.id}}" value={{value.id}} ng-model="challengeHostTeams.challengeHostTeamId">
<label for="{{value.id}}"></label>
<div class="show-member-title pointer">
<span ng-if="value.team_url != ''"><b class="text-med-black">Team: </b><a class="orange-text" href="{{value.team_url}}" target="_blank">{{value.team_name}}</a></span>
<span ng-if="value.team_url == ''"><b class="text-med-black">Team: </b>{{value.team_name}}</span>
<a ng-click="challengeHostTeams.confirmDelete($event, value.id)"><i class="fa fa-trash list-icon text-highlight w-300 right grey-text"></i></a>
<a ng-click="challengeHostTeams.showMdDialog($event, value.id)"><i class="fa fa fa-pencil list-icon text-highlight w-300 right grey-text"></i></a>
<a ng-click="challengeHostTeams.inviteOthers($event, value.id)"><i class="fa fa-user-plus list-icon text-highlight w-300 right"></i></a>
<br>
<span><b class="text-med-black">Created by: </b>{{value.created_by}}</span>
<br>
<span><b class="text-med-black">Team Id: </b>{{value.id}}</span>
</div>
<div class="clearfix"></div>
</div>
<div class="collapsible-body">
<h6><b>Team Members:</b></h6>
<p ng-repeat="member in value.members">{{member.user}}</p>
</div>
</li>
</ul>
<section class="pagination" ng-if="challengeHostTeams.showPagination">
<div class="row rm-gut">
<div class="col s12 m6 ">
<a ng-class="challengeHostTeams.isPrev" class="btn-floating btn-pagination waves-effect waves-light " ng-click="challengeHostTeams.load(challengeHostTeams.existTeam.previous)">
<i class="fa fa-chevron-left"></i>
</a>
<span class="pagination-title"> <strong class="text-med-black"> Page {{challengeHostTeams.currentPage | ceil}} of {{challengeHostTeams.existTeam.count/10 | ceil}} </strong></span>
<a ng-class="challengeHostTeams.isNext" class="btn-floating btn-pagination waves-effect waves-light " ng-click="challengeHostTeams.load(challengeHostTeams.existTeam.next)">
<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" ng-if="challengeHostTeams.challengeHostTeamId" type="submit" value="Submit" ng-click="challengeHostTeams.storeChallengeHostTeamId()">Next</button>
</div>
<div class="col s12 m6 ">
<div class="align-right ">
<span class="text-dark-black"><strong >{{challengeHostTeams.existTeamError}}</strong></span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="col s12 m6">
<div class=" ev-card-panel ev-z-depth-5">
<div class="ev-md-container ev-panel-title"><strong>Create a New Team</strong></div>
<div class="loader-container card-loader-container" id="sim-loader" class="fade">
<!-- <div class="text-dark-gray center w-300 loader-title">{{challengeHostTeams.loaderTitle}}</div> -->
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="ev-md-container ev-card-body new-team-card">
<form ng-submit="challengeHostTeams.createNewTeam()">
<div class="input-field align-left">
<input id="name" type="text" class="validate text-dark-black dark-autofill w-400" ng-model="challengeHostTeams.team.name" ng-pattern="/^[\w -.]*$/" focus-if>
<span class="form-icon form-icon-dark"><i class="fa fa-user"></i></span>
<label for="name" data-error="wrong" data-success="right">Team Name*</label>
<div class="wrn-msg text-highlight" ng-show="challengeHostTeams.team.error">{{challengeHostTeams.team.error}}</div>
</div>
<div class="input-field align-left">
<input id="url" type="text" class="validate text-dark-black dark-autofill w-400" ng-model="challengeHostTeams.team.url" focus-if>
<span class="form-icon form-icon-dark"><i class="fa fa-link"></i></span>
<label for="url" 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">Create Host Team</button>
<!--
<span ng-hide="auth.isConfirm" class="fade"> {{auth.confirmMsg}}</span> -->
</div>
</form>
</div>
</div>
</div>
</div>
</section>