<?php
/**
 * Widget payload view.
 *
 * @since 2.0.0
 */
?>
<ul id="wu_payload" class="wu-widget-list wu-striped wu-m-0 wu--my-2 wu--mx-3">

	<li class="wu-p-4 wu-m-0" v-show="!loading" v-cloak>

	<pre id="wu_payload_content" v-html="payload" class="wu-overflow-auto wu-p-4 wu-m-0 wu-mt-2 wu-rounded wu-content-center wu-bg-gray-800 wu-text-white wu-font-mono wu-border wu-border-solid wu-border-gray-300 wu-max-h-screen wu-overflow-y-auto"></pre>

	</li>

	<div v-show="loading" class="wu-block wu-p-4 wu-py-8 wu-mb-0 wu-bg-white wu-text-center wu-my-4 wu-rounded">

	<span class="wu-blinking-animation wu-text-gray-600 wu-my-1 wu-mb-0 wu-text-2xs wu-uppercase wu-font-semibold" >

		<?php echo $loading_text; ?>

	</span>

	</div>

</ul>

<div class="wu-bg-gray-100 wu-px-4 wu-py-4 wu--m-3 wu-mt-3 wu-border-t wu-border-l-0 wu-border-r-0 wu-border-b-0 wu-border-gray-300 wu-border-solid">

	<textarea cols="100" rows="40" aria-hidden="true" class="screen-reader-text" id="hidden_textarea"><?php echo $payload; ?></textarea>

	<span>
	<button type="button" data-clipboard-action="copy" data-clipboard-target="#hidden_textarea" class="btn-clipboard button">
		<?php _e('Copy to the Clipboard', 'wp-ultimo'); ?>
	</button>
	</span>

</div>