<div class="form-horizontal">
	<div class="lt-module-page__top lt-module-page-top">
		<div class="lt-module-page-top__title mr-auto">
			<h1>{{'Achievements' | translate}}</h1>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6 col-sm-12">
			<div class="panel lt-module-page__content-panel">
				<div class="panel-heading">
					{{'Badges' | translate}}
				</div>
				<table class="table">
					<thead>
						<tr>
							<th>#</th>
							<th>{{'Title' | translate}}</th>
							<th>{{'Edit' | translate}}</th>
							<th>{{'Delete' | translate }}</th>
						</tr>
					</thead>
					<tbody class="valign-middle">
						<tr ng-repeat="item in badges | orderBy: 'title':false  | pagination: currentPageBadge * numPerPage | limitTo: numPerPage">
							<td>{{$index+1}}</td>
							<td>
								<img ng-src="{{item.picture}}" alt="" style="width:26px;height:26px;" class="rounded">&nbsp;&nbsp;
								<a href="" ng-click="setEdit('editbadge',item)">{{item.title}}</a>
							</td>
							<td><span class="glyphicon glyphicon-pencil showHand" aria-hidden="true" ng-click="setEdit('editbadge',item)"></span></td>
							<td><span class="glyphicon glyphicon-trash showHand" ng-click="deleteItem('badge', item)"></span></td>
						</tr>
					</tbody>
				</table>
				<br />
				<wizdom365-gf-pagination ng-hide="badges.length <= numPerPage" items="badges" current-page="currentPageBadge" num-per-page="numPerPage"></wizdom365-gf-pagination>
			</div>
		</div>

		<div class="col-md-6 col-sm-12">
			<div class="panel lt-module-page__content-panel">
				<div class="panel-heading">
					{{'Create badge' | translate}}
				</div>

				<form role="form" name="badgeform">
					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Title' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<input type="text" class="form-control" ng-model="editbadge.title" required />
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Description' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<input type="text" class="form-control" ng-model="editbadge.description" required />
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Picture' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<div class="dropdown" dropdown>
								<a class="btn btn-default dropdown-toggle" dropdown-toggle href="">
									<span ng-hide="editbadge.picture">{{'Select picture' | translate}}</span>
									<span ng-show="editbadge.picture"><img height="30" width="30" ng-src="{{editbadge.picture}}" /></span>
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu" role="menu" style="height:100px;overflow-y:scroll;">
									<li ng-repeat="flag in imageBadges" ng-click="editbadge.picture = flag.path">
										<a href=""><img height="30" width="30" ng-src="{{flag.path}}" /></a>
									</li>
								</ul>
								<input type="hidden" ng-model="editbadge.picture" required />
							</div>
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Expires' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios" ng-value="true" ng-model="editbadge.expires" required>
									{{'Yes' | translate}}
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios" ng-value="false" ng-model="editbadge.expires" required>
									{{'No' | translate}}
								</label>
							</div>
						</div>
					</div>

					<div ng-show="editbadge.expires">
						<div class="form-group row">
							<div class="col-sm-4">
								<label class="control-label">{{'Period' | translate}}</label>
							</div>
							<div class="col-sm-8">
								<select ng-model="editbadge.expireType.period" class="form-control" ng-required="editbadge.expires">
									<option value="1">{{'Year' | translate}}</option>
									<option value="2">{{'Month' | translate}}</option>
									<option value="3">{{'Week' | translate}}</option>
									<option value="4">{{'Day' | translate}}</option>
								</select>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-sm-4">
								<label class="control-label">{{'Number of periods' | translate}}</label>
							</div>
							<div class="col-sm-8">
								<input type="number" class="form-control" ng-model="editbadge.expireType.number" ng-required="editbadge.expires" />
							</div>
						</div>
					</div>
				</form>
				<div class="btn-toolbar">
					<button ng-disabled="!badgeform.$valid" type="button" class="btn btn-success" ng-hide="editbadge.id > 0" ng-click="achievementModal('badge')">{{'Add badge' | translate}}</button>
					<button ng-disabled="!badgeform.$valid" type="button" class="btn btn-success" ng-show="editbadge.id > 0" ng-click="achievementModal('badge')">{{'Update badge' | translate}}</button>
					<button type="button" class="btn btn-danger" ng-show="editbadge.id > 0" ng-click="editbadge = {}">{{'Cancel' | translate}}</button>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6 col-sm-12">
			<div class="panel lt-module-page__content-panel">
				<div class="panel-heading">
					{{'Certificates' | translate}}
				</div>
				<table class="table">
					<thead>
						<tr>
							<th>#</th>
							<th>{{'Title' | translate}}</th>
							<th>{{'Edit' | translate}}</th>
							<th>{{'Delete' | translate }}</th>
						</tr>
					</thead>
					<tbody class="valign-middle">
						<tr ng-repeat="item in certificates  | orderBy: 'title':false  | pagination: currentPageCertificate * numPerPage | limitTo: numPerPage">
							<td>{{$index+1}}</td>
							<td>
								<img ng-src="{{item.picture}}" alt="" style="width:26px;height:26px;" class="rounded">&nbsp;&nbsp;
								<a href="" ng-click="setEdit('editCertificate',item)">{{item.title}}</a>
							</td>
							<td><span ng-click="setEdit('editCertificate',item)" class="glyphicon glyphicon-pencil showHand"></span></td>
							<td><span class="glyphicon glyphicon-trash showHand" ng-click="deleteItem('certificate', item)"></span></td>
						</tr>
					</tbody>
				</table>
				<br />
				<wizdom365-gf-pagination ng-hide="certificates.length <= numPerPage" items="certificates" current-page="currentPageCertificate" num-per-page="numPerPage"></wizdom365-gf-pagination>
			</div>
		</div>

		<div class="col-md-6 col-sm-12">
			<div class="panel lt-module-page__content-panel">
				<div class="panel-heading">
					{{'Create certificate' | translate}}
				</div>

				<form role="form" name="certform">
					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Title' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<input type="text" class="form-control" required ng-model="editCertificate.title" />
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Description' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<input type="text" class="form-control" required ng-model="editCertificate.description" />
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Picture' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<div class="dropdown" dropdown>
								<a class="btn btn-default dropdown-toggle" dropdown-toggle href="">
									<span ng-hide="editCertificate.picture">Select picture</span>
									<span ng-show="editCertificate.picture"><img height="30" width="30" ng-src="{{editCertificate.picture}}" /></span>
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu" role="menu" style="height:100px;overflow-y:scroll;">
									<li ng-repeat="flag in imageBadges" ng-click="editCertificate.picture = flag.path">
										<a href=""><img height="30" width="30" ng-src="{{flag.path}}" /></a>
									</li>
								</ul>
								<input type="hidden" ng-model="editCertificate.picture" required />
							</div>
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Expires' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios" ng-value="true" ng-model="editCertificate.expires">
									{{'Yes' | translate}}
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios" ng-value="false" ng-model="editCertificate.expires">
									{{'No' | translate}}
								</label>
							</div>
						</div>
					</div>

					<div ng-show="editCertificate.expires">
						<div class="form-group row">
							<div class="col-sm-4">
								<label class="control-label">{{'Number of periods' | translate}}</label>
							</div>
							<div class="col-sm-8">
								<select ng-model="editCertificate.expireType.period" class="form-control">
									<option value="1">{{'Year' | translate}}</option>
									<option value="2">{{'Month' | translate}}</option>
									<option value="3">{{'Week' | translate}}</option>
									<option value="4">{{'Day' | translate}}</option>
								</select>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-sm-4">
								<label class="control-label">{{'Period' | translate}}</label>
							</div>
							<div class="col-sm-8">
								<input type="number" class="form-control" ng-model="editCertificate.expireType.number" />
							</div>
						</div>
					</div>
				</form>

				<div class="btn-toolbar">
					<button ng-disabled="!certform.$valid" type="button" class="btn btn-success" ng-hide="editCertificate.id > 0" ng-click="achievementModal('certificate')">{{'Add certificate' | translate}}</button>
					<button ng-disabled="!certform.$valid" type="button" class="btn btn-success" ng-show="editCertificate.id > 0" ng-click="achievementModal('certificate')">{{'Update certificate' | translate }}</button>
					<button type="button" class="btn btn-danger" ng-show="editCertificate.id > 0" ng-click="editCertificate = {}">{{'Cancel' | translate}}</button>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6 col-sm-12">
			<div class="panel lt-module-page__content-panel">
				<div class="panel-heading">
					{{'Skills' | translate}}
				</div>

				<table class="table">
					<thead>
						<tr>
							<th>#</th>
							<th>{{'Title' | translate}}</th>
							<th>{{'Edit' | translate}}</th>
							<th>{{'Delete' | translate }}</th>
						</tr>
					</thead>
					<tbody class="valign-middle">
						<tr ng-repeat="item in skills  | orderBy: 'title':false  | pagination: currentPageSkills * numPerPage | limitTo: numPerPage">
							<td>{{$index+1}}</td>
							<td>
								<img ng-src="{{item.picture}}" alt="" style="width:26px;height:26px;" class="rounded">&nbsp;&nbsp;
								<a href="" ng-click="setEdit('editSkill',item)">{{item.title}}</a>
							</td>
							<td><span ng-click="setEdit('editSkill',item)" class="glyphicon glyphicon-pencil showHand"></span></td>
							<td><span class="glyphicon glyphicon-trash showHand" ng-click="deleteItem('skill', item)"></span></td>
						</tr>
					</tbody>
				</table>
				<br />
				<wizdom365-gf-pagination ng-hide="skills.length <= numPerPage" items="skills" current-page="currentPageSkills" num-per-page="numPerPage"></wizdom365-gf-pagination>
			</div>
		</div>

		<div class="col-md-6 col-sm-12">
			<div class="panel lt-module-page__content-panel">
				<div class="panel-heading">
					<span class="panel-title">{{'Create skill' | translate}}</span>
				</div>

				<form name="skillform">
					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Title' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<input type="text" class="form-control" required ng-model="editSkill.title" />
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Description' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<input type="text" class="form-control" required ng-model="editSkill.description" />
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Picture' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<div class="dropdown" dropdown>
								<a class="btn btn-default dropdown-toggle" dropdown-toggle href="">
									<span ng-hide="editSkill.picture">{{'Picture' | translate}}</span>
									<span ng-show="editSkill.picture"><img height="60" width="60" ng-src="{{editSkill.picture}}" /></span>
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu" role="menu" style="height:100px;overflow-y:scroll;">
									<li ng-repeat="flag in imageBadges" ng-click="editSkill.picture = flag.path">
										<a href=""><img height="30" width="30" ng-src="{{flag.path}}" /></a>
									</li>
								</ul>
								<input type="hidden" ng-model="editSkill.picture" required />
							</div>
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-12">
							<label>{{'Levels' | translate}}</label>
							<div ng-show="!editSkill.levels.length">
								<i>{{'Please add some levels' | translate}}</i>
							</div>
							<ul class="list-group lt-list" ng-show="editSkill.levels.length">
								<li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="level in editSkill.levels">
									<div class="lt-flextable__row col1/2">
										<input type="text" class="form-control" ng-model="level.name" required placeholder="{{'Title' | translate}}" />
									</div>
									<div class="lt-flextable__row col1/2">
										<input type="number" class="form-control" ng-model="level.requiredProcent" required placeholder="{{'Required procent' | translate}}" />
									</div>
									<div class="lt-flextable__row colauto">
										<span class="streamline icon-bin-1 cursor-pointer" ng-click="deleteLevel(editSkill, $index)" aria-hidden="true"></span>
									</div>
								</li>
							</ul>
							<br />
							<button ng-click="addLevel()" class="btn btn-success">{{'Add level' | translate}}</button>
						</div>
					</div>

					<div class="form-group row">
						<div class="col-sm-4">
							<label class="control-label">{{'Depreciated over time' | translate}}</label>
						</div>
						<div class="col-sm-8">
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios" ng-value="true" ng-model="editSkill.isDegraded">
									{{'Yes' | translate}}
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios" ng-value="false" ng-model="editSkill.isDegraded">
									{{'No' | translate}}
								</label>
							</div>
						</div>
					</div>

					<div ng-show="editSkill.isDegraded">
						<div class="form-group row">
							<div class="col-sm-4">
								<label class="control-label">{{'Period' | translate}}</label>
							</div>
							<div class="col-sm-8">
								<select ng-model="editSkill.degradation.period" class="form-control">
									<option value="1">{{'Annually' | translate}}</option>
									<option value="2">{{'Biannual' | translate }}</option>
									<option value="3">{{'Quarterly' | translate}}</option>
									<option value="4">{{'Monthly' | translate}}</option>
								</select>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-sm-4">
								<label class="control-label">{{'Decrease' | translate}}</label>
							</div>
							<div class="col-sm-8">
								<input type="number" class="form-control" ng-model="editSkill.degradation.points" />
							</div>
						</div>
					</div>
				</form>
				<div class="btn-toolbar">
					<button ng-disabled="!skillform.$valid || editSkill.levels.length == 0" type="submit" class="btn btn-success" ng-hide="editSkill.id > 0" ng-click="achievementModal('skill')">{{'Add skill' | translate}}</button>
					<button ng-disabled="!skillform.$valid || editSkill.levels.length == 0" type="submit" class="btn btn-success" ng-show="editSkill.id > 0" ng-click="achievementModal('skill')">{{'Update skill' | translate}}</button>
					<button type="button" class="btn btn-danger" ng-show="editSkill.id > 0" ng-click="editSkill = {levels: []}">{{'Cancel' | translate}}</button>
				</div>
			</div>
		</div>
	</div>
</div>
