<aside>
	{% if content_tag.quiz_type? or content_tag.html_type? or content_tag.assignment_type? %}
	<section class="vbox bg-light">
		{% else %}
		<section class="vbox">
			{% endif %}
			<section class="scrollable">
				<div class="col-md-offset-2 col-md-8">
					<div class="text-uc text-xs text-muted m-t-lg">{{ context_module.name }}
					</div>
					{% if content_tag.quiz_type? or content_tag.html_type? or content_tag.assignment_type? %}
						<h3 class="m-t-sm" style="position: relative;"> <span>{{ content_tag.title }}</span>
					{% else %}
						<h3 style="color:white;" class="m-t-sm"> <span>{{ content_tag.title }}</span>
					{% endif %}
					{% if content_tag.video_type? %}
						<i class="icon icon-social-youtube text-danger"></i>
					{% elsif content_tag.quiz_type? %}
						<i class="icon icon-speech text-success"></i>
					{% elsif content_tag.assignment_type? %}
						<i class="icon icon-pencil text-success"></i>
						<style type="text/css" scoped>
							@media screen and (min-width: 600px) {
								.sdtd-float-right {
									float: right !important;
									padding-top: 12px;
								}
							}
						</style>
						{% if false %}
							<span class="sdtd-float-right h5">
								Số điểm tối đa: {{ content_tag.content.points_possible }}
							</span>
						{% else %}
							{{ "rubric.css" | asset_url | stylesheet_tag }}
							<!-- Trigger the modal with a button -->
							<button class=" h5 btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">Điểm & nhiệm vụ</button>
						{% endif%}
					{% elsif content_tag.pdf_type? %}
						<i class="icon icon-book-open"></i>
					{% elsif content_tag.attachment_type? %}
						<i class="fa fa-paperclip"></i>
					{% else %}
						<i class="icon icon-doc"></i>

					{% endif %}

						</h3>
						<!-- Modal -->
						<div class="modal fade" id="myModal" role="dialog">
							<div class="modal-dialog">

								<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h5 class="modal-title">Tổng quan về bài tập</h5>
									</div>
									<div class="modal-body">
										<div class="show-points">
											<table class="table">
												<tbody>
													<tr class="ant-descriptions-row">
														<th
															class="ant-descriptions-item-label ant-descriptions-item-colon">
															<span>Điểm tối đa</span></th>
														<td class="ant-descriptions-item-content" colspan="1">
															<span
																class="real-score">{{ content_tag.content.points_possible }}</span>
													</tr>
													<tr class="ant-descriptions-row">
														<th
															class="ant-descriptions-item-label ant-descriptions-item-colon">
															<div><span>Điểm đạt được</span> </div>
														</th>
														<td class="ant-descriptions-item-content" colspan="1">
															<div class="pass-fail-icon">
																{% if content_tag.content.submission? %}
																{% if content_tag.content.workflow_state %}
																{% if content_tag.content.points %}
																{{content_tag.content.points}}
																{% else %}
																Chưa được chấm điểm
																{% endif %}
																{% else %}
																Chưa có bài nộp
																{% endif %}
																{% else %}
																Chưa có bài nộp
																{% endif %}
															</div>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										<hr>
										<div class="show-rubric">
											<h5 class="content-rubric">Nội dung của rubric</h5>
											{% if content_tag.content.rubric? %}
											<div class="table-responsive">
												<table class="table">
													<thead>
														<tr>
															<th scope="col">Tiêu chí</th>
															<th scope="col">Xếp hạng</th>
															<th scope="col">Điểm</th>
														</tr>
													</thead>
													<tbody>
														{% assign score = 0 %}
														{% for data in content_tag.content.rubric.data %}
														{% capture score %}{{ score | plus:data.points }}{% endcapture %}
														<tr>
															<td>
																<div class="rubric-data-description">
																	{{data.description}}
																</div>
																<div class="rubric-data-long-description">
																	{{data.long_description}}
																</div>
															</td>
															<td style="padding: 0">
																<table class="ratings">
																	<tbody>
																		<tr>
																			{% for rating in data.ratings %}
																			<td id="rating_blank"
																				class="rating edge_rating">

																				<div class="rating-main">
																					<span
																						class="nobr toggle_for_hide_points ">
																						<span
																							class="points">{{rating.points}}</span>
																						Điểm
																					</span>

																					<div
																						class="description rating_description_value">
																						{{rating.description}}</div>
																					<div
																						class="long-description rating_description_value">
																						{{rating.long_description}}
																					</div>
																				</div>
																			</td>
																			{% endfor %}
																		</tr>
																	</tbody>
																</table>
															</td>
															<td><span class="points">{{data.points}}</span> Điểm</td>
														</tr>
														{% endfor %}
														<tr>
															<td colspan="4" style="text-align: end;">Tổng điểm:
																{{score}}</td>
														</tr>
													</tbody>
												</table>
											</div>
											{% else %}
											<p>Bài tập chưa có rubric</p>
											{% endif %}
										</div>
									</div>
								</div>

							</div>
						</div>
						<div>
							{% if content_tag.video_type? %}
							<div class="lecture-attachment">
								{% include 'video_content', content_tag: content_tag %}
							</div>
							{% elsif content_tag.html_type? %}
							<div class="lecture-attachment">
								{% include 'html_page_content', html_page_aka_wiki_page: content_tag.content %}
							</div>
							{% elsif content_tag.quiz_type? %}
							<div class="lecture-attachment">
								{% include 'quiz_content', quiz: content_tag.content %}
							</div>
							{% elsif content_tag.pdf_type? %}
							<div class="lecture-attachment">
								{% include 'pdf_content', content_tag: content_tag %}
							</div>
							{% elsif content_tag.assignment_type? %}
							<div class="lecture-attachment">
								{% include 'assignment_content', assignment: content_tag.content %}
							</div>
							{% elsif content_tag.attachment_type? %}
								<div class="lecture-attachment">
									{% include 'attachment_content', attachment: content_tag.content %}
								</div>
							{% else %}
								<div class="lecture-attachment">
									<p>This type is not supported at the moment!</p>
								</div>
							{% endif %}
						</div>
						<div class="row m-t m-b">
							<div id="divError2291" class="col-xs-6">
								<a data-toggle="ajaxModal" class="modalError btn btn-white h6 btn-sm">
									<i class="fa fa-exclamation-triangle"></i>Báo lỗi
								</a>
							</div>
							{% if content_tag.quiz_type? == false and content_tag.assignment_type? == false %}
							{% if content_tag.mark_as_finish? %}
							<div class="col-xs-6"><button disabled="true" type="button"
									class="btn btn-success btn-sm h6 pull-right m-l-xs m-b-xs">
									<i class="fa fa-check-circle"></i> Tôi đã hoàn thành</button>
							</div>
							{% else %}
							<div class="col-xs-6">
								<button id="markAsDoneButton" data-url="{{ content_tag.mark_as_finish_post_url }}"
									type="button" class="btn btn-primary btn-sm h6 pull-right m-l-xs m-b-xs">
									<i class="fa fa-check-circle"></i> Tôi đã hoàn thành
								</button>
							</div>
							{{ "mark-as-finish-action.js" | asset_url | script_tag  }}
							{% endif %}
							{% endif %}
						</div>
						<div class="line line-dashed b-black"></div>
				</div>
			</section>
		</section>
</aside>