{% extends 'Comitium5DesignerBundle:Designer:designer-base.html.twig' %}
{% block designer_js %}
    <script src="{{ asset('bundles/comitium5designer/designer/js/generic.js') }}" type="text/javascript"></script>
{% endblock %}
{% block designer_options %}
    <ul id="designer-tabs">
        <li data-tab="1" data-mode="vle" class="active vle">{{ 'cs_admin.designer.tabs.structure'|trans }}</li>
        <li data-tab="2" data-mode="vce" class="vce" >{{ 'cs_admin.designer.tabs.content'|trans }}</li>
    </ul>
    <a href="#" class="csd-show-all" title="{{ "cs_admin.designer.show_all"|trans }}" style="display:none;">
        {{ "cs_admin.designer.show_all"|trans }}
    </a>
{% endblock %}
{% block designer_save_url %}
{{ path('designer_save_template', {'templateId': template.id}) }}
{% endblock %}
{% block designer_cancel_url %}
{{ path('designer_template_index') }}
{% endblock %}
{% block designer_iframe %}
    <iframe name="template_html"
            id="template_html"
            src="{{ path('designer_generate_template', {'templateId': template.id}) }}"
            data-columns="{{ template.columns }}"
            data-json="{{ jsonUrl }}"
            data-get-widgets="{{ widgetsUrl }}"
    ></iframe>
{% endblock %}
{% block designer_menu %}
{#    {% if is_granted('update','templates') %}#}
        <div data-tab-content="1" class="widgets-wrapper">
            <div class="title">{{ "cs_admin.designer.layouts.title"|trans }}</div>
            <div class="desc">{{ "cs_admin.designer.layouts.description"|trans }}</div>
            <div class="list">
                <ul>
                    {% set predefinedLayouts = min(template.columns, designer.predefined_layouts) %}
                    {% for i in 1..predefinedLayouts %}
                        {% set title = ((i == 1 ? "cs_admin.designer.layouts.predefined.column" : "cs_admin.designer.layouts.predefined.columns")|trans)|format(i) %}
                        <li class="draggable">
                            <a href="javascript: void(0);" title="{{ title }}" data-columns="{{ i }}">
                                <img src="{{ asset('bundles/comitium5designer/statics/designer-statics/images/layout_img/csd-ico-layout-%d-cols.gif'|format(i)) }}" />{{ title }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="search">
                <form action="{{ path('designer_search_layouts') }}" method="post" data-type="layouts">
                    <label for="search">{{ "cs_admin.designer.layouts.search"|trans }}</label>
                    <input type="text" name="search" id="search" value="" />
                </form>
                <ul class="results layouts"></ul>
            </div>
        </div>
{#    {% endif %}#}
{#    {% if is_granted('update','pages') %}#}
        <div data-tab-content="2" class="widgets-wrapper"  style="{{ is_granted('update','templates') ? 'display:none;' : '' }}">
            <div class="title">{{ "cs_admin.designer.widgets.title"|trans }}</div>
            <div class="desc">{{ "cs_admin.designer.widgets.description"|trans }}</div>
            <div class="list">
                <ul>
                    {% for widget in widgets %}
                        <li data-widget-id="{{ widget.id }}" class="draggable-widget">
                            <a href="javascript:void(0)">
                                <i data-type="favorite" class="fa fa-star" aria-hidden="true"></i>
                                {{ widget.title is not empty ? widget.title : widget.name }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="search">
                <form action="{{ path('designer_search_widgets') }}" method="post" data-type="widgets">
                    <label for="search">{{ "cs_admin.designer.widgets.search"|trans }}</label>
                    <input type="text" name="search" id="search" value="" />
                </form>
                <ul class="results widgets"></ul>
            </div>
        </div>
{#    {% endif %}#}
{% endblock %}
{% block designer_bottom %}
    <div class="icon-group views">
        <a href="javascript: void(0);" title="{{ "cs_admin.designer.buttons.layout_view"|trans }}" class="layout active" data-wrapper="site-wrapper"></a>
        <a href="javascript: void(0);" title="{{ "cs_admin.designer.buttons.code_view"|trans }}" class="code" data-wrapper="code-wrapper"></a>
    </div>
    <div class="icon-group responsive-views" data-default="{{ designer.default_breakpoint }}">
        {% for type, data in breakpoints %}
            <a href="javascript: void(0);" title="{{ data.name }}" class="breakpoint{{ type }} {{ data.key }}" data-value="{{ type }}"></a>
            <div class="sizes-breakpoints" data-breakpoint="{{ type }}">
                {% for breakpoint in data.sizes %}
                    {% set width = ((breakpoint.maxWidth) ? breakpoint.maxWidth : breakpoint.minWidth) %}
                    <span data-value="{{ breakpoint.id }}" data-width="{{ width }}">{{ width ~ "cs_admin.designer.responsive.unit_sizes"|trans }}</span>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
    <div class="icon-group widgets-views">
        <a href="javascript: void(0);" title="{{ "cs_admin.designer.buttons.options.bar_left"|trans }}" class="left" data-option="bar-left"></a>
        <a href="javascript: void(0);" title="{{ "cs_admin.designer.buttons.options.bar_hidden"|trans }}" class="hidden" data-option="no-bar"></a>
        <a href="javascript: void(0);" title="{{ "cs_admin.designer.buttons.options.bar_right"|trans }}" class="right active" data-option="bar-right"></a>
    </div>
{% endblock %}
