{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 %}
{% block content %} 
<div>
	<div class="container virtual-machine-container dashboard-container ">
		<div class="row">
			<div class="col-md-9 col-md-offset-2">
				 <div  class="col-sm-12">
				        <h3><i class="fa fa-bell" aria-hidden="true"></i> Notifications</h3>
				        <hr/>
				        <div class="col-md-3"> <!-- required for floating -->
				          <!-- Nav tabs -->
				          <ul class="nav nav-tabs tabs-left sideways">
				            <li  class="active">
				            	<a href="#unread-v" data-toggle="tab">
				            		Unread  <span class="badge">{{unread_notifications|length}}</span>
				            	</a>
				            </li>
				            <li>
				            	<a href="#all-v" data-toggle="tab">
				            		 All
				            	</a>
				            </li>
				          </ul>
				        </div>

				        <div class="col-md-9">
				          <!-- Tab panes -->
				          <div class="tab-content">
				            <div class="tab-pane active" id="unread-v">
				            	<div class="row">
									<div class="col-md-12">
									<h3>Unread notifications</h3>
									<hr>
									</div>
				            	</div>
								<div class="row">
								  <div class="col-md-12"> 
										{% for notification in unread_notifications %}
											<form method="POST" action="{% url 'hosting:read_notification' notification.id %}">
												{% csrf_token %} 
												<span>{{notification}} -</span>
												<button type="submit" class="btn btn-link">Mark as read</button>
							                	<span  class="pull-right" style="font-size: 11px;color: #999;">{{notification.date}}</span>
											</form>
											<hr/>
										{% endfor %}
								  </div><!--/col-12-->
								</div><!--/row-->
				            </div>
				            <div class="tab-pane" id="all-v">
				            	<div class="row">
									<div class="col-md-12">
									<h3>All notifications</h3>
									<hr>
									{% for notification in all_notifications %}
										<span>{{notification.message}} </span>
										<span class="pull-right" style="font-size: 11px;color: #999;">{{notification.message.date}}</span>
										<hr/>
									{% endfor %}
									</div>
				            	</div>
								<div class="row">
								  <div class="col-md-12"> 
								  </div><!--/col-12-->
								</div><!--/row-->
				            </div>

				          </div>
				        </div>

				        <div class="clearfix"></div>
				</div>
			</div>

	    </div>
	</div>

</div>

{%endblock%}