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

{% block content %}

	<div class="supsystic-item tables-view">
		<div class="supContainer-fluid">
			<div class="supRow">
				<div class="supXs12">
					<div class="table-title-wrap">
						<form action="{{ environment.generateUrl('settings', 'saveSettings') }}" method="POST">
                            {% block beforeSettingsList %}
								<button class="button">
									<i class="fa fa-fw fa-save"></i>
                                    {{ environment.translate('Save') }}
								</button>
							{% endblock %}
							<div class="settings-list">
								{% block beforeSettings %}{% endblock %}
								<div class="setting">
									<div class="table-search-option table-option">
										<div class="setting-description">
											<label>{{ environment.translate('Include to Global Search') }}</label>
                                            {{ tooltip.icon(environment.translate('Enable this option if you want to include the tables data to global site search'), 'top', true) }} </label>
										</div>
										<div class="setting-control">
											<input type="checkbox"  name="settings[table_search]" {% if settings.table_search == 'on' %} checked {%  endif %}>
										</div>
									</div>
                                    <div class="table-disable-wp-footer-fix-option table-option">
                                        <div class="setting-description">
                                            <label>{{ environment.translate('Disable WP Footer Fix') }}</label>
                                            {{ tooltip.icon(environment.translate('Standard WP theme must call the wp_footer() function in site footer (see <a href="%s" target="_blank">Theme Development</a>). But sometimes it is not happen in custom themes. In this case our plugin will call its function forced, because it needs it for correct work as the many other plugins. But if you have the problems in your site because of this feature - just enable this option to disable force call of wp_footer() function by our plugin.') | format('//codex.wordpress.org/Theme_Development'), 'top', true) }} </label>
                                        </div>
                                        <div class="setting-control">
                                            <input type="checkbox"  name="settings[disable_wp_footer_fix]" {% if settings.disable_wp_footer_fix == 'on' %} checked {%  endif %}>
                                        </div>
                                    </div>
                                    <div class="table-disable-wp-footer-fix-option table-option">
                                        <div class="setting-description">
                                            <label>{{ environment.translate('Show promo link') }}</label>
                                            {{ tooltip.icon(environment.translate('To promote our plugin, you can show the promo link below the table, if you don\'t want to show the promo link you can also hide it. You can completely remove the link under the table by purchasing the PRO version of the plugin. Thank you for cooperation!'), 'top', true) }} </label>
                                        </div>
                                        <div class="setting-control">
                                            <input type="checkbox"  name="settings[add_love_link]" {% if settings.add_love_link == 'on' %} checked {%  endif %}>
                                        </div>
                                    </div>
                                    <div class="table-disable-wp-footer-fix-option table-option">
                                        <div class="setting-description">
                                            <label>{{ environment.translate('Remove promo link') }}</label>
                                            {{ tooltip.icon(environment.translate('If you want to delete promo link below the table from HTML just check this box. Only for PRO users.'), 'top', true) }} </label>
                                            {% if environment.isPro() == false %}
                                                <a target="_blank" href="{{ build_pro_url({ 'utm_medium': 'load_by_ajax_enabled' }) }}">
                                                    {{ environment.translate('PRO option') }}
                                                </a>
                                            {% endif %}
                                        </div>
                                        <div class="setting-control">
                                            {% if environment.isPro() == false %}
                                                <input type="checkbox" disabled value=""/>
                                            {% else %}
                                                <input type="checkbox"  name="settings[remove_love_link]" {% if settings.remove_love_link == 'on' %} checked {%  endif %}>
                                            {% endif %}
                                        </div>
                                    </div>
									<div class="table-pagination-option table-option">
										<div class="setting-description">
											<label>{{ environment.translate('Pagination in Editor') }}</label>
												{{ tooltip.icon('Add pages to your table in Editor', 'top', true) }}
											</label>
										</div>
										<div class="setting-control">
											<input type="checkbox" name="settings[editor_pagination]" {% if settings.editor_pagination == 'on' %} checked {%  endif %}>
											<div style="margin-top: 10px;">
                                                <input type="text"
                                                       name="settings[editor_pagination_rows]"
                                                       id="settings_editor_pagination_rows"
                                                       style="width:60px"
                                                       value="{{ settings.editor_pagination_rows | default('500') }}" />
                                                <label for="settings_editor_pagination_rows"> {{ environment.translate('rows per page') }}</label>
											</div>
										</div>
									</div>
									<div class="table-step-option table-option">
										<div class="setting-description">
											<label>{{ environment.translate('Rows Count per Request') }}</label>
                                            {{ tooltip.icon(environment.translate('Set the count of table rows, which will be put into the one saving request. If your table has more rows - as many requests will be sent as need to completely save all table data.<br /><br /> It can be useful if you have a large table and can not improuve your server settings to save the table per single request.<br /><br /> If you do not have problems with saving of tables it is better to left the default value - 400. <a href="https://supsystic.com/documentation/rows-per-request-feature-solution-large-tables/" target="_blank">Read more</a>'), 'top', true) }} </label>
										</div>
										<div class="setting-control">
											<input type="text"  name="settings[table_step]" value="{{ settings.table_step | default(400) }}">
										</div>
									</div>
                                    <div class="table-global-page-search-option table-option">
                                        <div class="setting-description">
                                            <label>{{ environment.translate('Global Page Search Form') }}</label>
                                            {{ tooltip.icon(environment.translate('Use this form to make global search by all tables on page'), 'top', true) }}

                                            {% if environment.isPro() == false %}
                                                <a target="_blank" href="{{ build_pro_url({ 'utm_medium': 'global_page_search' }) }}">
                                                    {{ environment.translate('PRO option') }}
                                                </a>
                                            {% endif %}
                                        </div>
                                        <div class="setting-control">
                                            <input type="text" value="{{ '[supsystic-tables-global-page-search]' }}" class="stbCopyTextCode" readonly="readonly" />
                                        </div>
                                    </div>
                                    <div class="table-load-ajax-enabled table-option">
                                        <div class="setting-description">
                                            <label>{{ environment.translate('Load by AJAX enable') }}</label>
                                            {{ tooltip.icon(environment.translate('Allow loading posts/pages with tables through AJAX. Important: the assets-shortcode must be specified in the parent page.'), 'top', true) }}

                                            {% if environment.isPro() == false %}
                                                <a target="_blank" href="{{ build_pro_url({ 'utm_medium': 'load_by_ajax_enabled' }) }}">
                                                    {{ environment.translate('PRO option') }}
                                                </a>
                                            {% endif %}
                                        </div>
                                        <div class="setting-control">
                                            {% if environment.isPro() == false %}
                                                <input type="checkbox" disabled value=""/>
                                            {% else %}
                                                <input type="checkbox" name="settings[load_by_ajax_enabled]" {% if settings.load_by_ajax_enabled == 'on' %} checked {%  endif %}>
                                                <input type="text" value="{{ '[supsystic-tables-assets]' }}" class="stbCopyTextCode" readonly="readonly" style="width:250px"/>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="table-roles-option table-option">
                                        <div class="setting-description">
                                            <label>{{ environment.translate('Roles') }}</label>
                                            {{ tooltip.icon(environment.translate('Set the users roles, to add permission to use the plugin. The Administrator role has set 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">
                                            {% if environment.isPro() != false %}
                                                <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>
                                                    {% for role, title in wpRoles %}
                                                        {% if role != 'administrator' %}
                                                            <option value="{{ role }}"
                                                                    {% if role in settings.access_roles %}
                                                                        selected="selected"
                                                                    {% endif %}
                                                                    >{{ title }}
                                                            </option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select>
                                            {% endif %}
                                        </div>
                                    </div>
								</div>

								{% block afterSettings %}{% endblock %}
							</div>
							{% block afterSettingsList %}{% endblock %}
						</form>
						<div class="clear"></div>
						<!-- /.clear -->
					</div>
					<!-- /.table-title-wrap -->
				</div>
				<!-- /.supXs12 -->
			</div>
		</div>
	</div>
	<!-- /.supsystic-item -->
{% endblock %}