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

{% load filters %}
{% block headjs %}
	{{ block.super }}	 
	<script src="{{ IM_STATIC_URL }}js/quotas.js"></script>	
{% endblock %}	
{% block page.body %}
 
	
<form action="" method="post" class="withlabels quotas-form">{% csrf_token %}
	 
    <fieldset class="with-info">
    	<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">
    				<span class="info"> 
				    	<em>more info</em>
				    	<span>Help Text Help Text Help Text Text Help Text Help Text</span>
			    	</span>  
    			</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 %}   
            {% with resource_presentation|lookup:g as group_info %} 		
    		<li>
    			<a href="#{{ g }}" id="{{'group_'|add:g}}"><img src="/static/im/images/create-{{ g }}.png" alt="vm"/></a>
    			<input type="hidden" name="{{ 'is_selected_'|add:g }}"  id="{{ 'id_is_selected_'|add:g }}" value="0">
    			<p class="msg">{{ group_info.help_text }}</p>
    		</li>
    		{% endwith %}
            {% endfor %}
    	</ul>
    	
    </fieldset>
   
    <div class="foo">
    
    </div>
    <div class="not-foo">
        {% for g, rs in groups.items %}
        
        <div class="group {{'group_'|add:g}}" id="{{ g }}">
			<a href="#icons" class="delete">X remove resource</a>	
		    {% for r in rs %}
		    {% with resource_presentation|lookup:r as resource_info %}
		    {% with resources|lookup:r as resource%}
		    <fieldset class="quota">
		    	<legend>
		    		{% if resource_info.is_abbreviation %}
		    			{{ r|get_value_after_dot|upper }}
		    		{% else %}
		    			{{ r|get_value_after_dot|capfirst }}
		    		{% endif %}
		    		<span class="info"> 
				    	<em>more info</em>
				    	<span>{{ resource_info.help_text }}</span>
			    	</span>  
		    	</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 {% if resource_info.is_abbreviation %}{{ r|get_value_after_dot|upper }}{% else %}{{ r|get_value_after_dot }}{% endif %}{% if not resource.unit %}s {% endif  %} per user
						{% if resource.unit %} 
						 	({{ resource.unit }})
						{% endif  %}
					</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'}}_proxy" class="unlimited radio" 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'}}_proxy" class="radio limited">
		       				<input 	type="text" 
		       						id="{{'id_'|add:r|add:'_uplimit'}}" 
		       						name="{{r|add:'_uplimit'}}_proxy" 
		       						placeholder="{{ resource_info.placeholder}} " 
		       						{% if resource.unit == 'bytes' %} 
									 	class="dehumanize"
									{% endif  %}
		       						/> 
		    			</p>
		    			<p class="msg"></p>
		    		</div>
		    		
		    	</div>
		    	-->
		    	<div class="form-row">
		    		<p class="clearfix">
		    			<label for="num_storage">
							Max {% if resource_info.is_abbreviation %}{{ r|get_value_after_dot|upper }}{% else %}{{ r|get_value_after_dot }}{% endif %}{% if not resource.unit %}s {% endif  %} per user
						</label>
		    			<input 	type="text" 
		       						id="{{'id_'|add:r|add:'_uplimit'}}_proxy" 
		       						name="{{r|add:'_uplimit'}}_proxy" 
		       						placeholder="{{ resource_info.placeholder}} " 
		       						{% if resource.unit == 'bytes' %} 
									 	class="dehumanize"
									{% endif  %}
		       						/> 
		    			<span class="extra-img">&nbsp;</span>
		         		<span class="info"><em>more info</em><span>Help Text</span></span>
		    		</p>
		    		<p class="msg"></p>
		    	</div>
		    	 
 
 
		    </fieldset>
		    {% endwith %}
		    {% endwith %}
		    {% endfor %}
	    </div>
	    
    	{% endfor %}
	</div>
    {% endwith %}
    {% endwith %}
	 
    <div class="form-row submit">
 
   		<input type="submit" value="CONTINUE" class="submit altcol" autocomplete="off">
 
	</div>     
</form>
	 
<script>
	
</script>	 
 
{% endblock %}