<ng-include src="'/intranet/quiz/html/includes/infoboxes/preview_mode.html'"></ng-include>

<div class="row">

	<div class="col-md-4  my-3 my-md-0" ng-hide="!content.image_url">
		<img class="img-fluid" ng-src="{{ content.image_url }}">
	</div>

	<div class="col-md-8">

		<div class="row">
			<div class="col-md-10">
				<h3 class="title quiz-title" ng-bind="content.title">[title]</h3>
			</div>
			<div class="col-md-2">
				<div class="float-md-right float-left">
					<cla-share canonical_url="{{canonicalUrl}}"></cla-share>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-12">
				<div class="table-responsive">
					<table class="table table-borderless">
						<tbody>
							<tr>
								<th><lmsg src="quiz.info.review_total" >[total number of questions]</lmsg>:</th>
								<td ng-bind="getTotalQuestions()">[0]</td>
								<td>
									<a ng-click="reviewAll()" class="btn btn-secondary" lmsg="quiz.button.review_all_questions">[review all]</a>
								</td>
							</tr>
							<tr>
								<th><p class="text-success"><lmsg src="quiz.info.review_completed">[completed questions]</lmsg>:</p></th>
								<td ng-bind="getCompleteQuestions()">[0]</td>
								<td>
									<a ng-if="getCompleteQuestions() > 0" ng-click="reviewQuestions(true)" class="btn btn-success" lmsg="quiz.button.review_questions">[review]</a>
								</td>
							</tr>
							<tr>
								<th><p class="text-danger"><lmsg src="quiz.info.review_incomplete">[incomplete questions]</lmsg>:</p></th>
								<td ng-bind="getIncompleteQuestions()">[0]</td>
								<td>
									<a ng-if="getIncompleteQuestions() > 0" ng-click="reviewQuestions(false)" class="btn btn-danger" lmsg="quiz.button.review_questions">[review]</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<button class="btn btn-primary btn-finish" data-toggle="modal" data-target="#finish-modal">
			<ion-icon name="checkmark-outline"></ion-icon>
			<lmsg src="quiz.button.finish">[end quiz]</lmsg>
		</button>
		<br>
		<button class="btn btn-secondary" ng-click="back()">
			<ion-icon name="arrow-back-outline"></ion-icon>
			<lmsg src="quiz.button.back">[back to quiz]</lmsg>
		</button>
	</div>
</div>
