{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 i18n %}
{% block content %} 
<div>
	<div class="container dashboard-container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<table class="table borderless table-hover"> 
				<h3><i class="fa fa-server" aria-hidden="true"></i>{% trans "Virtual Machines"%} </h3> 
				<br/>
				<thead> 
				<tr> 
					<th>{% trans "ID"%}</th>
					<th>{% trans "Location"%} </th>
					<th>{% trans "Amount"%}</th>
					<th>{% trans "Status"%}</th>
					<th></th>
				</tr>
				</thead>
				<tbody> 
					{% for vm in vms %}
					<tr> 
						<td scope="row">{{vm.name}}</td> 
						<td>{{vm.location}}</td> 
						<td>{{vm.price}} CHF</td> 
						<td>

							{% if vm.status == 'pending' %}
								<span class="h3 label label-warning"><strong>{{vm.get_status_display}}</strong></span>
							{% elif  vm.status == 'online' %}
								<span class="h3 label label-success"><strong>{{vm.get_status_display}}</strong></span>
							{% else %}
								<span class="h3 label label-danger"><strong>{{vm.get_status_display}}</strong></span>
							{% endif %}  

						</td> 
						<td>
							<button type="button" class="btn btn-default"><a href="{% url 'hosting:virtual_machines' vm.id %}">{% trans "View Detail"%}</a></button>
						</td>
					</tr>
					{% endfor %}
				</tbody> 
				</table>

			    {% if is_paginated %}
			        <div class="pagination">
			            <span class="page-links">
			                {% if page_obj.has_previous %}
			                    <a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous"%}</a>
			                {% endif %}
			                <span class="page-current">
			                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
			                </span>
			                {% if page_obj.has_next %}
			                    <a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next"%}</a>
			                {% endif %}
			            </span>
			        </div>
			    {% endif %}
				
			</div>

	    </div>
	</div>

</div>

{%endblock%}