{% extends '/wpadmin/plugin_pages/base_inner_page.twig' %}

{% block inner_page_body %}
	<style>
		    .blink {
				animation: blinker 2s infinite;
			}
			@keyframes blinker {
				from {
					opacity: 1.0;
				}
				50% {
					opacity: 0.25;
				}
				to {
					opacity: 1.0;
				}
			}
	</style>
	<div id="SectionTrafficLiveLogs">
		<div class="row">
			<div class="col">
				{% if not flags.is_enabled %}
					<div class="alert alert-secondary d-inline-block">
						{{ strings.not_enabled }}
						<a href="javascript:{}"
						   class="zone_component_action"
						   data-zone_component_action="offcanvas_zone_component_config"
						   data-zone_component_slug="request_live_logging"
						   title="{{ strings.toggle_live_log }}"
						>{{ strings.toggle_live_log }}</a>
					</div>
				{% endif %}
				<div class="text-start">
					<span class="font-monospace">&gt;</span> <span class="blink text-start">&hellip;</span>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="live_logs">
					<div class="output w-100 font-monospace"></div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}