{% extends "helpdesk/base.html" %}

{% block extraheader %}
<small>/ {{ account }}</small>
{% endblock %}

{% block content %}

{% if account_exists %}
<div class="subnav">
  <ul class="nav nav-pills">
      
      <li><a href="#account">Account</a></li>
      <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Virtual machines <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#vms">All</a></li>
            <li class="divider"></li>
              <li>
                {% for vm in vms %}
                <a href="#vm-{{ vm.pk }}" class="{% if vm.deleted %}deleted{% endif %}">{{ vm.name }}</a>
                {% endfor %}
            </li>
          </ul>
      </li>
      <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Networks <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#networks">All</a></li>
            <li class="divider"></li>
              <li>
                {% for net in networks %}
                <a href="#network-{{ net.pk }}" class="{% if net.state == "DELETED" %}deleted{% endif %}">{{ net.name }}</a>
                {% endfor %}
            </li>
          </ul>
      </li>
      <li><h2>{{ account }}</h2></li>
  </ul>
</div>
<div class="row-fluid">
    <div class="object-anchor" id="account"></div>
    <div class="account info-block well">
        <h3>Account</h3>
        <div class="info-block-content">	
	        <div class="object-details">
	            <div class="vm-details-content object-details-content">
	            	 <ul class="nav nav-tabs">
					    <li class="active"><a href="#details{{ account }}" data-toggle="tab">Details</a></li>
				    </ul>	
	                 <div class="tab-content">
						<div class="tab-pane active" id="details{{ account }}">
			                <dl class="dl-horizontal well">
			                    <dt>Username</dt><dd>{{ account }}</dd>
			                    <dt>Virtual machines</dt><dd>{{ vms|length }}</dd>
			                    <dt>Networks</dt><dd>{{ networks|length }}</dd>
			                </dl>
			           </div>
			        </div>
	            </div>
	        </div>
	    </div>
    </div>
    <div class="object-anchor" id="vms"></div>
    <div class="vms info-block well">
    	<div class="show-hide-all toggle">
	    	<span class="badge">+ Show Info</span>
	    </div>
        <h3>Virtual machines <span class="badge badge-info">Total: {{ vms|length }}</span></h3>
        <div class="info-block-content">
	        {% for vm in vms %}
	        <!-- {% cycle 'row1' 'row2' as rowcls %}  -->
	        {% include "helpdesk/vms_list.html" %}
	        {% empty %}
	        <p>No virtual machines available for this account</p>
	        {% endfor %}
       	</div>
    </div>
    <div class="object-anchor" id="networks"></div>
    <div class="networks info-block well">
    	<div class="show-hide-all toggle">
	    	<span class="badge">+ Show Info</span>
	    </div>
        <h3>Networks <span class="badge badge-info">Total: {{ networks|length }}</span></h3>
        <div class="info-block-content">
	        {% for network in networks %}
	        <!--{% cycle 'row1' 'row2' as rowcls %}-->
	        {% include "helpdesk/networks_list.html" %}
	        {% empty %}
	        <p>No networks available for this account</p>
	        {% endfor %}
        </div>
    </div>
</div>
{% else %}
<p>Account <em>{{ account }}</em> does not exist in cyclades database</p>
{% endif %}
{% endblock %}