{% extends "im/account_base.html" %}

{% load filters %}
{% block page.body %}
 
{% block headjs %}
	{{ block.super }}	 
		
	<script src="{{ IM_STATIC_URL }}js/jquery.uniform.js"></script>
	<script src="{{ IM_STATIC_URL }}js/quotas.js"></script>
	 <link rel="stylesheet" href="{{ IM_STATIC_URL }}css/uniform.default.css" type="text/css" media="screen">	
{% endblock %}		
<form action="" method="post" class="withlabels quotas-form">{% csrf_token %}
	 
    <fieldset>
    	<legend>
    		1. CREATE GROUP
			<span class="info"> 
		    	<em>more info</em>
		    	<span>Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text</span>
	    	</span>    		
    	</legend>
        
        {% include "im/form_render.html" %}
		
		<div class="double-checks">
    		<label>Max users per group</label>
    		<div class="form-row">
    			<p class="clearfix">
    				<label for="members_unlimited">Unlimited</label>
    				<input type="checkbox" id="members_unlimited" name="members_unlimited" class="unlimited" checked="checked">
    			</p>
    		</div>
    		<div class="form-row">
    			<p class="clearfix">
    				<label for="members_limited">Limited</label>
    				<input type="checkbox" id="members_limited" name="members_limited" class="limited">
       				<input type="text" id="members_uplimit" name="members_uplimit" />
       				 
    			</p>
    		</div>
    		
    	</div> 
    </fieldset>       
    <fieldset id="icons">
    	<legend>
    		2. CHOOSE RESOURCES
    		<span class="info"> 
		    	<em>more info</em>
		    	<span>Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text</span>
	    	</span>    
    	</legend>

    {% with resource_catalog|lookup:'resources' as resources %}
    {% with resource_catalog|lookup:'groups' as groups %}    	
    	<ul class="clearfix">
            {% for g, rs in groups.items %}    		
    		<li><a href="#{{'group_'|add:g}}" id="{{'group_'|add:g}}"><img src="/static/im/images/create-resource-vm.png" alt="vm"/></a></li>
<!-- 
    		<li><a href="#storage_1" id="storage_1"><img src="/static/im/images/create-resource-storage.png" alt="storage"/></a></li>
 -->
            {% endfor %}
    	</ul>
    	<!--p class="msg">if you choose CPU without selecting any VMs you must also select RAM and DISKSPACE</p-->
    </fieldset>
    <div class="foo">
    
    </div>
    
        {% for g, rs in groups.items %}
        <div class="{{'group_'|add:g}}">
			<a href="#icons" class="delete"><strong>X</strong> remove resource</a>	
		    {% for r in rs %}
		    <fieldset class="quota storage">
		    	<legend>{{r|upper}}</legend>
<!-- 
		    	<div class="form-row">
		    		<p class="clearfix">
		    			<label for="num_storage">Total storage</label>
		    			<input type="text" name="num_storage">
		    			<span class="extra-img">&nbsp;</span>
		         		<span class="info"> 
					    	<em>more info</em>
					    	<span>Help Text</span>
				    	</span>
		    		</p>
		    	</div>
 -->
		    	<div class="double-checks">
		    		<label>Max Storage per user</label>
		    		<div class="form-row">
		    			<p class="clearfix">
		    				<label for="{{r|add:'_unlimited'}}">Unlimited</label>
		    				<input type="checkbox" id="{{'id_'|add:r|add:'_unlimited'}}" name="{{r|add:'_unlimited'}}" class="unlimited" checked="checked">
		    			</p>
		    		</div>
		    		<div class="form-row">
		    			<p class="clearfix">
		    				<label for="{{r|add:'_limited'}}">Limited</label>
		    				<input type="checkbox" id="id_storage_per_user_limited" name="{{r|add:'_limited'}}" class="limited">
		       				<input type="text" id="{{'id_'|add:r|add:'_uplimit'}}" name="{{r|add:'_uplimit'}}"/> 
		    			</p>
		    		</div>
		    		
		    	</div> 
		    </fieldset>
		    {% endfor %}
	    </div>
    {% endfor %}

    {% endwith %}
    {% endwith %}
	</div>
    <div class="form-row submit">
   		<input type="submit" value="SUBMIT" class="submit altcol" autocomplete="off">
	</div>     
</form>
	 
<script>
	
</script>	 
 
{% endblock %}