<!DOCTYPE html>
<!--[if IE 8]>
<html lang="{{ app.request.locale }}" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="{{ app.request.locale }}" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="{{ app.request.locale }}"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
	<meta charset="utf-8"/> <title>Comitium 5{{ (page_title is defined ? " | " ~ page_title : '') }}</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">

	{% include 'Comitium5DesignerBundle:Common:admin-css.html.twig' %}

	<link href="{{ asset('bundles/comitium5designer/global/plugins/jquery-ui/jquery-ui-1.11.4.designer.min.css') }}" rel="stylesheet" type="text/css"/>
	<link href="{{ asset('bundles/comitium5designer/global/plugins/jquery-ui/jquery-ui-1.11.4.designer.structure.min.css') }}" rel="stylesheet" type="text/css"/>
	<link href="{{ asset('bundles/comitium5designer/global/plugins/jquery-ui/jquery-ui-1.11.4.designer.theme.min.css') }}" rel="stylesheet" type="text/css"/>
	<link href="{{ asset('bundles/comitium5designer/global/plugins/bootstrap-datetimepicker/css/datetimepicker.css') }}" rel="stylesheet" type="text/css"/>
	<link href="{{ asset('bundles/comitium5designer/global/plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
	<link href="{{ asset('bundles/comitium5designer/lib/toastr/toastr.min.css') }}" rel="stylesheet" type="text/css"/>
	<link href="{{ asset('bundles/comitium5designer/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.css') }}" rel="stylesheet" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
	<link href="{{ asset('bundles/comitium5designer/css/designer/designer.css') }}" rel="stylesheet" type="text/css"/>
	<link href="{{ asset("bundles/comitium5designer/css/jquery.spellchecker.css") }}" rel="stylesheet" type="text/css"/>
	<link rel="shortcut icon" href="{{ asset('favicon.ico') }}"/>

	<!-- Translations -->
	<script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}" type="text/javascript"></script>
	<script src="{{ path('bazinga_jstranslation_js') }}" type="text/javascript"></script>
	<!-- /Translations -->

	<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}" type="text/javascript"></script>
	<script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/plugins/jquery-2.1.3.min.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/jquery-ui-autocomplete.min.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/plugins/jquery-ui/jquery-ui-1.11.4.designer.min.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/plugins/jcrop/js/jquery.Jcrop.min.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/lib/moment/min/moment.min.js') }}"></script>
	<script src="{{ asset('bundles/comitium5designer/lib/components-underscore/underscore-min.js') }}"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/fix-jquery-ui.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/lib/toastr/toastr.min.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/plugins/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}" type="text/javascript"></script>
	<script src="{{ asset("bundles/comitium5designer/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.ca.js") }}" type="text/javascript"></script>
	<script src="{{ asset("bundles/comitium5designer/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.es.js") }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/scripts/metronic.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/lib/js-signals/dist/signals.min.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/scripts/pagination.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/scripts/ajax.tabs.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/scripts/error-handler.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/plugins/dropzone/dropzone.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/pages/scripts/form-dropzone.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/pages/js/assets.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/js/cslinks/cs-links.class.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/js/csasset/cs-asset.class.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/js/cscustomhtml/cs-custom-html.class.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/global/scripts/class-inheritance.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/drag_drop.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/entities/Actions.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/entities/Css.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/WidgetQueue.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/WidgetStorage.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/ShortcutsManager.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/entities/Template.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/entities/Layout.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/entities/LayoutBreakpoint.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/entities/Breakpoint.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/entities/Toolbar.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/entities/Modal.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/ContentManager.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/entities/Widget.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/js/jquery.spellchecker.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/js/cs-utils.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/js/BlockContent/BlockContent.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/pages/js/image-crop.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/js/form-components.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/CommonDesigner.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/comitium5designer/designer/js/TemplateSelectionModal.js') }}" type="text/javascript"></script>

	{% block designer_js %}{% endblock %}
</head>
<body class="csd-loading">
	{% set locales = get_locales() %}
	{% set displayDropdowns = page.id is defined %}
	{% set displayDropdownsLocales = locales|length > 1 and page.id is defined %}

		<div class="csd-top">
			<div class="csd-top--block-01">
				<div class="logo"></div>
				<div class="info">
					<span>{{ "Subsite" }}</span>
					<span>{{ "cs_admin.designer.editing"|trans }}:
						<em>{{ page is defined ? page.name : template.name }}</em>
					</span>
					<span>{{ "cs_admin.designer.last_modification"|trans }}:
						<em>{{ page is defined ? time_diff(page.updatedAt) : time_diff(template.updatedAt) }}</em>
					</span>
					{% if page is defined %}
							<span>{{ "cs_core.entity.template"|transchoice(1)|title }}:
						{% if page.template is not empty %}
							<em>
								{{ page.template.name }}
							</em>
						{% else %}
							<em>
								{{ "cs_admin.designer.toolbar.withoutTemplate"|trans }}
							</em>
						{% endif %}
							</span>
							<span>
								<a href="#alerta-modal" data-open-select-template-modal-btn >{{ 'cs_admin.designer.toolbar.change-template' | trans }}</a>
							</span>
					{% endif %}
				</div>
			</div>

			<div class="csd-top--block-02">

				<div class="csd-options"> {% block designer_options %}{% endblock %}</div>
				<div class="buttons" data-save-url="{% block designer_save_url %}{% endblock %}" data-cancel-url="{% block designer_cancel_url %}{% endblock %}">
					<a href="#" class="btn defaultBtn btn-cancel" data-action="cancel-form" title="{{ "cs_admin.designer.cancel"|trans }}">
						{{ "cs_admin.designer.cancel"|trans }}
					</a>

					{% if displayDropdowns %}
						<div class="btn-group">
					{% endif %}

					{% set previewUrl = page.id is defined ? path("designer_pages_preview", {pageId: page.id, locale: app.request.get("locale", locales|first.code) }) : "" %}
					{% set label = "cs_admin.designer.save"|transchoice(displayDropdowns ? 1 : 2) %}
					<a href="#" class="btn defaultBtn btn-save" data-action="save-reload" title="{{ label }}">{{ label }}</a>

					{% if displayDropdowns %}
						<a class="btn defaultBtn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-angle-down"></i>
						</a>
						<ul class="dropdown-menu" role="menu">
							<li>
								<a href="#" data-action="save-exit">{{ "cs_admin.designer.save_exit"|trans }}</a>
							</li>
							<li>
								<a href="#" data-action="save-preview" data-url="{{ previewUrl }}">{{ "cs_admin.designer.save_preview"|trans }}</a>
							</li>
							<li>
								<a href="#" data-action="save-preview-dates" data-url="{{ previewUrl }}">{{ "cs_admin.designer.save_preview_dates"|trans }}</a>
							</li>
						</ul>
					{% endif %}

					{% if displayDropdowns %}
						</div>
					{% endif %}

					{% if displayDropdownsLocales %}
						<div class="btn-group">
					{% endif %}
					{% set label = "cs_admin.designer.publish"|transchoice(displayDropdownsLocales ? 1 : 2) %}
					<a href="#" class="btn mainBtn btn-publish" title="{{ label }}">{{ label }}</a>

					{% if displayDropdownsLocales %}
						<a class="btn mainBtn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-angle-down"></i>
						</a>
						<ul class="dropdown-menu" role="menu">
							{% for locale in locales %}
								<li>
									<a href="" data-locale="{{ locale.code }}">{{ 'cs_admin.designer.publish'|transchoice(3,{'%locale%': locale.name|lower})}}</a>
								</li>
							{% endfor %}
						</ul>
					{% endif %}
					{% if displayDropdownsLocales %}
					</div>
					{% endif %}
				</div>
		</div>
	</div>

	<div class="csd-middle">
			<div class="site-wrapper view"> {% block designer_iframe %}{% endblock %}
				</div>
				<div class="code-wrapper view" style="display:none;">
					<textarea name="template_code" id="template_code"></textarea>
				</div>
				{% block designer_menu %}{% endblock %}
			</div>

	<div class="csd-bottom"> {% block designer_bottom %}{% endblock %}
			</div>

	{{ render(controller('Comitium5DesignerBundle:CommonConfig:renderCKEditorConfig')) }}

	{% block designer_bottomjs %}
		<script type="text/javascript">
			// FIX ME
			Pagination.init();
			// END FIX ME

			CKEDITOR.removeAllListeners();
			CKEDITOR.disableAutoInline = true;

			CKEDITOR.on('instanceReady', function (event) {
				var timeout = null;

				event.editor.on('simpleuploads.startUpload', function (event) {
					event.data.extraFields = {
					"type": "image"
					};
				});

                event.editor.on('simpleuploads.finishedUpload', function (event) {
                    event.editor.fire('change');
                });

                event.editor.on('change', function(event) {

                    var field = jQuery(event.editor.element.$).parent(),
                        widget = jQuery(field).closest(Widget.TAG),
                        widgetObject = jQuery(widget).data('object');

                    widgetObject.fields[widgetObject.locale.locale][field.attr('name')] = event.editor.getData();

                    if (timeout !== null) {
                        clearTimeout(timeout);
                    }

                    timeout = setTimeout(function(){
                        widgetObject.sync();
                        widgetObject.enableActionButtons();
                    }, 500);
                });

                event.editor.on('blur', function(event) {
                    event.editor.setData(event.editor.getData().replace(/([^\s])&nbsp;([^\s])/igm, '$1 $2'));
                });
            });

            var formComponents = new FormComponents(null);
            formComponents.bindAssetWidgetActions();

			CommonDesigner.init();
		</script>
	{% endblock %}
</body>
</html>
