{% extends 'base.html' %}

{% block body %}

<div class="btn-toolbar mb-2">
	<a class="btn btn-primary ml-auto" href="{{ url_for("invite.new") }}"><i class="fa fa-plus" aria-hidden="true"></i> {{_('New')}}</a>
</div>
<div class="table-responsive">
	<table class="table">
		<thead>
			<tr>
				<th scope="col">{{_('Link')}}</th>
				<th scope="col">{{_('Created by')}}</th>
				<th scope="col">{{_('Permissions')}}</th>
				<th scope="col">{{_('Usages')}}</th>
				<th scope="col">{{_('Status')}}</th>
				<th scope="col"></th>
			</tr>
		</thead>
		<tbody>
			{% for invite in invites|sort(attribute='created', reverse=True)|sort(attribute='active', reverse=True) %}
			<tr>
				<td>
					{% if invite.creator == request.user and invite.active %}
					<a href="{{ url_for('invite.use', invite_id=invite.id, token=invite.token) }}"><code>{{ invite.short_token }}</code></a>
					<button type="button" class="btn btn-link btn-sm p-0 copy-clipboard" data-copy="{{ url_for('invite.use', invite_id=invite.id, token=invite.token, _external=True) }}" title="{{_('Copy link to clipboard')}}"><i class="fas fa-clipboard"></i></button>
					<button type="button" class="btn btn-link btn-sm p-0" data-toggle="modal" data-target="#modal-{{ invite.id }}-qrcode" title="{{_('Show link as QR code')}}"><i class="fas fa-qrcode"></i></button>
					{% else %}
					<code>{{ invite.short_token }}</code>
					{% endif %}
				</td>
				<td>
					{% if not invite.creator %}
						{{ '<deleted user>' }}
					{% else %}
						{{ invite.creator.loginname }}
					{% endif %}
				</td>
				<td>
					{{ _('Signup') if invite.allow_signup }}{{ ', ' if invite.allow_signup and invite.roles }}
					{% for role in invite.roles %}{{ ', ' if loop.index != 1 }}<i class="fas fa-key"></i>&thinsp;{{ role.name }}{% endfor %}
				</td>
				<td>
					<span style="white-space: nowrap;">{{ invite.signups|selectattr('completed')|list|length }} <i class="fas fa-users" title="user registrations"></i></span>,
					<span style="white-space: nowrap;">{{ invite.grants|length }} <i class="fas fa-key" title="role grants"></i></span>
				</td>
				<td>
					{% if invite.disabled %}
						{{_('Disabled')}}
					{% elif invite.voided %}
						{{_('Voided')}}
					{% elif invite.expired %}
						{{_('Expired')}}
					{% elif not invite.permitted %}
						{{_('Invalid, unpermitted creator')}}
					{% elif not invite.active %}
						{{_('Invalid')}}
					{% elif invite.single_use %}
						{{ _('Valid once, expires %(expiry_date)s', expiry_date=invite.valid_until.strftime('%Y-%m-%d')) }}
					{% else %}
						{{ _('Valid, expires %(expiry_date)s',expiry_date=invite.valid_until.strftime('%Y-%m-%d')) }}
					{% endif %}
				</td>
				<td class="text-right">
					<button type="button" class="btn btn-link btn-sm p-0" data-toggle="modal" data-target="#modal-{{ invite.id }}"><i class="fas fa-ellipsis-h"></i></button>
				</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
</div>

{% for invite in invites %}
<div class="modal" tabindex="-1" id="modal-{{ invite.id }}">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{_('Invite Link Details')}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<ul class="list-unstyled">
					<li><b>{{_('Type:')}}</b> {% if invite.single_use %}{{_('Single-use')}}{% else %}{{_('Multi-use')}}{% endif %}</li>
					<li><b>{{_('Created:')}}</b> {{ invite.created.strftime('%Y-%m-%d %H:%M:%S') }}</li>
					<li><b>{{_('Expires:')}}</b> {{ invite.valid_until.strftime('%Y-%m-%d %H:%M:%S') }}</li>
					<li><b>{{_('Permissions:')}}</b>
						<ul>
							{% if invite.allow_signup %}
							<li>{{_('Link allows account registration')}}</li>
							{% else %}
							<li>{{_('No account registration allowed')}}</li>
							{% endif %}
							{% for role in invite.roles %}
							<li>{{_('Link grants users the role "%(name)s"', name=role.name)}}</li>
							{% endfor %}
						</ul>
					</li>
					<li><b>Usages:</b>
						{% if not invite.signups and not invite.grants %}
						{{_('Never used')}}
						{% else %}
						<ul>
							{% for signup in invite.signups if signup.completed %}
							<li>{{_('Registration of user <a href="%(user_url)s">%(user_name)s</a>', user_url=url_for('user.show', id=signup.user.id)|e, user_name=signup.user.loginname|e)|safe}}</li>
							{% endfor %}
							{% for grant in invite.grants if grant.user %}
							<li>{{_('Roles granted to <a href="%(user_url)s">%(user_name)s</a>', user_url=url_for('user.show', id=grant.user.id)|e, user_name=grant.user.loginname|e)|safe}}</li>
							{% endfor %}
						</ul>
						{% endif %}
					</li>
				</ul>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				{% if invite.active %}
				<form action="{{ url_for('invite.disable', invite_id=invite.id) }}" method="POST">
				<button type="submit" class="btn btn-primary">{{_('Disable Link')}}</button>
				</form>
				{% elif invite.creator == request.user and not invite.expired and invite.permitted %}
				<form action="{{ url_for('invite.reset', invite_id=invite.id) }}" method="POST">
				<button type="submit" class="btn btn-primary">{{_('Reenable Link')}}</button>
				</form>
				{% endif %}
			</div>
		</div>
	</div>
</div>
{% endfor %}

{% for invite in invites if invite.creator == request.user %}
<div class="modal" tabindex="-1" id="modal-{{ invite.id }}-qrcode">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{_('Invite')}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				{{ url_for('invite.use', invite_id=invite.id, token=invite.token, _external=True)|qrcode_svg(width='100%', height='100%') }}
			</div>
		</div>
	</div>
</div>
{% endfor %}

<script>
$(".copy-clipboard").on("click", function() {
	navigator.clipboard.writeText($(this).data("copy"));
});
</script>
{% endblock %}