<div ng-controller="projectTeamCtrl">
	<div class="row">
		<div class="col-sm-12 mb-2">
			<a class="btn btn-success float-right" name="add_team_members_link" visible="0" href="/projects/{id}/edit#/tabRolesRights">
				<ion-icon name="add-outline"></ion-icon>
				<txt name="projects:team:add_team_member">Add Team Member</txt>
			</a>
		</div>
	</div>
	<!-- Team Modal -->
	<div class="modal fade" id="teamModal" tabindex="-1" role="dialog" aria-labelledby="teamModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="teamModalLabel" name="projects:team:team_member">[Team Member]</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Cancel">
						<span aria-hidden="true">
							<ion-icon name="close-outline"></ion-icon>
						</span>
					</button>
				</div>

				<form action="" class="form-horizontal">
					<div class="modal-body">
						<div ng-if="project_member_perms.fullname" id="single_user" class="form-group row">
							<label for="singleUser" class="col-md-3"><txt name="projects:team:user">[User]</txt></label>

							<div class="col-md-9">
								<div>
									<a href="{{user_values.profile_url}}" id="singleUser" data-userId="{{user_values.user_id}}">{{user_values.name}}</a>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<label for="inputResponsibility" class="col-md-3 col-form-label"><txt name="projects:team:responsibility">[Responsibility]</txt></label>

							<div class="col-md-9">
								<select style="width:100%;" class="form-control" ng-model="user_values.responsibility" id="inputResponsibility"></select>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal"><txt name="projects:team:cancel">[Cancel]</txt></button>

						<button type="button" class="btn btn-primary" ng-click="editMembers($event);"><txt name="projects:team:save_changes">[Save changes]</txt></button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- / Team Modal -->

	<div class="panel panel-default panel-in-tab">
		<div id="team-list-spinner" class="spinner team-list-spinner">
			<div><lmsg src="common.loading">_Loading...</lmsg></div>
		</div>
		<div class="scrollable">
		<table id="team-list-table" class="table table-hover table-striped">
			<colgroup>
				<col width="40" ng-if="project_member_perms.fullname" />
				<col ng-if="project_member_perms.fullname">
				<col>
				<col>
				<col ng-if="project_member_perms.landline">
				<col ng-if="project_member_perms.mobile">
				<col ng-if="project_member_perms.email">
				<col width="50">
			</colgroup>
			<thead>
				<tr>
					<th ng-if="project_member_perms.fullname"></th>
					<th ng-if="project_member_perms.fullname"><txt name="projects:team:name">[Name]</txt></th>
					<th><txt name="projects:team:project_role">[Project Role]</txt></th>
					<th><txt name="projects:team:responsibility">[Responsibility]</txt></th>
					<th ng-if="project_member_perms.landline"><txt name="projects:team:phone">[Phone]</txt></th>
					<th ng-if="project_member_perms.mobile"><txt name="projects:team:mobile">[Mobile]</txt></th>
					<th ng-if="project_member_perms.email"><txt name="projects:team:email">[Email]</txt></th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr dir-paginate="member in project_members | itemsPerPage: pageSize"
				    total-items="memberCount"
				    current-page="currentPage"
				    pagination-id="team_pagination"
				>
					<td ng-if="project_member_perms.fullname">
						<a href="{{member.profile_url}}"> <img class="table-avatar" ng-src="{{member.avatar_url}}" alt="" width="18"></a>
					</td>
					<td ng-if="project_member_perms.fullname">
						<a href="{{member.profile_url}}">{{member.full_name}}</a>
					</td>

					<td><span ng-repeat="role in member.project_roles" class="badge badge-pill mr-1 text-white team-role-variants team-role-variant-{{getColourForRole(role.name)}}">{{role.name}}</span></td>

					<td>{{member.project_responsibility}}</td>
					<td ng-if="project_member_perms.landline" ng-bind-html="member.landline | sanitize">{{member.landline}}</td>
					<td ng-if="project_member_perms.mobile" ng-bind-html="member.mobile | sanitize"></td>
					<td ng-if="project_member_perms.email"><a href="mailto:{{member.email}}">{{member.email}}</a></td>
					<td>
						<a href="#" ng-if="project_perms.can_edit_team" id="edit-link-{{member.user_id}}" ng-click="showEditMember($event, member)" rel="tooltip" name="projects:team:Edit" title="[Edit]">
							<ion-icon name="create-outline"></ion-icon>
						</a>
					</td>
				</tr>
			</tbody>
		</table>
		</div>
		<div class="text-center clearfix">
			<dir-pagination-controls
					on-page-change="pageChanged(newPageNumber)"
					template-url="/intranet/projects/html/components/project_list/pagination.html"
					pagination-id="team_pagination"
			>
			</dir-pagination-controls>
		</div>
	</div>

</div>
