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

{% 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>
    	<div class="form-row">
    		<p class="clearfix">
    			<label for="id_name">Name</label>
    			<input type="text" name="name" id="id_name" autocomplete="off">
    			<span class="extra-img">&nbsp;</span>
         		<span class="info"> 
			    	<em>more info</em>
			    	<span>Help Text</span>
		    	</span>
    		</p>
    	</div>
    	<div class="form-row">
    		
    		<p class="clearfix">
    			<label for="id_homepage">Homepage Url</label>
    			<input type="text" name="homepage" id="id_homepage" maxlength="255" autocomplete="off">
    			<span class="extra-img">&nbsp;</span>
         		<span class="info"> 
			    	<em>more info</em>
			    	<span>Help Text</span>
		    	</span>
    		</p>
    		 
    	</div>
    	<div class="form-row">
    		<p class="clearfix">
    			<label for="id_desc">Description</label>
    			<textarea id="id_desc" rows="10" cols="40" name="desc"></textarea>
    			<span class="extra-img">&nbsp;</span>
         		<span class="info"> 
			    	<em>more info</em>
			    	<span>Help Text</span>
		    	</span>
    		</p>
    	</div>
    	<div class="form-row">
    		<p class="clearfix">
    			<label for="id_issue_date">Issue Date</label>
    			<input type="text" id="id_issue_date" name="issue_date" class="hasDatepicker">
    			<span class="extra-img">&nbsp;</span>
         		<span class="info"> 
			    	<em>more info</em>
			    	<span>Help Text</span>
		    	</span>
    		</p>
    	</div>
    	
    	<div class="form-row">
    		<p class="clearfix">
    			<label for="id_expiration_date">Expiration Date</label>
    			<input type="text" name="expiration_date" id="id_expiration_date" class="hasDatepicker">
    			<span class="extra-img">&nbsp;</span>
         		<span class="info"> 
			    	<em>more info</em>
			    	<span>Help Text</span>
		    	</span>
    		</p>
    	</div>
    	<div class="form-row ">
		     <p class="clearfix ">
		        <label for="id_moderation_enabled">Moderation</label>
		        <input type="checkbox" id="id_moderation_enabled" name="moderation_enabled" autocomplete="off" style="display: none;">
		        <span class="extra-img">&nbsp;</span>
	          	<span class="info"> 
				    <em>more info</em>
				    <span>Check if you want to approve members participation manually</span>
			    </span>
		     </p>
		</div>
		<div class="double-checks clearfix">
    		<label>Max users per group</label>
    		<div class="form-row">
    			<p class="clearfix">
    				<label for="vm_per_user_unlimited">Unlimited</label>
    				<input type="checkbox" id="vm_per_user_unlimited" name="vm_per_user_unlimited" class="unlimited" checked="checked">
    			</p>
    		</div>
    		<div class="form-row">
    			<p class="clearfix">
    				<label for="vm_per_user_limited">Limited</label>
    				<input type="checkbox" id="vm_per_user_limited" name="vm_per_user_limited" class="limited">
       				<input type="text" id="vm_user_limited_num"/>
       				 
    			</p>
    		</div>
    		
    	</div> 
    	<!--<div class="radios clearfix">
    		<label>Max users per group</label>
    		<div class="radio-wrap">
	    		
	            <input type="radio" name="radio1" value="1" id="vm_radio_unlimited" checked="checked">
	            <label for="vm_radio_unlimited">Unlimited</label>
	            <input type="radio" name="radio1" value="0" id="vm_radio_limited" >
	            <label for="vm_radio_limited">Limited</label>
	            <input type="text" id="vm_radio_limited_num" name="vm_radio_limited_num"/>
    		</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>
    	{% for key in groups.items %}
    		{% endfor %}
    	
    	<ul class="clearfix">
    		
    		<li><a href="#vm_1" id="vm_1"><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>
    	</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> 
    <div class="not-foo">
	    <div class="group vm_1">  
	    	<a href="#icons" class="delete"><strong>X</strong> remove resource</a>
		    <fieldset class="quota vm" style="background:none;">
		    	<legend>VM</legend>
		    	<div class="form-row">
		    		<p class="clearfix">
		    			<label for="num_vms">Total VMs</label>
		    			<input type="text" name="num_vms">
		    			<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 VMs per user</label>
		    		<div class="form-row">
		    			<p class="clearfix">
		    				<label for="vm_per_user_unlimited">Unlimited</label>
		    				<input type="checkbox" id="vm_per_user_unlimited" name="vm_per_user_unlimited" class="unlimited" checked="checked">
		    			</p>
		    		</div>
		    		<div class="form-row">
		    			<p class="clearfix">
		    				<label for="vm_per_user_limited">Limited</label>
		    				<input type="checkbox" id="vm_per_user_limited" name="vm_per_user_limited" class="limited">
		       				<input type="text" id="vm_per_user_limited_num" name="vm_per_user_limited_num"/>
		       				 
		    			</p>
		    		</div>
		    		
		    	</div> 
		    </fieldset>
		    <fieldset class="quota cpu" style="background:none;">
		    	 
		    	<legend>cpu</legend>
		    	<div class="form-row">
		    		<p class="clearfix">
		    			<label for="num_cpu">Total cpus</label>
		    			<input type="text" name="num_cpu">
		    			<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 cpus per user</label>
		    		<div class="form-row">
		    			<p class="clearfix">
		    				<label for="cpu_per_user_unlimited">Unlimited</label>
		    				<input type="checkbox" id="cpu_per_user_unlimited" name="cpu_per_user_unlimited" class="unlimited" checked="checked">
		    			</p>
		    		</div>
		    		<div class="form-row">
		    			<p class="clearfix">
		    				<label for="cpu_per_user_limited">Limited</label>
		    				<input type="checkbox" id="cpu_per_user_limited" name="cpu_per_user_limited" class="limited">
		       				<input type="text" id="cpu_user_limited_num" name="cpu_user_limited_num"/>
		       				 
		    			</p>
		    		</div>
		    		
		    	</div> 
		    </fieldset>
		    <fieldset class="quota ram">
		    	 
		    	<legend>ram</legend>
		    	<div class="form-row">
		    		<p class="clearfix">
		    			<label for="num_ram">Total ram</label>
		    			<input type="text" name="num_ram">
		    			<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 ram per user</label>
		    		<div class="form-row">
		    			<p class="clearfix">
		    				<label for="ram_per_user_unlimited">Unlimited</label>
		    				<input type="checkbox" id="ram_per_user_unlimited" name="ram_per_user_unlimited" class="unlimited" checked="checked">
		    			</p>
		    		</div>
		    		<div class="form-row">
		    			<p class="clearfix">
		    				<label for="ram_per_user_limited">Limited</label>
		    				<input type="checkbox" id="ram_per_user_limited" name="ram_per_user_limited" class="limited">
		       				<input type="text" id="ram_user_limited_num"/>
		       				 
		    			</p>
		    		</div>
		    		
		    	</div> 
		    </fieldset>
		</div>    
		<div class="group storage_1">
			<a href="#icons" class="delete"><strong>X</strong> remove resource</a>	
		    <fieldset class="quota storage">
		    	<legend>STORAGE</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="storage_per_user_unlimited">Unlimited</label>
		    				<input type="checkbox" id="storage_per_user_unlimited" name="storage_per_user_unlimited" class="unlimited" checked="checked">
		    			</p>
		    		</div>
		    		<div class="form-row">
		    			<p class="clearfix">
		    				<label for="storage_per_user_limited">Limited</label>
		    				<input type="checkbox" id="storage_per_user_limited" name="storage_per_user_limited" class="limited">
		       				<input type="text" id="storage_user_limited_num"/> 
		    			</p>
		    		</div>
		    		
		    	</div> 
		    </fieldset>
	    </div>
	</div>
    <div class="form-row submit">
   		<input type="submit" value="SUBMIT" class="submit altcol" autocomplete="off">
	</div>     
</form>
	 
<script>
	
</script>	 
 
{% endblock %}