{% extends 'admin\\baseadmin.html.twig' %}
{% block content%}
				<section class="page-content container-fluid">
                    <div class="row">
                        <div class="col-lg-12 col-xl-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="title">{{title|trans({},'configs')}}</div>
									{% if activeLanguage!="" %}
										<a href='{{ url("admin_config_all") }}'>
									{% endif %}
										<div class="language {% if (activeLanguage=="") %}activeLanguage {% endif %}">                                      
												All
										</div>  
									{% if activeLanguage!="" %}
										</a>
									{% endif %}
									{% for language in languages %}
									{% if (language.isActive) %}
  										{% if (language.languageCode != activeLanguage) %}
									   		<a href='{{ url("admin_config",{"language" : language.languageCode}) }}'>
										{% endif %}
										<div class="language{% if (language.languageCode == activeLanguage) %} activeLanguage{% endif %}">                                      
												{{language.languageCode}}									
										</div>  
										{% if (language.languageCode != activeLanguage) %}
											</a>
										{% endif %}
									{% endif %}	
									{% endfor %}


                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)" data-q-action="card-expand"><i class="icon dripicons-expand-2"></i></a></li>
                                    </ul>
                                </div>
                                <div class="card-body">
{{ form_start(form,{"attr":{"style":"width: 100%"}}) }}
									<div class="my-custom-class-for-errors">
										{{ form_errors(form) }}
									</div>
									{% for rowform in forms %}
									<h6 class="card-subtitle text-muted f-w-600 text-uppercase m-t-20 m-b-20 py-2 px-2 bg-light">{{groups[loop.index]}}</h6>
									{% for row in rowform %}
									<div class="form-row" style="">
										{% if row.type == 'CHECKBOX' %}
										<div class="form-group col-md-2">
											<label style="">{{ row.label }}</label>
											{{ form_row( attribute(form,row.inputName),{'attr':{'class':'tgl tgl-light tgl-primary'}} ) }}
										</div>
										{% elseif row.type == 'COLORPICKER' %}
										<div class="form-group col-md-2">
											<label style="float: left;">{{ row.label }}</label>
											{{ form_row( attribute(form,row.inputName) ) }}
											<br>
										</div>
										{% else %}
										<div class="form-group col-md-6">
											{{ form_row( attribute(form,row.inputName) ) }}
										</div>
										{% endif %}
									</div>
									{% endfor %}
									{% endfor %}
                                    <button type="submit" id="std_users_form_save" name="std_users_form[save]" class="btn-primary btn">{{save|trans({},'configs')}}</button>
{{ form_end(form) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

<style>
	.language{
	height: 30px;
	width: 30px;
	background-color :#e5eefd;
	-webkit-border-radius: 100px 100px 100px 100px;
	border-radius: 100px 100px 100px 100px;
	text-align:center;
	float:left;
	margin-right:3px;
	padding-top:3px;    
	cursor:pointer;
	font-size: 14px;
	}

	.activeLanguage, .language:hover{
	background-color :#5accca;
	-webkit-border-radius: 100px 100px 100px 100px;
	border-radius: 100px 100px 100px 100px;
	height: 30px;
	width: 30px;
	text-align:center;
	float:left;
	margin-right:3px;    
	color:#fff !important;    
	}

	.language a{
	color: #999;    
	}
	.title{
		float:left;
		margin-right: 20px;
	}
	
</style>

{% endblock %}
{% block stylesheets %}
		{{parent()}}
		{# Font Awesome #}
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	    {# Artgris FileManager #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrisfilemanager/libs/blueimp-file-upload/css/jquery.fileupload.css') }}">
    	{# Import fengyuanchen/cropper #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.css') }}">
        {# Then the default bundle's CSS #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/css/media.css') }}">
		
{% endblock %}
{% block javascripts %}
{{parent()}}
{#  Jqueri UI #}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
{# jquery.collection.js #}
<script type="text/javascript" src="{{ asset('js/jquery.collection.js') }}"></script>
    
{% include '@ArtgrisMedia/assets/include_js.html.twig' %}

<script>
	$(function() {
		$('.datepicker-single').datepicker({
			format: 'yyyy-mm-dd',
			autoclose: true,
			orientation: "bottom",
			templates: {
				leftArrow: '<i class="icon dripicons-chevron-left"></i>',
				rightArrow: '<i class="icon dripicons-chevron-right"></i>'
			}
		});

		$(".colorpicker").spectrum({
			showInput: true,
			showAlpha: true,
			showInitial: true,
			allowEmpty:true,
			showPalette: true,
			showSelectionPalette: true,
			palette: [
				[$bodycolor, $textcolor],
				[$primary, $secondary, $tertiary],
				[$info, $light, $dark], 
				[$success, $warning, $danger]
			],
			preferredFormat: "hsl",
			localStorageKey: "spectrum.masterconfig",
		});
		$(".colorpicker").show();
		$(".sp-replacer").css({ float: "left", clear: "both" });

	});
	$(document).ready(() => {
		$('.select2').select2();
	})
</script>
{% endblock %}