{% block cms_menu_item_list %}
{% macro recursiveMenu(item, languageId, level, ob_project_base_url, mediaLocation, countryId) %}
	{% set hasMoreChild = 0 %}
	{% if item.children is defined and item.children|length %}
		{% set hasMoreChild = 1 %}
	{% endif %}

	{% set itemId = item.id %}
    {% set parentId = item.parentId %}
    {% set referenceId = item.referenceId %}
    {% set itemType = item.itemType %}
	<li class="dd-item" data-id="{{ itemId }}" data-parent-id="{{ parentId }}" data-item-type="{{ itemType }}" data-item-reference-id="{{ referenceId }}">
		<div class="dd-handle"><i class="fa fa-bars pull-left"></i></div>
		<div class="panel panel-default">
        	<div class="panel-heading">
        		<span>
        			{% for itemLanguage in item.languageMapping %}
						{% if itemLanguage.languageId == languageId %}
							{{ itemLanguage.itemLabel }}
						{% endif %}
					{% endfor %}
                </span>

                <a href="javascript:void(0)" data-hover="tooltip" title="{{ 'delete' | trans({}, 'app') }}" data-placement="top" class="btn-xs sub-shop-btn js-item-delete" data-original-title="{{ 'delete' | trans({}, 'app') }}"><i class="fa fa-trash-o"></i></a>
				<i class="fa fa-chevron-up pull-right collapsed" data-target="#item_detail_{{ itemId }}" data-toggle="collapse"></i>
        	</div>

        	<div class="panel-body collapse" id="item_detail_{{ itemId }}" >
				<div class="dashboard-list-block brand-block">
                	<div class="tab-block">
                    	<ul class="js-item-language-tab nav nav-tabs" data-current-lang-id={{ languageId }}>
                        	{% for itemCountry in country %}
                            	{% if itemCountry.id == countryId %}
                                	{% for key,languageItem in itemCountry.language %}
                                    	<li {{ language[key].id == languageId ? 'class="active"' : '' }}><a href="#item_lang_detail_{{ itemId~'_'~language[key].id }}" data-toggle="tab"> {{ language[key].name }} </a></li>
									{% endfor %}
								{% endif %}
							{% endfor %}
						</ul>

						<div class="js-item-language-tab-content tab-content">
							{% for langKey,lang in item.languageMapping %}
								<div class="tab-pane fade {{ lang.languageId == languageId ? 'active in' : '' }}" id="item_lang_detail_{{ itemId~'_'~lang.languageId }}">
									<div class="form-group">
										<label for="url_{{ itemId~"_"~lang.languageId }}">{{ "cms.admin.menu.form.url.title" | trans }}</label><em>{{ "cms.admin.menu.form.eg" | trans }} “{{ "cms.admin.menu.form.url.example" | trans }}”</em>
										<select class="js-menu-url-targer" data-target="urlTarget_{{ itemId~"_"~lang.languageId }}">
											<option value="same-tab" {% if lang.urlTarget == 'same-tab' %}selected{% endif %}>{{ "cms.admin.menu.form.url_target.same_tab" | trans }}</option>
											<option value="new-tab" {% if lang.urlTarget == 'new-tab' %}selected{% endif %}>{{ "cms.admin.menu.form.url_target.new_tab" | trans }}</option>
											<option value="new-window" {% if lang.urlTarget == 'new-window' %}selected{% endif %}>{{ "cms.admin.menu.form.url_target.new_window" | trans }}</option>
										</select>
										<input type="hidden" id="urlTarget_{{ itemId~"_"~lang.languageId }}" name="urlTarget_{{ itemId~"_"~lang.languageId }}" value="{{ lang.urlTarget }}">
										{% if itemType == 'custom' %}
											<input type="text" id="url_{{ itemId~"_"~lang.languageId }}" name="url_{{ itemId~"_"~lang.languageId }}"  placeholder="{{ "cms.admin.menu.form.url.placeholder" | trans }}" class="form-control" value="{{ lang.url }}">
                                        {% else %}
                                        	{% if itemType=='page' and referenceId==0 %}
                                            	{% set urlItemclass = "form-control js-set-slug" %}
											{% else %}
                                            	{% set urlItemclass = "form-control" %}
											{% endif %}
                                            <input type="text" class="{{ urlItemclass }}" id="url_{{ itemId~"_"~lang.languageId }}" name="url_{{ itemId~"_"~lang.languageId }}" value="{{  lang.url }}" data-url-prefix = "{{ (ob_project_base_url|trim('/')) }}" data-value = "{{ lang.url }}" >
                                        {% endif %}
                                        {# error #}
									</div>

									<div class="row">
										<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                        	<div class="form-group">
                                            	<label for="itemLabel_{{ itemId~"_"~lang.languageId }}">{{ "cms.admin.menu.form.item_label.title" | trans }}</label><em>{{ "cms.admin.menu.form.eg" | trans }} “{{ "cms.admin.menu.form.item_label.example" | trans }}”</em>
                                                {% if itemType=='page' and referenceId==0 and langKey == 0 %}
                                                	{% set labelItemclass = "form-control js-set-label" %}
												{% else %}
                                                	{% set labelItemclass = "form-control" %}
												{% endif %}
												<input type="text" id="itemLabel_{{ itemId~"_"~lang.languageId }}" name="itemLabel_{{ itemId~"_"~lang.languageId }}"  placeholder="{{ "cms.admin.menu.form.item_label.placeholder" | trans }}" class="{{ labelItemclass }} js-required" data-find-div="item_lang_detail_{{ itemId~"_"~lang.languageId }}" data-menu-id="{{ item.menuId.id }}" data-item-id="{{ itemId }}" value="{{ lang.itemLabel }}">
                                            	{# error #}
											</div>
										</div>

										<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                        	<div class="form-group">
                                            	<label for="title_{{ itemId~"_"~lang.languageId }}">{{ "cms.admin.menu.form.title.title" | trans }}</label><em>{{ "cms.admin.menu.form.eg" | trans }} “{{ "cms.admin.menu.form.title.example" | trans }}”</em>
                                            	<input type="text" id="title_{{ itemId~"_"~lang.languageId }}" name="title_{{ itemId~"_"~lang.languageId }}"  placeholder="{{ "cms.admin.menu.form.title.placeholder" | trans }}" class="form-control" value="{{ lang.title }}">
												{# error #}
											</div>
										</div>
									</div>
								</div>
							{% endfor %}
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                    	<div class="form-group">
                    		<label for="cssClasse_{{ itemId }}">{{ "cms.admin.menu.form.css_classes.title" | trans }}</label><em>{{ "cms.admin.menu.form.eg" | trans }} “{{ "cms.admin.menu.form.css_classes.example" | trans }}”</em>
                    		<input type="text" id="cssClasse_{{ itemId }}" name="cssClasse_{{ itemId }}"  placeholder="{{ "cms.admin.menu.form.css_classes.placeholder" | trans }}" class="form-control" value="{{ item.cssClasse }}">
							{# error #}
						</div>
					</div>

                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                    	<div class="form-group">
                        	<label for="cssIcon_{{ itemId }}">{{ "cms.admin.menu.form.css_icon.title" | trans }}</label><em>{{ "cms.admin.menu.form.eg" | trans }} “{{ "cms.admin.menu.form.css_icon.example" | trans }}”</em>
                        	<input type="text" id="cssIcon_{{ itemId }}" name="cssIcon_{{ itemId }}"  placeholder="{{ "cms.admin.menu.form.css_icon.placeholder" | trans }}" class="form-control" value="{{ item.cssIcon }}">
							{# error #}
						</div>
					</div>
				</div>

				<div class="upload-btn-block pull-left">
                	<label class="file-input-wrap pull-left">
                    	<span class="admin-custom-btn-gray label-name" href="javascript:void(0)">{{ "cms.admin.menu.form.background_image.title" | trans }}</span>
                    	<input type="file" id="Image_{{ itemId }}" name="Image_{{ itemId }}"  class="form-control js-menu-item-background-image" data-route="office_brain_cmsbundle_cmsmenuadmin_uploadmenuitemImageajax">
                        {# error #}            
					</label>

                    <div class="pull-right img-width-overlay js-image-wrapper {% if item.backgroundImage == '' %}hidden {% endif %}">
						{% if item.backgroundImage != '' %}
                        	<img src="{{ asset(mediaLocation~item.backgroundImage)  }}" class="js-menu-item-image img-responsive no-hidden"/>
						{% endif %}
                        <a href="javascript:void(0)"><i class="fa fa-times-circle"></i></a>
					</div>
				</div>
			</div>
        </div>

		<input type="hidden" id="backgroundImage_{{ itemId }}" name="backgroundImage_{{ itemId }}" class="js-background-image" value="{{ item.backgroundImage }}">
		<input type="hidden" id="sortOrder_{{ itemId }}" name="sortOrder_{{ itemId }}" class="js-sort-order" value="{{ item.sortOrder }}">
		<input type="hidden" id="itemType_{{ itemId }}" name="itemType_{{ itemId }}" value="{{ item.itemType }}">
        <input type="hidden" id="parentId_{{ itemId }}" name="parentId_{{ itemId }}" class="js-parent-id" value="{{ item.parentId }}">

		{% if hasMoreChild %}
	    	{% set level = level + 1  %}
	        <ol class="dd-list">
	        	{% for child in item.children %}
	            	{{ _self.recursiveMenu(child, languageId, level, ob_project_base_url, mediaLocation, countryId) }}
				{% endfor %}
			</ol>
		{% endif %}
	</li>
{% endmacro %}

<div class="dd hidden">
	<h2 class="js-no-menu-item {% if menu|length != 0 %}hidden{% endif %}">No Menu Item Found</h2>
	<ol class="dd-list">
	{% if menu %}
		{% for item in menu %}
			{{ _self.recursiveMenu(item, languageId, 1, ob_project_base_url, mediaLocation, countryId) }}
		{% endfor %}
	{% endif %}
	</ol>
</div>

{% endblock cms_menu_item_list %}