<?php
/**
 * Jumper trigger view.
 *
 * @since 2.0.0
 */
?>
<small>
	<strong>
	<a id="wu-container-toggle" role="tooltip" aria-label='<?php _e('Toggle container', 'wp-ultimo'); ?>' href="#" class="wu-tooltip wu-inline-block wu-py-1 wu-pl-2 md:wu-pr-3 wu-uppercase wu-text-gray-600 wu-no-underline">

		<span title="<?php esc_attr_e('Boxed', 'wp-ultimo'); ?>" class="wu-use-container dashicons dashicons-wu-arrow-with-circle-left wu-text-sm wu-w-auto wu-h-auto wu-align-text-bottom wu-relative"></span>
		<span class="wu-font-bold wu-use-container">
		<?php esc_attr_e('Boxed', 'wp-ultimo'); ?>
		</span>

		<span title="<?php esc_attr_e('Boxed', 'wp-ultimo'); ?>" class="wu-no-container dashicons dashicons-wu-arrow-with-circle-right wu-text-sm wu-w-auto wu-h-auto wu-align-text-bottom wu-relative"></span>
		<span class="wu-font-bold wu-no-container">
		<?php esc_attr_e('Wide', 'wp-ultimo'); ?>
		</span>

	</a>
	</strong>
</small>

<style>
body.has-wu-container .wu-no-container {
	display: none;
}
body:not(.has-wu-container) .wu-use-container {
	display: none;
}
</style>

<script>
(function($) {

	$(document).ready(function() {

	$('#wu-container-toggle').on('click', function(e) {

		e.preventDefault();

		wu_block_ui('#wpcontent');

		$.ajax(ajaxurl + '?action=wu_toggle_container&nonce=<?php echo wp_create_nonce('wu_toggle_container'); ?>').done(function() {

		$('.wrap').toggleClass('admin-lg:wu-container admin-lg:wu-mx-auto');

		$('body').toggleClass('has-wu-container');

		wu_block_ui('#wpcontent').unblock();

		});;

	});

	});

}(jQuery));
</script>