{% 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 class="pull-left"><i class="fa fa-server" aria-hidden="true"></i> {% trans "Virtual Machines"%} </h3>
                <p class="pull-right">
                    <a class="btn btn-success" href="{% url 'hosting:create-virtual-machine' %}" >{% trans "Create VM"%} </a>                    
                </p>
				<br/>
				<thead> 
				<tr> 
					<th>{% trans "ID"%}</th>
					<th>{% trans "Amount"%}</th>
					<th>{% trans "Status"%}</th>
					<th></th>
				</tr>
				</thead>
				<tbody> 
					{% for vm in vms %}
					<tr>
						<td scope="row">{{vm.vm_id}}</td> 
						<td>{{vm.price}} CHF</td> 
						<td>
                           
							{% if vm.state == 'ACTIVE' %}
								<span class="h3 label label-success"><strong> {{vm.state}}</strong></span>
							{% elif  vm.state == 'POWEROFF' %}
								<span class="h3 label label-danger"><strong>{{vm.state}}</strong></span>
							{% else %}
								<span class="h3 label label-warning"><strong>{{vm.state}}</strong></span>
							{% endif %}  

						</td> 
						<td>
                            <button type="button" class="btn btn-default"><a
                                    href="{% url 'hosting:virtual_machines' vm.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%}