frontend/src/views/web/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>My Existing Participant Teams</strong></div>
<div class="loader-container card-loader-container" id="loader" ng-show="teams.isExistLoader" class="fade">
<!-- <div class="text-dark-gray center w-300 loader-title">{{teams.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">{{teams.paginationMsg}}</div>
<ul class="collapsible" data-collapsible="accordion">
<li ng-repeat="(key, value) in teams.existTeam.results">
<div class="collapsible-header"><i class="fa fa-lg fa-users" aria-hidden="true"></i>
<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="teams.confirmDelete($event, value.id)"><i class="fa fa-trash list-icon text-highlight w-300 right grey-text"></i></a>
<a ng-click="teams.showMdDialog($event, value.id)"><i class="fa fa fa-pencil list-icon text-highlight w-300 right grey-text"></i></a>
<a ng-click="teams.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>
</div>
<div class="clearfix"></div>
</div>
<div class="collapsible-body">
<h6><b>Team Members:</b></h6>
<p ng-repeat="member in value.members">{{member.member_name}}</p>
</div>
</li>
</ul>
<section class="pagination" ng-if="teams.showPagination">
<div class="row rm-gut">
<div class="col s12 m6 ">
<a ng-class="teams.isPrev" class="btn-floating btn-pagination waves-effect waves-light " ng-click="teams.load(teams.existTeam.previous)">
<i class="fa fa-chevron-left"></i>
</a>
<span class="pagination-title"> <strong class="text-med-black"> Page {{teams.currentPage | ceil}} of {{teams.existTeam.count/10 | ceil}} </strong></span>
<a ng-class="teams.isNext" class="btn-floating btn-pagination waves-effect waves-light " ng-click="teams.load(teams.existTeam.next)">
<i class="fa fa-chevron-right"></i>
</a>
</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 Participant Team</strong></div>
<div class="loader-container card-loader-container" id="loader" ng-show="teams.isLoader" class="fade">
<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="teams.createNewTeam()">
<div class="input-field align-left">
<input id="name" type="text" class="validate text-dark-black dark-autofill w-400" ng-model="teams.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="teams.team.error">{{teams.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="teams.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 Participant Team</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Dialog Box Code -->
<div style="visibility: hidden">
<div class="md-dialog-container" id="myDialog">
<md-dialog layout-padding>
<h2></h2>
<p></p>
</md-dialog>
</div>
</div>
<!-- simple loader -->
<div class="loader-container" id="sim-loader">
<div class="text-white center w-300 loader-title">Loading</div>
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>