frontend/src/views/web/challenge/participate.html
<div class="loader-container card-loader-container" id="loader" ng-show="challenge.isExistLoader" class="fade">
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<section ng-if="isAuth &&challenge.isActive" class="ev-sm-container ev-view challenge-container">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
<div ng-if="challenge.isParticipated">
<p class="fs-16 w-300">You have already participated in this challenge.</p>
</div>
<div ng-if="!challenge.isParticipated">
<div class="row margin-bottom-cancel">
<div class="col s12 m6 l6">
<div class="row">
<h5 class="w-300">My Participant Teams</h5>
</div>
<div class="row">
<form>
<div ng-if="!showPagination" class="page-msg fs-16 w-300">{{challenge.paginationMsg}}
</div>
<ul>
<li ng-repeat="(key, value) in challenge.existTeam.results">
<div class="row margin-0">
<div class="col s12 m12 l8">
<div class="card-panel margin-0">
<input type="radio" name="selectExistTeam" class="with-gap selectTeam"
id="{{value.id}}" value="{{value.id}}" ng-model="challenge.teamId">
<label for="{{value.id}}"></label>
<div ng-if="value.team_url != ''" class="show-member-title pointer">
<strong class="fs-16 w-300">Team: </strong><a class="orange-text"
href="{{value.team_url}}"
target="_blank">{{value.team_name}}</a>
<br>
<strong class="fs-16 w-300">Created By:
</strong>{{value.created_by}}
</div>
<div ng-if="value.team_url == ''" class="show-member-title pointer">
<strong class="fs-16 w-300">Team: </strong>{{value.team_name}}
<br>
<strong class="fs-16 w-300">Created By:
</strong>{{value.created_by}}
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</li>
</ul>
<div class="row">
<div class="col s12">
<button ng-disabled="!challenge.teamId" ng-if="challenge.existTeam.results.length"
class="waves-effect waves-dark btn ev-btn-dark w-300 fs-14" type="submit"
ng-click="challenge.termsAndConditionDialog($event)"
value="Submit">Continue</button>
<br>
<span class="text-dark-black"><strong>{{challenge.existTeamError}}</strong></span>
</div>
</div>
<section class="pagination" ng-if="challenge.showPagination">
<div class="row rm-gut">
<div class="col s12 m6 ">
<a ng-class="challenge.isPrev"
class="btn-floating btn-pagination waves-effect waves-light "
ng-click="challenge.load(challenge.existTeam.previous)">
<i class="fa fa-chevron-left"></i>
</a>
<span class="pagination-title"> <strong class="fs-16 w-300"> Page
{{challenge.currentPage | ceil}} of
{{challenge.existTeam.count/10 | ceil}} </strong></span>
<a ng-class="challenge.isNext"
class="btn-floating btn-pagination waves-effect waves-light "
ng-click="challenge.load(challenge.existTeam.next)">
<i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</section>
</form>
</div>
</div>
<div class="col s12 m6">
<div class="row">
<h5 class="w-300">Create New Team</h5>
</div>
<form ng-submit="challenge.createNewTeam()">
<div class="row">
<div class="input-field align-left col s12 m12 l8">
<input id="name" type="text" class="validate fs-16 dark-autofill w-300"
ng-model="challenge.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">
{{challenge.team.error}}</div>
</div>
</div>
<div class="row">
<div class="input-field align-left col s12 m12 l8">
<input id="url" type="text" class="validate fs-16 dark-autofill w-300"
ng-model="challenge.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>
<div class="row">
<div class="col s12 m6 l6 align-left reg-control">
<button class="waves-effect waves-dark btn ev-btn-dark w-300 fs-16" type="submit"
value="Submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section ng-if="!challenge.isActive" class="ev-sm-container ev-view challenge-container">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
<p class="fs-16 w-300">Sorry, the challenge is not active.</p>
</div>
</section>
<section ng-if="!isAuth" class="ev-sm-container ev-view challenge-container">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
<p ng-if="!isAuth" class="fs-16 w-300">Please <a ui-sref="auth.login" class="blue-text"
ui-sref-active="active-auth" ng-click="auth.resetForm()">log in</a> to participate in this challenge.
</p>
</div>
</section>