{% extends 'Comitium5DesignerBundle:Designer:designer-base.html.twig' %}

{% block designer_js %}
    <script src="{{ asset('bundles/comitium5designer/designer/js/generic_content_editor.js') }}" type="text/javascript"></script>
{% endblock %}
{% block designer_options %}
    <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_page', {'pageId': page.originId}) }}
{% endblock %}
{% block designer_cancel_url %}
    {{ app.request.get('cs-url-referer') }}
{% endblock %}
{% block designer_iframe %}
    {% include "Comitium5DesignerBundle:Designer:designer-assign-template-form.html.twig" %}
    {% if hasAssignedTemplate == true %}
        <iframe name="template_html" id="template_html"
            src="{{ path('designer_generate_page', {'pageId': page.originId, 'metaCode': 1}) }}"
            data-columns="{{ template.columns }}" data-json="{{ jsonUrl }}" data-get-widgets="{{ widgetsUrl }}"></iframe>
    {% endif %}
{% endblock %}
{% block designer_menu %}
    <div data-tab-content="2" class="widgets-wrapper">
        <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>
{% endblock %}
{% block designer_bottom %}
    <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 %}
{% block designer_bottomjs %}
    {{ parent() }}
    <script type="text/javascript">
        BlockContent.init('{{ constant('Comitium5\\ApiClientBundle\\ApiClient\\ResourcesTypes::PAGE') }}', {{ page.id }});
    </script>
{% endblock %}
