pa11y-dashboard/view/task.html

{{#content "title"}}
	Task: {{task.url}} ({{task.standard}})
{{/content}}

{{#added}}
	<div class="col-md-12 clearfix">
		<div class="alert alert-success">
			<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
			<strong>Whoop whoop!</strong>
			<p>Your new url has been added.</p>
		</div>
	</div>
{{/added}}

<div class="col-md-12">
	<div class="ruled task-header">
		<div class="row clearfix">
			<div class="col-md-10">
				<h2 class="crunch-top">{{simplify-url task.url}}</h2>
				<p class="h4">({{task.standard}})</p>
			</div>
			<div class="col-md-2 text-right run-details">
				<!-- ########### To be done ############## -->
				<button class="btn btn-success">Run <span class="glyphicon glyphicon-play"></span></button>
				{{#if lastResult}}
				<!-- ########################## -->
					<div class="date">Last run : {{date-format lastResult.date format="DD MMM YYYY"}}</div>
				{{else}}
					<div class="date">Not yet run</div>
				{{/if}}
			</div>
		</div>
	</div>
</div>

{{#if results}}
	<div class="col-md-12 clearfix">
		<div class="graph-container ruled">
			<div data-role="graph" class="graph"></div>
			<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom" data-role="series-checkboxes"></ul>
			<button data-role='zoom-reset' class="btn btn-xs btn-primary pull-right btn-reset hidden">Reset Zoom <i class="glyphicon glyphicon-zoom-out"></i></button>
		</div>
	</div>

	<div class="col-md-12 hidden">
		{{> results-table}}
	</div>
{{/if}}

<div class="col-md-3 aside">
	{{#if results}}
		<div class="row">
			<div class="col-md-12 col-xs-6 dropdown-container">
				<div class="btn-group block-level clearfix">
					<button data-toggle="dropdown" class="btn-full-width btn btn-primary dropdown-toggle" type="button">{{date-format lastResult.date format="DD MMM YYYY"}} <span class="glyphicon glyphicon-calendar"></span> <span class="caret"></span></button>
					<ul role="menu" class="dropdown-menu">
						{{#results}}
			          		<li><a href="#">{{date-format date format="DD MMM YYYY"}}</a></li>
			          	{{/results}}
			        </ul>
				</div>
			</div>
			<div class="col-md-12 col-xs-6">
				<ul id="top" data-role="task-list" class="clearfix list-unstyled floated-list task-stats">
					{{#lastResult}}
						<li class="danger"><a href="#errors" title="See errors">{{count.error}}</a></li>
						<li class="warning"><a href="#warnings" title="See warnings">{{count.warning}}</a></li>
						<li class="info last"><a href="#notifications" title="See notifications">{{count.notice}}</a></li>
					{{/lastResult}}
				</ul>
			</div>
		</div>

		<!-- ########### Functionality to be done ############## -->
		<div class="row">
			<div class="action-buttons clearfix">
				<div class="col-md-12 col-xs-6">
			        <button class="btn-full-width btn btn-default">Download CSV <span class="glyphicon glyphicon-download"></span></button>
				</div>
				<div class="col-md-12 col-xs-6">
			        <button class="btn-full-width btn btn-default">Download JSON <span class="glyphicon glyphicon-download"></span></button>
				</div>
		    </div>
		</div>
	{{/if}}

	<!-- List of other urls -->
    <div class="other-tasks well">
    	<h4 class="crunch-top ruled-sm">Your other tracked URLs</h4>
    	<p>No other urls</p>

    	<!-- ########### Functionality to be done ############## -->
        <!-- <ul class="list-unstyled crunch-bottom">
	        <li><a href="empty-task">rowanmanning.com</a></li>
	        <li><a href="task">nature.com</a></li>
        </ul> -->
    </div>
</div>

<div class="col-md-9">
	{{#if results}}
		<div class="heading label-danger showing first" id="errors">
			Errors ( 13 )
			<span data-role="expander" class="pull-right expander"> - </span>
		</div>
		<ul class="list-unstyled task-danger tasks-list collapse in">
			{{#lastResult.messages}}
				<li>
					<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
					<p>{{message}}</p>
				</li>
			{{/lastResult.messages}}
		</ul>

		<div class="heading label-warning" id="warnings">
			Warnings ( 142 )
			<span data-role="expander" class="pull-right expander"> + </span>
		</div>
		<ul class="list-unstyled task-warning tasks-list collapse">
			{{#lastResult.messages}}
				<li>
					<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
					<p>{{message}}</p>
				</li>
			{{/lastResult.messages}}
		</ul>

		<div class="heading label-info" id="notifications">
			Notifications ( 166 )
			<span data-role="expander" class="pull-right expander"> + </span>
		</div>
		<ul class="list-unstyled task-info tasks-list collapse">
			{{#lastResult.messages}}
				<li>
					<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
					<p>{{message}}</p>
				</li>
			{{/lastResult.messages}}
		</ul>

		<div class="heading label-default">Ignored Rules
			<span data-role="expander" class="pull-right expander"> + </span>
		</div>
		<ul class="list-unstyled task-default tasks-list collapse">
		    {{#task.ignore}}
		        <li>
		        	<p class="crunch rule-name">{{.}}</p>
				</li>
		    {{/task.ignore}}
		</ul>
	{{else}}
		<div class="alert alert-info">
			<h4>No results to show</h4>
			<p>pa11y has not been run against this URL yet so there are no results to show.</p>
			<p>To run pa11y for this url now <a href="">click here</a></p>
		</div>
	{{/if}}
</div>