{#
#}
{% extends '@MauticCore/Default/content.html.twig' %}

{% block mauticContent %}focus{% endblock %}

{% block headerTitle %}
  {% if entity.id %}
    {{ 'mautic.focus.edit'|trans({'%name%': entity.name|trans}) }}
  {% else %}
    {{ 'mautic.focus.new'|trans }}
  {% endif %}
{% endblock %}

{% block content %}
  {{ includeStylesheet('plugins/MauticFocusBundle/Assets/css/focus.css') }}
  {{ form_start(form) }}
    <!-- start: box layout -->
    <div class="box-layout">
        <!-- container -->
        <div class="col-md-9 height-auto bdr-r pa-md">
            <div class="row">
                <div class="col-md-6">{{ form_row(form.name) }}</div>
                <div class="col-md-6">{{ form_row(form.website) }}</div>
            </div>
            <div class="row">
                <div class="col-md-12">{{ form_row(form.description) }}</div>
            </div>
        </div>
        <div class="col-md-3 height-auto">
            <div class="pr-lg pl-lg pt-md pb-md">
                {{ form_row(form.category) }}
                {{ form_row(form.isPublished) }}
                {{ form_row(form.publishUp) }}
                {{ form_row(form.publishDown) }}
                <hr />
                {% include '@MauticCore/FormTheme/Fields/_utm_tags_fields.html.twig' %}
            </div>
        </div>
    </div>

    <div class="hide builder focus-builder">
        <div class="builder-content">
            <div class="website-preview">

                <!-- Form to get preview URL -->
                <div class="website-placeholder hide well well-lg col-md-6 col-md-offset-3">
                    <div class="row">
                        <div class="mautibot-image col-xs-3 text-center">
                            <img class="img-responsive" style="max-height: 125px; margin-left: auto; margin-right: auto;" src="{{ mautibotGetImage('wave') }}"/>
                        </div>
                        <div class="col-xs-9">
                            <h4><i class="ri-double-quotes-l"></i> {{ 'mautic.core.noresults.tip'|trans }}
                                <i class="ri-double-quotes-r"></i></h4>
                            <p class="mt-md">
                                {{ 'mautic.focus.website_placeholder'|trans }}
                            </p>
                            <div class="input-group">
                                <input id="websiteUrlPlaceholderInput" disabled type="text" class="form-control" placeholder="https://example.com">
                                <span class="input-group-btn">
                                    <button class="btn btn-ghost btn-fetch" type="button">{{ 'mautic.focus.fetch_snapshot'|trans }}</button>
                                </span>
                            </div>
                            <div class="help-block hide"></div>
                        </div>
                    </div>
                </div>

                <!-- Viewport switcher -->
                <div class="viewport-switcher text-center">
                    <div class="btn btn-sm btn-success btn-nospin btn-viewport" data-viewport="desktop">
                        <i class="ri-smartphone-line ri-2x"></i>
                    </div>
                </div>

                <!-- Website preview block -->
                <div id="websiteScreenshot">
                    <div class="screenshot-container text-center">
                        <div class="preview-body center"></div>
                        <div id="websiteCanvas"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Builder -->
        <div class="builder-panel builder-panel-focus">
            <div class="builder-panel-top">
                <p>
                    <button type="button" class="btn btn-primary btn-close-builder btn-block" onclick="Mautic.closeFocusBuilder(this);">{{ 'mautic.core.close.builder'|trans }}</button>
                </p>
            </div>
            {% set class = form.type.vars.data is defined and form.type.vars.data is not empty ? 'focus-type-' ~ form.type.vars.data : 'focus-type-all' %}
            {% set class = form.style.vars.data is defined and form.style.vars.data is not empty ? class ~ ' focus-style-' ~ form.style.vars.data : class ~ ' focus-style-all' %}
            <div class="{{ class }}" style="margin-top: 40px;" id="focusFormContent">
                <!-- start focus type -->
                <div class="panel panel-default" id="focusType">
                    <div class="panel-heading">
                        <h4 class="focus-type-header panel-title">
                            <a role="button" data-toggle="collapse" href="#focusTypePanel" aria-expanded="true" aria-controls="focusTypePanel">
                                <i class="ri-focus-2-line"></i> {{ 'mautic.focus.form.type'|trans }}
                            </a>
                        </h4>
                    </div>
                    <div id="focusTypePanel" class="panel-collapse collapse in" role="tabpanel">
                        {{ form_widget(form.type) }}
                        <ul class="list-group mb-0">
                            <li data-focus-type="form" class="focus-type list-group-item pl-sm pr-sm">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <i class="ri-2x ri-edit-box-line text-interactive"></i>
                                    </div>
                                    <div class="col-xs-10">
                                        <h4 class="list-group-heading">{{ 'mautic.focus.form.type.form'|trans }}</h4>
                                        <p class="list-group-item-heading small">{{ 'mautic.focus.form.type.form_description'|trans }}</p>
                                    </div>
                                </div>
                            </li>

                            <li class="focus-properties focus-form-properties list-group-item pl-sm pr-sm" style="display: none;"></li>

                            <li data-focus-type="notice" class="focus-type list-group-item pl-sm pr-sm">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <i class="ri-2x ri-megaphone-line text-warning"></i>
                                    </div>
                                    <div class="col-xs-10">
                                        <h4 class="list-group-heading">{{ 'mautic.focus.form.type.notice'|trans }}</h4>
                                        <p class="list-group-item-heading small">{{ 'mautic.focus.form.type.notice_description'|trans }}</p>
                                    </div>
                                </div>
                            </li>

                            <li class="focus-properties focus-notice-properties list-group-item pl-sm pr-sm" style="display: none;"></li>

                            <li data-focus-type="link" class="focus-type list-group-item pl-sm pr-sm">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <i class="ri-2x ri-corner-up-right-line text-info"></i>
                                    </div>
                                    <div class="col-xs-10">
                                        <h4 class="list-group-heading">{{ 'mautic.focus.form.type.link'|trans }}</h4>
                                        <p class="list-group-item-heading small">{{ 'mautic.focus.form.type.link_description'|trans }}</p>
                                    </div>
                                </div>
                            </li>

                            <li class="focus-properties focus-link-properties list-group-item pl-sm pr-sm" style="display: none;"></li>
                        </ul>
                    </div>

                    <div class="hide" id="focusTypeProperties">
                        {{ form_row(form.properties.animate) }}
                        {{ form_row(form.properties.when) }}
                        {{ form_row(form.properties.timeout) }}
                        {{ form_row(form.properties.link_activation) }}
                        {{ form_row(form.properties.frequency) }}
                        <div class="hidden-focus-type-notice">
                            {{ form_row(form.properties.stop_after_conversion) }}
                        </div>
                        {{ form_row(form.properties.stop_after_close) }}
                    </div>
                </div>
                <!-- end focus type -->

                <!-- start focus type tab -->
                <div class="panel panel-default" id="focusStyle">
                    <div class="panel-heading">
                        <h4 class="panel-title focus-style-header">
                            <a role="button" data-toggle="collapse" href="#focusStylePanel" aria-expanded="true" aria-controls="focusStylePanel">
                                <i class="ri-mac-line"></i> {{ 'mautic.focus.form.style'|trans }}
                            </a>
                        </h4>
                    </div>
                    <div id="focusStylePanel" class="panel-collapse collapse" role="tabpanel">
                        <ul class="list-group mb-0">
                            <li data-focus-style="bar" class="focus-style visible-focus-style-bar list-group-item pl-sm pr-sm">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <i class="pl-2 ri-2x ri-subtract-line text-interactive"></i>
                                    </div>
                                    <div class="col-xs-10">
                                        <h4 class="list-group-heading">{{ 'mautic.focus.style.bar'|trans }}</h4>
                                        <p class="list-group-item-heading small">{{ 'mautic.focus.style.bar_description'|trans }}</p>
                                    </div>
                                </div>
                            </li>
                            <li class="focus-properties focus-bar-properties list-group-item pl-sm pr-sm" style="display: none;"></li>

                            <li data-focus-style="modal" class="focus-style visible-focus-style-modal list-group-item pl-sm pr-sm">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <i class="ri-2x ri-file-list-2-line text-warning"></i>
                                    </div>
                                    <div class="col-xs-10">
                                        <h4 class="list-group-heading">{{ 'mautic.focus.style.modal'|trans }}</h4>
                                        <p class="list-group-item-heading small">{{ 'mautic.focus.style.modal_description'|trans }}</p>
                                    </div>
                                </div>
                            </li>
                            <li class="focus-properties focus-modal-properties list-group-item pl-sm pr-sm" style="display: none;"></li>

                            <li data-focus-style="notification" class="focus-style visible-focus-style-notification list-group-item pl-sm pr-sm">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <i class="pl-2 ri-2x ri-information-2-line text-info"></i>
                                    </div>
                                    <div class="col-xs-10">
                                        <h4 class="list-group-heading">{{ 'mautic.focus.style.notification'|trans }}</h4>
                                        <p class="list-group-item-heading small">{{ 'mautic.focus.style.notification_description'|trans }}</p>
                                    </div>
                                </div>
                            </li>
                            <li class="focus-properties focus-notification-properties list-group-item pl-sm pr-sm" style="display: none;"></li>

                            <li data-focus-style="page" class="focus-style visible-focus-style-page list-group-item pl-sm pr-sm">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <i class="pl-2 ri-2x ri-square-line text-danger"></i>
                                    </div>
                                    <div class="col-xs-10">
                                        <h4 class="list-group-heading">{{ 'mautic.focus.style.page'|trans }}</h4>
                                        <p class="list-group-item-heading small">{{ 'mautic.focus.style.page_description'|trans }}</p>
                                    </div>
                                </div>
                            </li>
                            <!-- <li class="focus-properties focus-page-properties list-group-item pl-sm pr-sm" style="display: none;"></li> -->
                        </ul>
                    </div>

                    <div class="hide" id="focusStyleProperties">
                        <!-- bar type properties -->
                        <div class="focus-hide visible-focus-style-bar">
                            {{ form_row(form.properties.bar.allow_hide) }}
                            {{ form_row(form.properties.bar.push_page) }}
                            {{ form_row(form.properties.bar.sticky) }}
                            {{ form_row(form.properties.bar.placement) }}
                            {{ form_row(form.properties.bar.size) }}
                        </div>

                        <!-- modal type properties -->
                        <div class="focus-hide visible-focus-style-modal">
                            {{ form_row(form.properties.modal.placement) }}
                        </div>

                        <!-- notifications type properties -->
                        <div class="focus-hide visible-focus-style-notification">
                            {{ form_row(form.properties.notification.placement) }}
                        </div>

                        <!-- page type properties -->
                        <!-- <div class="focus-hide visible-focus-style-page"></div> -->
                    </div>
                </div>
                <!-- end focus style -->

                <!-- start focus colors -->
                <div class="panel panel-default" id="focusColors">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" href="#focusColorsPanel" aria-expanded="true" aria-controls="focusColorsPanel">
                                <i class="ri-paint-brush-line"></i> {{ 'mautic.focus.tab.focus_colors'|trans }}
                            </a>
                        </h4>
                    </div>
                    <div id="focusColorsPanel" class="panel-collapse collapse" role="tabpanel">
                        <div class="panel-body pa-xs">
                            <div class="row">
                                <div class="form-group col-xs-12 ">
                                    {{ form_label(form.properties.colors.primary) }}
                                    <div class="input-group">
                                        {{ form_widget(form.properties.colors.primary) }}
                                        <span class="input-group-btn">
                                        <button data-dropper="focus_properties_colors_primary" class="btn btn-ghost btn-nospin btn-dropper" type="button"><i class="ri-dropper-line"></i></button>
                                    </span>
                                    </div>
                                    <div class="mt-xs site-color-list hide" id="primary_site_colors"></div>
                                    {{ form_errors(form.properties.colors.primary) }}
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-xs-12 ">
                                    {{ form_label(form.properties.colors.text) }}
                                    <div class="input-group">
                                        {{ form_widget(form.properties.colors.text) }}
                                        <span class="input-group-btn">
                                        <button data-dropper="focus_properties_colors_text" class="btn btn-ghost btn-nospin btn-dropper" type="button"><i class="ri-dropper-line"></i></button>
                                    </span>
                                    </div>
                                    <div class="mt-xs site-color-list hide" id="text_site_colors"></div>
                                    {{ form_errors(form.properties.colors.text) }}
                                </div>
                            </div>

                            <div class="hidden-focus-type-notice">

                                <div class="row">
                                    <div class="form-group col-xs-12 ">
                                        {{ form_label(form.properties.colors.button) }}
                                        <div class="input-group">
                                            {{ form_widget(form.properties.colors.button) }}
                                            <span class="input-group-btn">
                                        <button data-dropper="focus_properties_colors_button" class="btn btn-ghost btn-nospin btn-dropper" type="button"><i class="ri-dropper-line"></i></button>
                                    </span>
                                        </div>
                                        <div class="mt-xs site-color-list hide" id="button_site_colors"></div>
                                        {{ form_errors(form.properties.colors.button) }}
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-xs-12 ">
                                        {{ form_label(form.properties.colors.button_text) }}
                                        <div class="input-group">
                                            {{ form_widget(form.properties.colors.button_text) }}
                                            <span class="input-group-btn">
                                        <button data-dropper="focus_properties_colors_button_text" class="btn btn-ghost btn-nospin btn-dropper" type="button"><i class="ri-dropper-line"></i></button>
                                    </span>
                                        </div>
                                        <div class="mt-xs site-color-list hide" id="button_text_site_colors"></div>
                                        {{ form_errors(form.properties.colors.button_text) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end focus colors -->

                <!-- start focus content -->
                <div class="panel panel-default" id="focusContent">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" href="#focusContentPanel" aria-expanded="true" aria-controls="focusContentPanel">
                                <i class="ri-newspaper-line"></i> {{ 'mautic.focus.tab.focus_content'|trans }}
                            </a>
                        </h4>
                    </div>
                    <div id="focusContentPanel" class="panel-collapse collapse" role="tabpanel">
                        <div class="panel-body pa-xs">
                            {{ form_row(form.html_mode) }}
                            {{ form_row(form.editor) }}
                            {{ form_row(form.html) }}
                            {{ form_row(form.properties.content.headline) }}
                            <div class="hidden-focus-style-bar">
                                {{ form_row(form.properties.content.tagline) }}
                            </div>
                            {{ form_row(form.properties.content.font) }}

                            <!-- form type properties -->
                            <div class="focus-hide visible-focus-type-form">
                                <div class="col-sm-12" id="focusFormAlert" data-hide-on='{"focus_html_mode_0":"checked"}'>
                                    <div class="alert alert-info">
                                        {{ 'mautic.focus.form_token.instructions'|trans|purify }}
                                    </div>
                                </div>
                                {{ form_row(form.form) }}
                            </div>

                            <!-- link type properties -->
                            <div class="focus-hide visible-focus-type-link">
                                {{ form_row(form.properties.content.link_text) }}
                                {{ form_row(form.properties.content.link_url) }}
                                {{ form_row(form.properties.content.link_new_window) }}
                            </div>

                            {{ form_row(form.properties.content.css) }}
                        </div>
                    </div>
                </div>
                <!-- end focus content -->

            </div>
        </div>
    </div>

  {{ form_end(form) }}
{{ includeScript('plugins/MauticFocusBundle/Assets/js/focus.js') }}
{% endblock %}