{namespace speed=GeorgRinger\PageSpeed\ViewHelpers}

<div class="page-speed">
	<script type="text/javascript" src="../typo3conf/ext/page_speed/Resources/Public/js/main.js"></script>

	<div class="row">
		<div class="col-sm-4">
			<h1>{f:translate(key:'{lll}module.header')}</h1>

			<p class="lead">{f:translate(key:'{lll}module.description')}<br>

				<f:if condition="{configuration.demo}">
					<f:then>
						<f:be.infobox state="-1" title="{f:translate(key:'{lll}demo.header')}">{f:translate(key:'{lll}demo.description')}</f:be.infobox>
					</f:then>
					<f:else><code>{url}</code></f:else>
				</f:if>
			</p>

			<f:if condition="{result}">
				<f:if condition="{menu}">
					<div class="col-md-3">
						<div class="form-group">
							<label for="language">{f:translate(key:'{lll}language')}</label>

							<div class="form-control-wrap">
								<f:format.raw>{menu}</f:format.raw>
							</div>
						</div>
					</div>
				</f:if>

				<f:link.page class="btn btn-default pull-right" additionalParams="{clear:1}">
					<span class="t3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-cache-clear-impact-medium"></span>
					{f:translate(key:'{lll}cache.clear')}
				</f:link.page>
			</f:if>
		</div>
		<div class="col-sm-8">
			<f:if condition="{result}">
				<div id="chart-resources" style="width:100%;height:250px;"></div>
				<speed:chart.assets id="chart-resources" result="{result}" />
			</f:if>
		</div>

	</div>

	<f:if condition="{result}">
		<f:then>
			<div role="tabpanel">
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active">
						<a class="text-capitalize" href="#category-desktop" aria-controls="category-desktop" role="tab" data-toggle="tab"><i class="fa fa-desktop"></i>
							{f:translate(key:'{lll}strategy.desktop')}</a>
					</li>
					<li role="presentation" class="">
						<a class="text-capitalize" href="#category-mobile" aria-controls="category-mobile" role="tab" data-toggle="tab"><i class="fa fa-mobile"></i>
							{f:translate(key:'{lll}strategy.mobile')}</a>
					</li>
				</ul>
			</div>
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active" id="category-desktop">
					<f:render section="response" arguments="{response:result.desktop,strategy:'desktop',lll:lll}" />
				</div>
				<div role="tabpanel" class="tab-pane " id="category-mobile">
					<f:render section="response" arguments="{response:result.mobile,strategy:'mobile',lll:lll}" />
				</div>
			</div>
			<f:if condition="{cacheCleared}">
				<script type="text/javascript">
					top.TYPO3.Notification.info("{f:translate(key:'{lll}cache.clear.text')}", "", 3);
				</script>
			</f:if>
		</f:then>
		<f:else>
			<div class="alert alert-danger">
				<strong>{f:translate(key:'{lll}error.header')}</strong><br>
				<f:if condition="{error}">
					<f:translate key="{lll}{error}" default="{error}" />
				</f:if>
			</div>
			<h4>{f:translate(key:'{lll}troubleshooting.header')}</h4>

			<p>Used key: <code>{configuration.key}</code></p>

		</f:else>
	</f:if>
</div>
<script type="text/javascript">
	var calc = 1.422222222;

	TYPO3.jQuery(document).ready(function () {
		TYPO3.jQuery(".single-rule .title").click(function () {
			TYPO3.jQuery(this).children('i').toggleClass('fa-minus');
			TYPO3.jQuery(this).next('.description').toggle();
		});

		TYPO3.jQuery(".screenshot-toggle").click(function () {
			if (TYPO3.jQuery(this).hasClass('active')) {
				TYPO3.jQuery('.snapshot-rect').remove();
			} else {
				addOverlay(this, 'rects', '');
				addOverlay(this, 'rects-secondary', 'secondary');
			}
			TYPO3.jQuery(this).toggleClass('active');

		});
	});

	function addOverlay(link, attribute, additionalClass) {
		TYPO3.jQuery('.snapshot-rect').remove();
		var areas = TYPO3.jQuery(link).data(attribute).split(';');
		for (var i = 0; i < areas.length; i++) {
			var item = areas[i].split(',');
			TYPO3.jQuery("<div>")
					.addClass('snapshot-rect ' + additionalClass)
					.css({
						left: item[0] / calc,
						top: item[1] / calc,
						width: item[2] / calc,
						height: item[3] / calc
					})
					.insertAfter(TYPO3.jQuery('#screenshot-' + TYPO3.jQuery(link).data('strategy')));
		}
	}
</script>

<f:section name="response">
	<div class="form-section">

		<div class="row">
			<div class="col-sm-3">
				<ul class="score">
					<f:if condition="{response.scoreUsability}">
						<li>
							<span class="indicator color-{speed:indicator(number:response.scoreUsability)}">{response.scoreUsability}</span>
							{f:translate(key:'{lll}header.usability')}
						</li>
					</f:if>
					<f:if condition="{response.scoreSpeed}">
						<li>
							<span class="indicator color-{speed:indicator(number:response.scoreSpeed)}">{response.scoreSpeed}</span>
							{f:translate(key:'{lll}header.performance')}
						</li>
					</f:if>
				</ul>
				<table class="table table-hover table-striped table-condensed">
					<thead>
					<tr>
						<th colspan="2">{f:translate(key:'{lll}statistic')}</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<th>{f:translate(key:'{lll}statistic.numberHosts')}</th>
						<td>{response.pageStats.numberHosts}</td>
					</tr>
					<tr>
						<th>{f:translate(key:'{lll}statistic.totalRequestKb')}</th>
						<td>{response.pageStats.totalRequestKb} kb</td>
					</tr>
					<tr>
						<th>{f:translate(key:'{lll}statistic.numberStaticResources')}</th>
						<td>{response.pageStats.numberStaticResources}</td>
					</tr>
					<tr>
						<th>{f:translate(key:'{lll}statistic.numberCssResources')}</th>
						<td>{response.pageStats.numberCssResources}</td>
					</tr>
					<tr>
						<th>{f:translate(key:'{lll}statistic.numberJsResources')}</th>
						<td>{response.pageStats.numberJsResources}</td>
					</tr>
					</tbody>
				</table>
				<f:if condition="{response.screenshot}">
					<div class="screenshot {strategy}">
						<div class="screenshot-img-container">
							<img id="screenshot-{strategy}" src="data:{response.screenshot.mimeType};base64,{response.screenshot.data}" class="img-responsive" />
						</div>
					</div>
				</f:if>

			</div>
			<div class="col-sm-9 rules">

				<!--Usability-->
				<f:if condition="{response.rulesForUsability}">
					<h2>
						<span class="indicator color-{speed:indicator(number:response.scoreusability)}">{response.scoreusability}/100</span>{f:translate(key:'{lll}header.usability')}
					</h2>

					<!--Danger-->
					<f:if condition="{response.rulesDangerForUsability}">
						<h3>
							<span class="indicator color-danger"><i class="fa fa-exclamation"></i></span>{f:translate(key:'{lll}action.required')} </h3>

						<div class="ruleset">
							<f:for each="{response.rulesDangerForUsability}" as="rule">
								<f:render section="rule" arguments="{rule:rule,strategy:strategy}" />
							</f:for>
						</div>
					</f:if>

					<!--Suggested-->
					<f:if condition="{response.rulesWarningForUsability}">
						<h3>
							<span class="indicator color-warning"><i class="fa fa-exclamation"></i></span>{f:translate(key:'{lll}action.suggested')} </h3>

						<div class="ruleset">
							<f:for each="{response.rulesWarningForUsability}" as="rule">
								<f:render section="rule" arguments="{rule:rule,strategy:strategy}" />
							</f:for>
						</div>
					</f:if>

					<!--OK-->
					<f:if condition="{response.rulesPassedForUsability}">
						<h3>
							<span class="indicator color-ok"><i class="fa fa-check"></i></span>
							<f:translate key="{lll}rules.passed" arguments="{0:'{f:count(subject:response.rulesPassedForUsability)}'}" />
						</h3>
						<div class="ruleset">
							<f:for each="{response.rulesPassedForUsability}" as="rule">
								<f:render section="rule" arguments="{rule:rule,strategy:strategy}" />
							</f:for>
						</div>
					</f:if>
				</f:if>

				<!--Performance-->
				<f:if condition="{response.rulesForSpeed}">
					<h2>
						<span class="indicator color-{speed:indicator(number:response.scoreSpeed)}">{response.scoreSpeed}/100</span>{f:translate(key:'{lll}header.performance')}
					</h2>

					<!--Danger-->
					<f:if condition="{response.rulesDangerForSpeed}">
						<h3>
							<span class="indicator color-danger"><i class="fa fa-exclamation"></i></span>{f:translate(key:'{lll}action.required')} </h3>

						<div class="ruleset">
							<f:for each="{response.rulesDangerForSpeed}" as="rule">
								<f:render section="rule" arguments="{rule:rule,strategy:strategy}" />
							</f:for>
						</div>
					</f:if>

					<!--Suggested-->
					<f:if condition="{response.rulesWarningForSpeed}">
						<h3>
							<span class="indicator color-warning"><i class="fa fa-exclamation"></i></span>{f:translate(key:'{lll}action.suggested')} </h3>

						<div class="ruleset">
							<f:for each="{response.rulesWarningForSpeed}" as="rule">
								<f:render section="rule" arguments="{rule:rule,strategy:strategy}" />
							</f:for>
						</div>
					</f:if>

					<!--OK-->
					<f:if condition="{response.rulesPassedForSpeed}">
						<h3>
							<span class="indicator color-ok"><i class="fa fa-check"></i></span>
							<f:translate key="{lll}rules.passed" arguments="{0:'{f:count(subject:response.rulesPassedForSpeed)}'}" />
						</h3>
						<div class="ruleset">
							<f:for each="{response.rulesPassedForSpeed}" as="rule">
								<f:render section="rule" arguments="{rule:rule,strategy:strategy}" />
							</f:for>
						</div>
					</f:if>
				</f:if>

			</div>

		</div>
	</div>
</f:section>

<f:section name="rule">
	<div class="single-rule form-group form-group-dashed">
		<h4 class="title"><i class="fa fa-plus"></i>{rule.localizedRuleName}</h4>

		<div class="description" style="display: none;">
			<f:if condition="{rule.summary}">
				<p>
					<speed:result result="{rule.summary}" />
				</p>
			</f:if>
			<f:if condition="{rule.urlBlocks}">

				<div class="url-blocks">
					<f:for each="{rule.urlBlocks}" as="block">
						<div class="block">
							<speed:result result="{block.header}" />
							<f:if condition="{block.urls}">
								<ul>
									<f:for each="{block.urls}" as="url">
										<li>
											<speed:urlBlock result="{url}" strategy="{strategy}" />
										</li>
									</f:for>
								</ul>
							</f:if>
						</div>
					</f:for>

				</div>
			</f:if>
		</div>
	</div>
</f:section>