{{!
This file is part of Pa11y Dashboard.

Pa11y Dashboard is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Pa11y Dashboard is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
}}

<div class="col-md-3 aside">
	<div class="row">
		<div class="action-buttons col-md-12 col-sm-6">
			<div class="row">
				<div class="col-md-12 col-sm-6 col-xs-12">
			        <a href="{{mainResult.hrefCsv}}" class="btn-full-width btn btn-default" data-test="download-csv">
			        	Download CSV <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
			        </a>
				</div>
				<div class="col-md-12 col-sm-6 col-xs-12">
			        <a href="{{mainResult.hrefJson}}" class="btn-full-width btn btn-default" data-test="download-json">
			        	Download JSON <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
			        </a>
				</div>
			</div>
		</div>
	</div>

	<div class="row date-selector-row">
		<div class="col-md-12 col-sm-12 clearfix">
			<div class="well dark-well">
				<div class="date-selector">
					<div class="btn-group block-level clearfix">

						<h2 class="h3" id="dates-navigation">Select a date to show stats for: <span class="glyphicon glyphicon-calendar"></span></h2>
						<nav aria-labelledby="dates-navigation">
							<ul class="dates-list">
								{{#results}}
									<li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
								{{/results}}
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 col-sm-12 clearfix">
			<div class="well">
				<h2 class="crunch-top h3">View results in browser</h2>
				<p class="crunch-bottom">Pa11y uses HTML_CodeSniffer to find accessibility issues. <a href="http://squizlabs.github.io/HTML_CodeSniffer/">Use their bookmarklet</a> to view results on the page you are testing.</p>
			</div>
	    </div>
	</div>
</div>

<section class="col-md-9" id="top">
	<h2 id="tabSectionHeading" class="crunch-top">Results</h2>
	<ul class="nav nav-tabs category-list" aria-labelledby="tabSectionHeading" role="tablist">
		<li class="category-list__item category-list__item_type_error active" aria-selected="true" role="presentation">
			<a class="category-list__link" id="errors" href="#errors-list" aria-controls="errors-list" role="tab" data-toggle="tab" data-test="task-errors">
				Errors ( {{mainResult.count.error}} )
			</a>
		</li>
		<li class="category-list__item category-list__item_type_warning" aria-selected="false" role="presentation">
			<a class="category-list__link" id="warnings" href="#warnings-list" aria-controls="warnings-list" role="tab" data-toggle="tab" data-test="task-warnings">
				Warnings ( {{mainResult.count.warning}} )
			</a>
		</li>
		<li class="category-list__item category-list__item_type_notice" aria-selected="false" role="presentation">
			<a class="category-list__link" id="notices" href="#notices-list" aria-controls="notices-list" role="tab" data-toggle="tab" data-test="task-notices">
				Notices ( {{mainResult.count.notice}} )
			</a>
		</li>
		<li class="category-list__item category-list__item_type_ignore" aria-selected="false" role="presentation">
			<a class="category-list__link" id="ignore" href="#ignore-list" aria-controls="ignore-list" role="tab" data-toggle="tab">
				Ignored rules ( {{mainResult.ignore.length}} )
			</a>
		</li>
	</ul>

	<div class="tab-content">
		<div id="errors-list" role="tabpanel" class="tab-pane tasks-list fade in active" aria-labelledby="errors">
			{{#if mainResult.count.error}}
				{{#mainResult.errors}}
					<div class="panel panel-default task task_type_error">
						<div class="panel-heading">
							<div class="row">
								<div class="col-md-9 col-sm-9 col-xs-8">
									<span class="rule-name">{{code}}&ensp;
										<span class="badge" title="{{count}} selector(s)" data-toggle="tooltip" data-role="rule-tooltip">{{count}}</span>
									</span>
								</div>
								<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
									{{#unless readonly}}
										{{#if ../../isTaskPage}}
											<form class="ignore-form" action="{{../../../task.hrefIgnore}}" method="post">
												<input type="hidden" name="rule" value="{{code}}"/>
												<input type="submit" role="link" class="btn btn-link btn-sm link" value="Ignore rule"/>
											</form>
										{{/if}}
									{{/unless}}
								</div>
							</div>
						</div>

						<div class="panel-body">
							<span class="text">{{message}}</span>
							<span class="btn btn-xs btn-link link btn-details" data-role="details-collapse" data-toggle="collapse" data-target="#error-index-{{@index}}" aria-expanded="false" aria-controls="error-index-{{@index}}">details</span>

							<div class="task-details collapse" id="error-index-{{@index}}">
								{{#if solutions.length}}
									<div class="subtitle">Solutions:</div>
									<ul class="list-unstyled solutions-list">
										{{#each solutions}}
											<li class="list-unstyled__item">
												<a class="link" href="{{url}}" target="_blank">
													<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
												</a>
											</li>
										{{/each}}
									</ul>
								{{/if}}

								{{#if items.length}}
									<div class="subtitle">Selectors:</div>
									<ul class="list-unstyled selectors-list">
										{{#each items}}
											<li class="list-unstyled__item">
												<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
													<code class="code">{{selector}}</code>
												</span>
											</li>
										{{/each}}
									</ul>
								{{/if}}
							</div>
						</div>
					</div>
				{{/mainResult.errors}}
				<div class="to-top">
					<a class="link" href="#top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
				</div>
			{{else}}
				<div class="text">Well done! You have 0 errors. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
			{{/if}}
		</div>

		<div id="warnings-list" role="tabpanel" class="tab-pane tasks-list fade" aria-labelledby="warning">
			{{#if mainResult.count.warning}}
				{{#mainResult.warnings}}
					<div class="panel panel-default task task_type_warning">
						<div class="panel-heading">
							<div class="row">
								<div class="col-md-9 col-sm-9 col-xs-8">
									<span class="rule-name">{{code}}&ensp;
										<span class="badge" title="{{count}} selector(s)" data-toggle="tooltip" data-role="rule-tooltip">{{count}}</span>
									</span>
								</div>
								<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
									{{#unless readonly}}
										{{#if ../../isTaskPage}}
											<form class="ignore-form" action="{{../../../task.hrefIgnore}}" method="post">
												<input type="hidden" name="rule" value="{{code}}"/>
												<input type="submit" role="link" class="btn btn-link btn-sm link" value="Ignore rule"/>
											</form>
										{{/if}}
									{{/unless}}
								</div>
							</div>
						</div>

						<div class="panel-body">
							<span class="text">{{message}}</span>
							<span class="btn btn-xs btn-link link btn-details" data-role="details-collapse" data-toggle="collapse" data-target="#warning-index-{{@index}}" aria-expanded="false" aria-controls="warning-index-{{@index}}">details</span>

							<div class="task-details collapse" id="warning-index-{{@index}}">
								{{#if solutions.length}}
									<div class="subtitle">Solutions:</div>
									<ul class="list-unstyled solutions-list">
										{{#each solutions}}
											<li class="list-unstyled__item">
												<a class="link" href="{{url}}" target="_blank">
													<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
												</a>
											</li>
										{{/each}}
									</ul>
								{{/if}}

								{{#if items.length}}
									<div class="subtitle">Selectors:</div>
									<ul class="list-unstyled selectors-list">
										{{#each items}}
											<li class="list-unstyled__item">
												<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
													<code class="code">{{selector}}</code>
												</span>
											</li>
										{{/each}}
									</ul>
								{{/if}}
							</div>
						</div>
					</div>
				{{/mainResult.warnings}}
				<div class="to-top">
					<a class="link" href="#top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
				</div>
			{{else}}
				<div class="text">Well done! You have 0 warnings. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
			{{/if}}
		</div>

		<div id="notices-list" role="tabpanel" class="tab-pane tasks-list fade" aria-labelledby="notices">
			{{#if mainResult.count.notice}}
				{{#mainResult.notices}}
					<div class="panel panel-default task task_type_notice">
						<div class="panel-heading">
							<div class="row">
								<div class="col-md-9 col-sm-9 col-xs-8">
									<span class="rule-name">{{code}}&ensp;
										<span class="badge" title="{{count}} selector(s)" data-toggle="tooltip" data-role="rule-tooltip">{{count}}</span>
									</span>
								</div>
								<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
									{{#unless readonly}}
										{{#if ../../isTaskPage}}
											<form class="ignore-form" action="{{../../../task.hrefIgnore}}" method="post">
												<input type="hidden" name="rule" value="{{code}}"/>
												<input type="submit" role="link" class="btn btn-link btn-sm link" value="Ignore rule"/>
											</form>
										{{/if}}
									{{/unless}}
								</div>
							</div>
						</div>

						<div class="panel-body">
							<span class="text">{{message}}</span>
							<span class="btn btn-xs btn-link link btn-details" data-role="details-collapse" data-toggle="collapse" data-target="#notice-index-{{@index}}" aria-expanded="false" aria-controls="notice-index-{{@index}}">details</span>

							<div class="task-details collapse" id="notice-index-{{@index}}">
								{{#if solutions.length}}
									<div class="subtitle">Solutions:</div>
									<ul class="list-unstyled solutions-list">
										{{#each solutions}}
											<li class="list-unstyled__item">
												<a class="link" href="{{url}}" target="_blank">
													<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
												</a>
											</li>
										{{/each}}
									</ul>
								{{/if}}

								{{#if items.length}}
									<div class="subtitle">Selectors:</div>
									<ul class="list-unstyled selectors-list">
										{{#each items}}
											<li class="list-unstyled__item">
												<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
													<code class="code">{{selector}}</code>
												</span>
											</li>
										{{/each}}
									</ul>
								{{/if}}
							</div>
						</div>
					</div>
				{{/mainResult.notices}}
				<div class="to-top">
					<a class="link" href="#top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
				</div>
			{{else}}
				<div class="text">Well done! You have 0 notices. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
			{{/if}}
		</div>

		<div id="ignore-list" role="tabpanel" class="tab-pane tasks-list fade" aria-labelledby="ignore">
			{{#if mainResult.ignore.length}}
				{{#mainResult.ignore}}
					<div class="panel panel-default task task_type_ignore">
						<div class="panel-heading">
							<div class="row">
								<div class="col-md-9 col-sm-9 col-xs-8">
									<span class="rule-name">{{name}}</span>
								</div>
								<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
									{{#unless readonly}}
										{{#if ../../isTaskPage}}
											<form class="ignore-form" action="{{../../../task.hrefUnignore}}" method="post">
												<input type="hidden" name="rule" value="{{name}}"/>
												<input type="submit" role="link" class="btn btn-link btn-sm link" value="Unignore rule"/>
											</form>
										{{/if}}
									{{/unless}}
								</div>
							</div>
						</div>

						<div class="panel-body">
							{{#if description}}
								<span class="text">{{description}}</span>
							{{/if}}
						</div>
					</div>
				{{/mainResult.ignore}}
				<div class="to-top">
					<a class="link" href="#top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
				</div>
			{{else}}
				<div class="text">You have no ignored rules.</div>
			{{/if}}
		</div>
	</div>	
</section>