{% extends 'layout.twig' %}
{% import '@ui/tooltip.twig' as tooltip %}

{% block content %}

	<div class="vwklhtmltables-item tables-view">
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-12">
					<div class="table-title-wrap">
						<form action="{{ environment.generateUrl('settings', 'saveSettings') }}" method="POST">
                            {% block beforeSettingsList %}{% endblock %}
							<div class="settings-list">
								{% block beforeSettings %}{% endblock %}
								<div class="setting">
									<div class="setting-description">
										<label>{{ environment.translate('Roles') }}</label>
										{{ tooltip.icon(environment.translate('Role for users who can use plugin. Administrator is included by default'), 'top', true) }}

										{% if environment.isPro() == false %}
											<a target="_blank" href="{{ build_pro_url({ 'utm_medium': 'manage_roles' }) }}">
												{{ environment.translate('PRO option') }}
											</a>
										{% endif %}
										
									</div>
									<div class="setting-control">
										<select multiple="multiple" name="settings[access_roles][]" class="chosen-select" data-placeholder="{{ environment.translate('Select avalilable roles to use tables')}}">
											<option value="administrator" disabled selected>Administrator</option>
											{% set roles = {
												editor:'Editor',
												author:'Author',
												contributor:'Contributor',
												subscriber:'Subscriber'
											} %}
											{% for role, title in roles %}
												<option value="{{ role }}"
												{% if role in settings.access_roles %}
													selected="selected" 
												{% endif %}
												>{{ title }}
												</option>
											{% endfor %}
										</select>
									</div>
								</div>
								{% block afterSettings %}{% endblock %}
							</div>
							{% block afterSettingsList %}{% endblock %}
						</form>
						<div class="clear"></div>
						<!-- /.clear -->
					</div>
					<!-- /.table-title-wrap -->
				</div>
				<!-- /.col-xs-12 -->
			</div>
		</div>
	</div>
	<!-- /.vwklhtmltables-item -->
{% endblock %}