extends ../layout

block content
	.content.content-alt
		.container
			.row
				.col-md-10.col-md-offset-1
					h1 #{name || translate(translations.title)}
					.card(ng-controller="UserMembershipController")
						.page-header
							.pull-right(ng-cloak)
								small(ng-show="groupSize && selectedUsers.length == 0") !{translate("you_have_added_x_of_group_size_y", {addedUsersSize:"<strong>{{ users.length }}</strong>", groupSize:"<strong>{{ groupSize }}</strong>"})}
								a.btn.btn-danger(
									href,
									ng-show="selectedUsers.length > 0"
									ng-click="removeMembers()"
								) #{translate(translations.remove)}
							h3 #{translate(translations.subtitle)}

						.row-spaced-small
							div(ng-if="inputs.removeMembers.error", ng-cloak)
								div.alert.alert-danger(ng-if="inputs.removeMembers.errorMessage")
									| #{translate('error')}:
									| {{ inputs.removeMembers.errorMessage }}
								div.alert.alert-danger(ng-if="!inputs.removeMembers.errorMessage")
									| #{translate('generic_something_went_wrong')}
							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.header #{translate("email")}
										.col-md-5
											span.header #{translate("name")}
										.col-md-2
											span.header #{translate("accepted_invite")}
								li.container-fluid(
									ng-repeat="user in users | orderBy:'email':true",
									ng-controller="UserMembershipListItemController"
								)
									.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.invite" aria-hidden="true")
												span.sr-only(ng-show="!user.invite") #{translate('accepted_invite')}
												i.fa.fa-times(ng-show="user.invite" aria-hidden="true")
												span.sr-only(ng-show="user.invite") #{translate('invite_not_accepted')}
								li(
									ng-if="users.length == 0",
									ng-cloak
								)
									.row
										.col-md-12.text-centered
											small #{translate("no_members")}

						hr
						div(ng-if="!groupSize || users.length < groupSize", ng-cloak)
							p.small #{translate("add_more_members")}
							div(ng-if="inputs.addMembers.error", ng-cloak)
								div.alert.alert-danger(ng-if="inputs.addMembers.errorMessage")
									| #{translate('error')}:
									| {{ inputs.addMembers.errorMessage }}
								div.alert.alert-danger(ng-if="!inputs.addMembers.errorMessage")
									| #{translate('generic_something_went_wrong')}
							form.form
								.row
									.col-xs-6
										input.form-control(
											name="email",
											type="text",
											placeholder="jane@example.com, joe@example.com",
											ng-model="inputs.addMembers.content",
											on-enter="addMembers()"
											aria-describedby="add-members-description"
										)
									.col-xs-4
										button.btn.btn-primary(ng-click="addMembers()") #{translate("add")}
									.col-xs-2(ng-if="paths.exportMembers", ng-cloak)
										a(href=paths.exportMembers) #{translate('export_csv')}
								.row
									.col-xs-8
										span.help-block #{translate('add_comma_separated_emails_help')}

						div(ng-if="groupSize && users.length >= groupSize && users.length > 0", ng-cloak)
							.row
								.col-xs-2.col-xs-offset-10(ng-if="paths.exportMembers", ng-cloak)
									a(href=paths.exportMembers) #{translate('export_csv')}
									

	script(type="text/javascript").
		window.users = !{JSON.stringify(users)};
		window.paths = !{JSON.stringify(paths)};
		window.groupSize = #{groupSize || 'null'};