{% extends 'layouts/layout.twig' %}
{% block title %}{{ __('User') }}{% endblock %}

{% block content %}
	 
	<section class="pa3">

		<div class="mh3">

			<h1>{{ __('All Users') }} </h1>
				
			<div id="userlist" v-cloak>

				<div class="mb3">
					<searchbox :error="error"></searchbox>
				</div>

			  	<div class="overflow-auto">
			  		<usertable :userdata="userdata"></usertable>
				</div>
				
				<ul class="list pl0" v-if="showpagination">
					<pagination
						v-for="page in pages"
						v-bind:key="page"
						v-bind:page="page"
					></pagination>
				</ul>

			</div>
				
			<div class="mv4">
				<a class="button dib" href="{{ path_for('user.new') }}">{{ __('Create New User') }}</a>
			</div>

		</div>

		<input id="path" type="hidden" value="{{ item.urlRel }}" required readonly />
		{{ csrf_field() | raw }}
		
	</section>
	
{% endblock %}

{% block javascript %}

	<script>
      		let usernames = {{ users|json_encode() }};
      		let userroles = {{ userroles|json_encode() }};
	</script>
	<script src="{{ base_url }}/system/author/js/vue-userlist.js"></script>

{% endblock %}