<style>
	.color-picker{	
		width: 100%;
		border: 1px solid lightgray;
		padding: 5px;
		font-size: 10px;
		font-weight: bold;
	}
	
	.actionbuttons_settings_new{
		display: none;
	}
</style>
<div class="col s12 m12"> <h5>Action Buttons</h5></div>

{% if module_settings.actionbuttons|length > 0 %}
{% for actionbutton in module_settings.actionbuttons %}
 <div class="col s12 m6">
								<ul class="collection">
							 
					
						    <li class="collection-item" field-name="id"  field-group="actionbuttons_settings_{{actionbutton.id}}" field-validation="actionbuttons_settings" style="display: none">
						     
						     <input type="hidden" name="settings[id]" value="{{actionbutton.id}}"  param-name="id">
						  
						      </li>
						      
						       <li class="collection-item" field-name="label"  field-group="actionbuttons_settings_{{actionbutton.id}}" field-validation="actionbuttons_settings">
						     
						      <b>Button Label: </b><br>
						      <div class="details_content">
							      <span class=" flow-text">{{actionbutton.label | trans}}</span>
						      </div>
						      <div class="edit_content hide">
								
									    <input type="text" name="settings[label]" value="{{actionbutton.label}}"  param-name="label">
						      </div>
						      
						      </li>
						      
						      
							    </ul>
						</div>
						
				
						
						 <div class="col s12 m6">
								<ul class="collection">
						
						      
						       <li class="collection-item" field-name="color"  field-group="actionbuttons_settings_{{actionbutton.id}}" field-validation="actionbuttons_settings">
						     
						      <b>Button Color: </b><br>
						      
						      
						      <div class="details_content">
						      		<div style="padding: 5px;">
							      			<div class="color-picker {{actionbutton.color}}" color-name="{{actionbutton.color}}">
								      			{{actionbutton.color}}
							      			</div>						    
							      	</div>
						      </div>
						      <div class="edit_content hide">
							  		  <input type="hidden" name="settings[color]" {% if actionbutton.color is defined %} value="{{actionbutton.color}}" {% endif %} param-name="color">
								      <h5>Colors</h5>
								      <div class="row">								      
									  {% for basiccolor,variations in theme_colors%}
							      		<div class="col s6 m3" style="padding: 5px;">
							      			<div class="color-picker basic_color {{basiccolor}}" color-name="{{basiccolor}}">{{basiccolor}}</div>						    
							      		</div>
								      {% endfor %}
								      </div>
						      		
							      	  <div class="clearfix"></div>
						      
						      </div>
						      
						      
						      </li>
						      
						      
							    </ul>
						</div>
					
						
						<div class="col s12 m12">
								<ul class="collection">		      
							    
							    
							     <li class="collection-item" field-name="icon"  field-group="actionbuttons_settings_{{actionbutton.id}}" field-validation="actionbuttons_settings">
						     	      
						      <b>Icon: </b><br>
						      <div class="details_content">
						      	<span class="flow-text">{% if actionbutton.icon!="" %}<i class="material-icons medium">{{actionbutton.icon}}</i>{% else %}None Defined{% endif %}</span>
						      </div>
						      <div class="edit_content hide actionbutton_icon_{{actionbutton.id}}">
							    <input name="settings[icon]" class="module_icon_select" type="hidden" param-name="icon" value="{{actionbutton.icon}}">
							    <div class="row">
								    <div class="col s12">
									 <div class="valign-wrapper">
									 <span class="flow-text valign">Currently Selected: &nbsp;&nbsp;</span>
									 <i class="material-icons medium valign" class="current_module_icon">{{actionbutton.icon}}</i>
									 </div>	
									 
									</div>
							    </div>
							    <div class="row" style="max-height: 200px; overflow-x: scroll;">
								 
								    {% for iconname,icon in material_icons %}
								    	<div class="col s1 iconselect center-align {% if actionbutton.icon==iconname %}selected{% endif %}" onclick="javascript:setIconField('actionbutton_icon_{{actionbutton.id}}','{{iconname}}')" icon-name="{{iconname}}"><i class="material-icons">{{iconname}}</i>
									    	<div class="clearfix"></div>
								    	</div>
								    {% endfor %}
								    <div class="clearfix"></div>							    
							    </div>
							    <div class="clearfix"></div>
							  </div>
						      
						      
						      </li>
							    
							  {% include 'themes/default/config/module/condition-field.html' with { is_group: "true", condition_rows:  actionbutton.show_conditions, f_label: "Show on Conditions", f_name: "show_conditions", f_group: "actionbuttons_settings_"~actionbutton.id, f_validation: "actionbuttons_settings"} %}   
							 
						      
						      {% include 'themes/default/config/module/update-field.html' with { is_group: "true", condition_rows:  actionbutton.update_fields, f_label: "Update Fields", f_name: "update_fields", f_group: "actionbuttons_settings_"~actionbutton.id, f_validation: "actionbuttons_settings"} %} 
						      
						      								  
							  
						      
						      
						      
							    </ul>
						</div>
						
						
						
						<div class="col s12 m12 ">
								<ul class="collection">		      
							    
							    
						      <li class="collection-item" field-name="create_record"   field-group="actionbuttons_settings_{{actionbutton.id}}" field-validation="actionbuttons_settings">
						      <b>Create Related Record: </b><br>
						      <div class="details_content"><span class=" flow-text">
							      {% if configured_modules[actionbutton.create_record] is defined %}
								  {{configured_modules[actionbutton.create_record].route.label}} ({{actionbutton.create_record}}){% endif %} 
							  </span>
						      </div>
						      <div class="edit_content hide">
							      <select name="settings[create_record]" value=""  param-name="create_record" >
								      <option value="" selected="">None</option>
								      {% for relmodule,relfields in rel_modules_create %}
								      <option value="{{relmodule}}"  {% if actionbutton.create_record == relmodule %}selected{% endif %} >{{configured_modules[relmodule].route.label}} ({{relmodule}}) </option>
								      {% endfor %}
							      </select>
							      <br><br><div class="clearfix"></div>
						      </div>
						       
							  </li>
						      
						      </ul>
						</div>
						
						
						<div class="col s12 m12 center-align">
		                <a class="btn red edit-group-btn"  field-group="actionbuttons_settings_{{actionbutton.id}}" field-validation="actionbuttons_settings"><i class="material-icons left">edit</i>Edit</a>
		                <a class="btn grey delete-group-btn"  field-group="actionbuttons_settings_{{actionbutton.id}}" field-validation="actionbuttons_settings" group-name="actionbuttons" record-id="{{actionbutton.id}}" ><i class="material-icons left">close</i>Delete Button</a><br><br>
		                
			            <a class="btn green save-group-btn hide"  field-group="actionbuttons_settings_{{actionbutton.id}}" field-validation="actionbuttons_settings">Save</a>
			            <a class="btn grey hide cancel-group-btn"  field-group="actionbuttons_settings_{{actionbutton.id}}" field-validation="actionbuttons_settings"><i class="material-icons left">close</i>Cancel</a><br><br>
	                </div>
	<hr>                
{% endfor %}
{% endif %}	                
	         <div class="actionbuttons_settings_div" style="display: none">      
<div class="col s12 m6 ">
								<ul class="collection">
							 
					
						    <li class="collection-item" field-name="id"  field-group="actionbuttons_settings_new" field-validation="actionbuttons_settings" style="display: none">
						     
						     <input type="hidden" name="settings[id]" value=""  param-name="id">
						  
						      </li>
						      
						       <li class="collection-item" field-name="label"  field-group="actionbuttons_settings_new" field-validation="actionbuttons_settings">
						     
						      <b>Button Label: </b><br>
						      <div class="details_content">
							      <span class=" flow-text">New Label</span>
						      </div>
						      <div class="edit_content hide">
								
									    <input type="text" name="settings[label]" value=""  param-name="label" required>
						      </div>
						      
						      </li>
						      
						      
							    </ul>
						</div>
						
						
						<div class="col s12 m6 ">
								<ul class="collection">
						
						      
						       <li class="collection-item" field-name="color"  field-group="actionbuttons_settings_new" field-validation="actionbuttons_settings">
						     
						      <b>Button Color: </b><br>
						      
						      
						      <div class="details_content">
						      	
						      </div>
						      <div class="edit_content hide">
							  		  <input type="hidden" name="settings[color]"  param-name="color" value="deep-orange">
								      <h5>Colors</h5>
								      <div class="row">								      
									  {% for basiccolor,variations in theme_colors%}
							      		<div class="col s6 m3" style="padding: 5px;">
							      			<div class="color-picker basic_color {{basiccolor}}" color-name="{{basiccolor}}">{% if basiccolor=="deep-orange" %}<i class="material-icons tiny color-selected">done</i>{% endif %}{{basiccolor}}</div>						    
							      		</div>
								      {% endfor %}
								      </div>
						      
						      </div>
						      
						      
						      </li>
						      
						      
							    </ul>
						</div>
					
						
						<div class="col s12 m12 ">
								<ul class="collection">		      
							    
							    <li class="collection-item" field-name="icon"  field-group="actionbuttons_settings_new" field-validation="actionbuttons_settings">
						     	      
						      <b>Icon: </b>
						      <div class="edit_content hide actionbutton_icon_new">
							    <input name="settings[icon]" class="module_icon_select" type="hidden" param-name="icon" value="">
							  
							    <div class="row" style="max-height: 200px; overflow-x: scroll;">
								 
								    {% for iconname,icon in material_icons %}
								    	<div class="col s1 iconselect center-align " onclick="javascript:setIconField('actionbutton_icon_new','{{iconname}}')" icon-name="{{iconname}}"><i class="material-icons">{{iconname}}</i>
									    	<div class="clearfix"></div>
								    	</div>
								    {% endfor %}
								    <div class="clearfix"></div>							    
							    </div>
							    <div class="clearfix"></div>
							  </div>
						      
						      
						      </li>
							    
							    
							     {% include 'themes/default/config/module/condition-field.html' with { is_group: "true", condition_rows: [], f_label: "Show on Conditions", f_name: "show_conditions", f_group: "actionbuttons_settings_new", f_validation: "actionbuttons_settings"} %}   
							 
						      
						      {% include 'themes/default/config/module/update-field.html' with { is_group: "true", condition_rows:  [], f_label: "Update Fields", f_name: "update_fields", f_group: "actionbuttons_settings_new", f_validation: "actionbuttons_settings"} %} 
						      						      
						      
							    </ul>
						</div>
						
						
						
						
						
						
						<div class="col s12 m12 ">
								<ul class="collection">		      
							    
							    
						      <li class="collection-item" field-name="create_record"  field-group="actionbuttons_settings_new" field-validation="actionbuttons_settings">
						      <b>Create Related Record: </b><br>
						      <div class="details_content"><span class=" flow-text">
							
							  </span>
						      </div>
						      <div class="edit_content hide">
							      <select name="settings[create_record]" value=""  param-name="create_record"  >
								      <option value="" selected="">None</option>
								      {% for relmodule,relfields in rel_modules_create %}
								      <option value="{{relmodule}}">{{configured_modules[relmodule].route.label}} ({{relmodule}}) </option>
								      {% endfor %}
							      </select>
							      <br><br><div class="clearfix"></div>
						      </div>
						       
							  </li>
						      
						      </ul>
						</div>
						
												
						
						
						
						
	         </div>
						
						<div class="col s12 m12 center-align">
		                <a class="btn green edit-group-btn"  field-group="actionbuttons_settings_new" field-validation="actionbuttons_settings" onclick="$('.actionbuttons_settings_div').show();"><i class="material-icons left" >add</i>Add New Action Button</a>
			            <a class="btn green save-group-btn hide"  field-group="actionbuttons_settings_new" field-validation="actionbuttons_settings">Save</a>
			            <a class="btn grey hide cancel-group-btn"  onclick="$('.actionbuttons_settings_div').hide();" field-group="actionbuttons_settings_new" field-validation="actionbuttons_settings"><i class="material-icons left">close</i>Cancel</a><br><br>
	                </div>	               
	                
