extends ../layout

block content
	.content.content-alt
		.container
			.row
				.col-md-10.col-md-offset-1
					.card(ng-controller="GroupMembersController")
						.page-header
							.pull-right(ng-cloak)
								small(ng-show="selectedUsers.length == 0") You have added <strong>{{ users.length }}</strong> of <strong>{{ groupSize }}</strong> available members
								a.btn.btn-danger(
									href,
									ng-show="selectedUsers.length > 0"
									ng-click="removeMembers()"
								) Remove from group
							h1 Group Account

						.row-spaced-small
							ul.list-unstyled.structured-list(
								select-all-list,
								ng-cloak
							)
								li.container-fluid
									.row
										.col-md-5
											input.select-all(
												select-all,
												type="checkbox"
											)
											span.email EMAIL
										.col-md-5
											span.name NAME
										.col-md-2
											span.registered REGISTERED
								li.container-fluid(
									ng-repeat="user in users | orderBy:'email':true",
									ng-controller="GroupMemberListItemController"
								)
									.row
										.col-md-5
											input.select-item(
												select-individual,
												type="checkbox",
												ng-model="user.selected"
											)
											span.email {{ user.email }}
										.col-md-5
											span.name {{ user.first_name }} {{ user.last_name }}
										.col-md-2
											span.registered
												i.fa.fa-check.text-success(ng-show="!user.holdingAccount")
												i.fa.fa-times(ng-show="user.holdingAccount")
								li(
									ng-if="users.length == 0",
									ng-cloak
								)
									.row
										.col-md-12.text-centered
											small No members

						div(ng-if="users.length < groupSize", ng-cloak)
							hr
							p
								.small Add more members
								form.form
									.row
										.col-xs-6
											input.form-control(
												name="email",
												type="text",
												placeholder="jane@example.com, joe@example.com",
												ng-model="inputs.emails",
												on-enter="addMembers()"
											)
										.col-xs-6
											button.btn.btn-primary(ng-click="addMembers()") Add

	script(type="text/javascript").
		window.users = !{JSON.stringify(users)};
		window.groupSize = #{subscription.membersLimit};