{% extends app.request.get('project_setting').instance_theme_path~":AdminTheme:base.html.twig" %}

{% block header_css %}
    {{ parent() }}
     
{% endblock header_css %}

{% block breadcrumb %}
    <li></li>
    <li>
         {{ "admin.flyer_management.breadcrumb.manage_flyer"|trans }}  
    </li>
    <li>/&nbsp;</li>
    <li>   {{ "admin.flyer_management.breadcrumb.create_flyer" | trans }}  </li>

{% endblock breadcrumb %}
	
{% block main_page_title %}

    {% block form_title %}
        <h1> <i class="fa fa-tasks"></i>    {{ "admin.flyer_management.breadcrumb.create_flyer" | trans }}  </h1>
    {% endblock form_title %}

{% endblock main_page_title %}

{% block main_content %}
	{% if(locale == 'fr') %}
<style>
.fl-add-img-main { width:705px !important; }
.fl-add-top-main, .fl-add-product-images, .fl-add-product-the-text, .fl-add-tham-imges { width:100% !important; }
.fl-add-top-main .fl-add-images-part, .fl-add-top-main .fl-add-icons-part { width:auto !important; }
</style>
{% endif %}
<div class="row">
		<div class="row-fluid">

                    {% block content %}
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/bootstrap-image-gallery.min.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/bootstrap-responsive.min.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/imgareaselect-animated.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/imgareaselect-default.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/imgareaselect-deprecated.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/jquery-ui.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/jquery.Jcrop.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/jquery.Jcrop.min.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/jquery.fileupload-ui.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/jquery.furac.ui.css')}}" rel="stylesheet" type="text/css"/>
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/jquery.minicolors.css')}}" rel="stylesheet" type="text/css"/>

                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/text-editor-style.css')}}" rel="stylesheet" type="text/css"/>
                        <link rel="stylesheet" href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/jquery-ui.css')}}">
                        <link rel="stylesheet" type="text/css" href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/jquery.minicolors.css')}}">
                        <link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/css/style-fly.css')}}" rel="stylesheet" type="text/css"/>
                        <!-- Modal -->
                   {% if data.product_detail is defined and data.product_detail is not empty %}
                        <div id="myModal">

                        <div class="fl-cent">
                        <div class="fl-cont-part">
                        <div class="fl-left-part-main">
                        <div class="fl-left-menu">
                        <ul>
                        <li>
                            <a href="javascript:void(0)"><i><img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/save.png') }}"
                                                                 alt="" title=""></i> <span>{{ 'admin.flyer_management.save'|trans }}</span></a>
                            <ul>
                                <li>
                                    <div class="fl-drop-arrow"><img
                                                src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/drop-arrow.png') }}" alt=""></div>
                                    <div class="fl-save-main">
                                        <div class="fl-save-cont">
                                            <div class="fl-save-con-und">
                                                <label><input type="radio" class="download-flyer jpgRadio" data-type="image" checked="checked" name="download">{{ 'admin.flyer_management.jpg'|trans }}</label>
                                            </div>
                                            <div class="fl-save-con-und">
                                                <label><input type="radio" class="download-flyer" data-type="url" name="download">{{ 'admin.flyer_management.url'|trans }}</label>
                                            </div>
                                            <div class="fl-save-con-und">
                                                <label><input type="radio" class="download-flyer" data-type="pdf" name="download">{{ 'admin.flyer_management.pdf'|trans }}</label>
                                            </div>
                                            <div class="fl-save-con-und">
                                                <label><input type="radio" class="download-flyer" data-type="html" name="download">{{ 'admin.flyer_management.html'|trans }}</label>
                                            </div>
                                        </div>
                                        <div class="fl-save-but">
                                        	<input  id="obfl-generate-flyer-url" type="button" value="{{ 'admin.flyer_management.save'|trans }}" class="fl-save-button download-flyer-btn" />
                                            <input type="button" value="{{ 'admin.flyer_management.cancel'|trans }}" class="fl-save-button closes" />
                                        </div><br/>
                                        <div class="show-flyer-url"><input type="text" readonly value=""></div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><i><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/mail.png') }}"
                                                                 alt="" title=""></i> <span>{{ 'admin.flyer_management.mail.label'|trans }}</span></a>
                            <ul>
                                <li>
                                    <div class="fl-drop-arrow"><img
                                                src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/drop-arrow.png') }}" alt=""></div>
                                    <div class="fl-email-main">
                                        <div class="fl-email-cont">
                                            <form name="" action="" id="obfl-send-flyer-form">
                                                <div class="fl-email-forms">
                                                    <label>{{ 'admin.flyer_management.mail.name'|trans }}:</label>
                                                    <input name="name" id="send-flyer-name" type="text">
                                                </div>
                                                <div class="fl-email-forms">
                                                    <label>{{ 'admin.flyer_management.mail.email'|trans }}:</label>
                                                    <input name="email" class="send-flyer-email" id="send-flyer-email" type="text">
                                                </div>
                                                <div class="fl-email-forms">
                                                    <label>{{ 'admin.flyer_management.mail.to'|trans }}:</label>
                                                    <input name="to" class="send-flyer-email" id="send-flyer-to" type="text">
                                                </div>
                                                <div class="fl-email-forms">
                                                    <label>{{ 'admin.flyer_management.mail.cc'|trans }}:</label>
                                                    <input name="cc" class="send-flyer-email" id="send-flyer-cc" type="text">
                                                </div>
                                                <div class="fl-email-forms">
                                                    <label>{{ 'admin.flyer_management.mail.sub'|trans }}:</label>
                                                    <input name="subject" type="text" id="send-flyer-subject">
                                                </div>
                                                <div class="fl-email-forms">
                                                    <label>{{ 'admin.flyer_management.mail.body'|trans }}:</label>
                                                    <textarea name="message" id="send-flyer-msg"></textarea>
                                                </div>
                                                <div class="fl-email-forms">
                                                    <label>{{ 'admin.flyer_management.mail.download'|trans }}:</label>
                                                    <span style="float: left;">
                                                    	<input name="download-format" style="width:30px; float: none;" value="pdf" type="radio" checked="checked">  <span>{{ 'admin.flyer_management.pdf'|trans }}</span>
                                                    	<input name="download-format" style="width:30px; float: none;" value="image" type="radio">  <span>{{ 'admin.flyer_management.image'|trans }}</span>
                                                    </span>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="fl-save-but fl-full-width">
                                            <input id="obfl-send-flyer-via-email" type="button" value="{{ 'admin.flyer_management.mail.send'|trans }}" class="fl-save-button" />
                                            <img id="obfl-send-flyer-via-email-loader" style="display: none;" src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/loader.GIF') }}"
                                                 alt="">
                                            <input type="button" value="{{ 'admin.flyer_management.mail.cancel'|trans }}" class="fl-save-button closes" />
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" id="bg-img">
                                <i>
                                    <img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('bundles/officebrainflyer/images/bg-img.png') }}" alt="" title="">
                                </i>
                                <span>{{ 'admin.flyer_management.bg.label'|trans }}</span>
                            </a>
                            <ul>
                                <li>
                                    <div id="background-images">

                                        <div class="fl-tham-cet">
                                            <div class="fl-background-arrows"><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/bg-images-arrow.png') }}" alt=""></div>
                                                                                      
                                            <p>
                                                <label for="amount">{{ 'admin.flyer_management.img_opacity'|trans }}:</label>
                                                <input type="text" id="amount" readonly style="font-weight:bold;">
                                            </p>
                                            <div id="slider-range-min"></div>
                                            <div class="fl-category-tham">
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/dezine-corp/bg1.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/dezine-corp/bg2.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/dezine-corp/bg3.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/dezine-corp/bg4.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/dezine-corp/bg5.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/dezine-corp/bg6.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/household/Sweet_Stuff.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/outdoor-themes/Beach3.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/outdoor-themes/Mountain.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/outdoor-themes/Outdoors.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/school/Colored_pencils.jpg') }}" alt="">
                                                </div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/school/School.jpg') }}" alt=""></div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/school/School1.jpg') }}" alt=""></div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/school/School2.jpg') }}" alt=""></div>
                                                <div class="fl-category-tham-imag"><img
                                                            src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~  asset('images/uploads/flyer-bg/sports/Football_Field.jpg') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><i><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/color.png') }}"
                                                                 alt="" title=""></i> <span>{{ 'admin.flyer_management.txt.label'|trans }}</span></a>
                            <ul>
                                <li>
                                    <div class="fl-drop-arrow"><img
                                                src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/drop-arrow.png') }}" alt=""></div>
                                    <div class="fl-textcolor-main">
                                        <div class="color_input"><span class="t_color"></span><input type="text" class="t_color_text" id="show-text-color-value" disabled="disabled"  /></div>
                                        <div class="fl-textcolor-under">
                                            <input type="text" name="add-text-color" data="inline" data-show-value="show-text-color-value" id="flyer-add-text-color-input" class="add-font-color">
                                        </div>
                                        <div class="fl-save-but fl-full-width">
                                            <input type="button" id="flyer-add-text-color" value="{{ 'admin.flyer_management.txt.apply'|trans }}" class="fl-save-button">
                                            <input type="button" value="{{ 'admin.flyer_management.txt.cancel'|trans }}" class="fl-save-button closes">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><i><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/bg-color.png') }}"
                                                                 alt="" title=""></i> <span>{{ 'admin.flyer_management.bg.color'|trans }}</span></a>
                            <ul>
                                <li>
                                    <div class="fl-drop-arrow"><img
                                                src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/drop-arrow.png') }}" alt=""></div>
                                    <div class="fl-bgcolor-main">
                                        <div class="color_input"><span class="t_color"></span><input type="text" class="t_color_text" id="show-bg-color-value" disabled="disabled" /></div>
                                        <div class="fl-bgcolor-under">
                                            <input type="text" name="add-bg-color" id="flyer-add-bg-color-input" data-show-value="show-bg-color-value" class="add-bg-color">
                                        </div>
                                        <div class="fl-save-but fl-full-width">
                                            <input type="button" id="flyer-add-bg-color" value="{{ 'admin.flyer_management.txt.apply'|trans }}" class="fl-save-button">
                                            <input type="button" value="{{ 'admin.flyer_management.txt.cancel'|trans }}" class="fl-save-button closes">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="trigger-image-upload-from"><i><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/logo-img.png') }}"
                                                                                                   alt="" title=""></i> <span>{{ 'admin.flyer_management.add_img.label'|trans }}</span></a>
                            <ul>
                                <li>
                                    <div class="fl-add-images-center">
                                        <div class="fl-add-img-main">
                                            <form id="fileupload" action="{{ app.request.scheme ~'://' ~ app.request.httpHost ~path('officebrain_flyer_upload_image')}}" method="POST" enctype="multipart/form-data">
                                                <div class="fl-add-top-main">
                                                    <div class="fl-add-images-part">
                                                        <img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/add-img-icon.png') }}" alt="" > <span>{{ 'admin.flyer_management.add_img.add'|trans }}</span>
                                                    </div>
                                                    <div class="fl-add-icons-part">
                                                        <ul style="display: block;">
                                                            <li>
                                                                <a href="javascript:void(0)" class="use-as-background-btn" title="Use as background image"><img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('bundles/officebrainflyer/images/add-brows.png') }}" alt="" > <br> {{ 'admin.flyer_management.add_img.bg'|trans }}</a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:void(0)" class="use-original-btn"><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/add-us-arig.png') }}" alt="" > <br> {{ 'admin.flyer_management.add_img.orig'|trans }}</a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:void(0)" class="crop-and-use-btn"><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/add-crop.png') }}" alt="" > <br> {{ 'admin.flyer_management.add_img.crop'|trans }}</a>
                                                            </li>
                                                            <li>
                                                                <div class="browse-btn">
                                                                    <!-- The fileinput-button span is used to style the file input field as button -->
                                                                    <span class="fileinput-button add-Browse">
                                                                        <i class="icon-plus icon-white"></i>
                                                                         <img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/add-us-bg.png') }}" alt="" > <br> {{ 'admin.flyer_management.add_img.browse'|trans }}
                                                                         <input id="trigger-image-upload-from" type="file" name="files[]" multiple>
                                                                    </span>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="fl-add-product-images" style="float:left;">
                                                   
 <div id="show-uploaded-image" > <img data-noimage="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('images/grey-logo.png') }}"  src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('images/grey-logo.png') }}"> </div>
</div>
                                                <div class="fl-add-product-the-text" style="float:left;">
                                                    <img id="click-toggle-thumb" src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/add-tham-arrow.png') }}" alt="" >
                                                </div>
                                                <div class="fl-add-tham-imges" style="float:left;">
                                                    <div class="container-image-upload-crop">
                                                        <!-- The file upload form used as target for the file upload widget -->

                                                        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                                                        <div class="row fileupload-buttonbar">
                                                            <div class="fl-upload-images"> </div>

                                                        </div>
                                                        <!-- The loading indicator is shown during file processing -->
                                                        <div class="fileupload-loading"></div>
                                                        <!-- The table listing the files available for upload/download -->
                                                        <!--table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table-->
                                                        <div class="files"></div>

                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li id="open-text-editor-popover">
                            <a href="javascript:void(0)"><i><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/text-edi.png') }}" alt="" title=""></i> <span>{{ 'admin.flyer_management.text.label'|trans }}</span></a>
                            <ul>
                                <li>
                                    <div class="fl-drop-arrow"><img
                                                src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/drop-arrow.png') }}" alt=""></div>
                                    <div class="fl-addtext-main">

                                        <textarea id="flyer-editor-text-area" style="width:400px; height:200px"></textarea>

                                        <div class="fl-save-but fl-full-width">
                                            <input type="button" value="{{ 'admin.flyer_management.text.add'|trans }}" id="flyer-add-text-button" class="fl-save-button jslableBtn">
                                            <input type="button" value="{{ 'admin.flyer_management.mail.cancel'|trans }}" class="fl-save-button closes">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><i><img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('bundles/officebrainflyer/images/share.png') }}"
                                                                 alt="" title=""></i> <span>{{ 'admin.flyer_management.share'|trans }}</span></a>
                            <ul>
                                <li>
                                    <div class="fl-drop-arrow"><img
                                                src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/drop-arrow.png') }}" alt=""></div>
                                    <div class="fl-share-main">
                                        <div class="fl-share-under">
                                            <a href="javascript:void(0);" class="flyer-share-btn" data-share-url="https://www.facebook.com/sharer/sharer.php?u="><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/fac.png') }}" alt=""
                                                                                                                                                                      title=""></a>
                                            <a href="javascript:void(0);" class="flyer-share-btn" data-share-url="https://twitter.com/home?status="><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/twit.png') }}" alt=""
                                                                                                                                                         title=""></a>
                                            <a href="javascript:void(0);" class="flyer-share-btn" data-share-url="https://plus.google.com/share?url="><img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('bundles/officebrainflyer/images/g+.png') }}" alt=""
                                                                                                                                                           title=""></a>
                                            <a href="javascript:void(0);" class="flyer-share-btn" data-share-url="https://www.linkedin.com/shareArticle?mini=true&url="><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/in.png') }}" alt=""
                                                                                                                                                                             title=""></a>
                                            <a href="javascript:void(0);" class="flyer-share-btn" data-share-url="https://pinterest.com/pin/create/button/?url=&media={% if data.product_detail.basic_information.default_image_url is defined and data.product_detail.basic_information.default_image_url !=''  %}{{ data.product_detail.basic_information.default_image_url }}{% endif %}&description="><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/pint.png') }}" alt=""
                                                                                                                                                                                          title=""></a>

                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="no-bgimg">
                            <a href="javascript:void(0)" class="reset-flyer-to-default"><i><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/reset.png') }}"
                                                                                                alt="" title=""></i> <span>{{ 'admin.flyer_management.reset'|trans }}</span></a>
                        </li>
                        </ul>
                        </div>
                        </div>
                        <div class="fl-conteds-main">
                            <div class="fl-right-part-main">                            
                                {% if data.flyerHTML is defined and data.flyerHTML is empty and data.flyerHTML == '' %}
                                    <div class="flyer-img-fade-div"></div>
                                    <div class="fl-right-part-main-inner">                                        
                                        <div class="js-box-formating fl-product-imag fl-hover-fix fl-cont-box fl-box-border obfl-resizeable obfl-draggable" style="width: 300px; min-width: 50px; margin-top:0px;">
                                            <div class="fl-product-close">
                                                <div class="fl-close"><a href="javascript:void(0)" class="fl-close-but">X</a></div>
                                            </div>
								             {% if data.product_detail.basic_information.default_image_url is defined and data.product_detail.basic_information.default_image_url is not empty %}
                                             	{% set main_image_path = data.product_detail.basic_information.default_image_url %}
                                             {% else %}
                                             	{% set main_image_path =  app.request.scheme ~'://' ~ app.request.httpHost ~asset('images/grey-logo.png') %}	
                                             {% endif %}
                                             
                                             {#% set main_image_path=  app.request.scheme ~'://' ~ app.request.httpHost ~asset('uploads/images-used/'~data.product_detail.image_path|url_decode)  %#}

                                            <img class="copy-image" src="{{ main_image_path }}" width="100%">
                                        </div>
                                       
                                       {% if data.product_detail.basic_information.title is defined and data.product_detail.basic_information.title is not empty %}
                                        <div class="js-box-formating fl-titles-part fl-cont-box fl-box-border-hover obfl-resizeable obfl-draggable" style="min-width: 200px;">
                                            <div class="fl-product-close">
                                                <div class="fl-close"><a href="javascript:void(0)" class="fl-close-but">X</a></div>
                                            </div>
                                            <div class="fl-text-container for-title-change">{{ data.product_detail.basic_information.title  }}</div>
                                        </div>
                                        {% endif %}
                                        
                                        {% if data.product_detail.basic_information.description is defined and data.product_detail.basic_information.description is not empty  %}
                                        <div class="js-box-formating fl-text-part fl-cont-box fl-box-border-hover obfl-resizeable obfl-draggable" style="min-width: 200px; line-height:16px;">
                                            <div class="fl-product-close">
                                                <div class="fl-close"><a href="javascript:void(0)" class="fl-close-but">X</a></div>
                                            </div>
                                            <div class="fl-text-container" id="flyer-product-content">
                                                {{ data.product_detail.basic_information.description | raw}}
                                            </div>
                                        </div>
                                        {% endif %}
                                        
                                        {% if data.product_detail.attributes  is defined and data.product_detail.attributes is not empty %}
                                        <div class="js-box-formating fl-product-imag fl-product-detail fl-cont-box fl-box-border obfl-resizeable obfl-draggable" style="width: 300px;   margin:0px;  min-width: 200px;">
                                            <div class="fl-product-close">
                                                <div class="fl-close"><a href="javascript:void(0)" class="fl-close-but">X</a></div>
                                            </div>
                                            
                                             <table width="100%" border="0" cellspacing="0" cellpadding="0" id="product-attribute-table" style="font-size:11px;">                                            
                                            	{% for key,value in data.product_detail.attributes %}
                                            	<tr>
                                            		<td class="textClr">{{ value.label }} : </td>
                                            		<td class="textClr">
                                            		{% if value.values  is defined and value.values is not empty %}
                                            			{%  for val in value.values %}
                                            				{{ val }}<br/>															
                                            			{% endfor %}
                                            		{% endif %}
                                            		</td>
                                            	</tr>
                                            	{% endfor %}
                                            </table>
                                        </div>          
                                        {% endif %}
                                                                    
                                                                  
										<div class="js-box-formating fl-qty-main fl-cont-box fl-box-border obfl-resizeable obfl-draggable" style="min-width: 370px;  margin:0px;">
                                            {% if data.product_detail.regular_variations_charges  is defined and data.product_detail.regular_variations_charges is not empty%}
                                            <div class="fl-product-close">
                                                <div class="fl-close" style="width:50px;">
	                                                <a href="javascript:void(0)" class="fl-close-but">X</a>
	                                                <a href="javascript:void(0)" class="fl-close-but-gear" id="fl-qty-dropdown">
	                                                	<img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('/bundles/officebrainflyer/images/gaer.png') }}">
	                                                </a>                                                    
                                                </div>
                                            </div>
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="" height="100%" id="product-price-range-table" style="font-size:11px;">
                                            	<tr>
                                            		<td class="textClr">{{ 'admin.flyer_management.qty'|trans }}</td>
													{% for priceRange in data.product_detail.regular_variations_charges %}
														<td class="textClr">{{ priceRange.from }}-{{ priceRange.to }}</td>
													{% endfor %}														
												</tr>
												<tr>
													<td class="textClr">{{ 'admin.flyer_management.price'|trans }}</td>                                            		
													{% for priceRange in data.product_detail.regular_variations_charges %}
														<td class="textClr">${{ priceRange.rate }}</td>
													{% endfor %}													
												</tr>
                                            </table>
                                            {% endif %}
                                            
											<div id="fl-drop-option">
                                                <div class="fl-drop-arrow"><img src="{{  app.request.scheme ~'://' ~ app.request.httpHost ~asset('bundles/officebrainflyer/images/drop-arrow1.png') }}" alt="">
                                                </div>
                                                <div class="fl-option-main">
                                                    <div class="fl-option-title">{{ 'admin.flyer_management.opt.label'|trans }}</div>
                                                    <div class="fl-option-under">
                                                        <div class="fl-option-under-part">
                                                            <div class="fl-option-cont-subtit">{{ 'admin.flyer_management.opt.show_hide'|trans }}:</div>
                                                            <div class="fl-option-colum-main">
                                                                <div class="fl-option-colum-no">
                                                                    <input name="" type="checkbox" data-check-count="0" checked="checked">
                                                                    <label>{{ 'admin.flyer_management.opt.col'|trans }} 1</label>
                                                                </div>
                                                                <div class="fl-option-colum-no">
                                                                    <input name="" type="checkbox" data-check-count="1" checked="checked">
                                                                    <label>{{ 'admin.flyer_management.opt.col'|trans }} 2</label>
                                                                </div>
                                                                <div class="fl-option-colum-no">
                                                                    <input name="" type="checkbox" data-check-count="2" checked="checked">
                                                                    <label>{{ 'admin.flyer_management.opt.col'|trans }} 3</label>
                                                                </div>
                                                                <div class="fl-option-colum-no">
                                                                    <input name="" type="checkbox" data-check-count="3" checked="checked">
                                                                    <label>{{ 'admin.flyer_management.opt.col'|trans }} 4</label>
                                                                </div>
                                                                <div class="fl-option-colum-no">
                                                                    <input name="" type="checkbox" data-check-count="4" checked="checked">
                                                                    <label>{{ 'admin.flyer_management.opt.col'|trans }} 5</label>
                                                                </div>
                                                                <div class="fl-option-colum-no">
                                                                    <input name="" type="checkbox" data-check-count="5" checked="checked">
                                                                    <label>{{ 'admin.flyer_management.opt.col'|trans }} 6</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="fl-save-but">
                                                        <input type="button" value="{{ 'admin.flyer_management.opt.close'|trans }}" class="fl-save-button closes">
                                                    </div>
                                                    </div>                                                    
                                                </div>
                                            </div>
                                        </div>
                                        	<div class="fl-save-but">
                                                    
                                                    	<input type="hidden" id="flyer-user-id" name="UserId" value="{% if app.user.id is defined %} {{ app.user.id }} {% endif %}" />
                                                        <input type="hidden" id="flyer-unique-id" name="flyerUniqueId" value="{{ data.flyerUniqueId }}" />
{#                                                         <input type="hidden" id="flyer-product-id" name="flyerProductId" value="{{ data.product_detail.culture_product_id }}" />#}
                                                        <input type="hidden" id="flyer-product-id" name="flyerProductId" value="{{ data.product_detail.product_id }}" />
                                                        <input type="hidden" id="flyer-supplier-id" name="flyerSupplierId" value="{{ data.product_detail.supplier.supplier_id }}" /> 
                                                        <input type="hidden" id="flyer-ob-customer-id" name="flyerObCustomerId" value="{{ data.product_detail.supplier.ob_customer_id }}" />
                                                        <input type="hidden" id="flyer-culture" name="flyerCulture" value="{{ culture }}" />                                                        
														<input type="hidden" id="flyer-type" name="flyerType" value="image" />
                    				        			<input type="hidden" id="flyer-base-path" value="{{ app.request.scheme ~'://' ~ app.request.httpHost }}" />
                                                        <input type="hidden" id="flyer-domain-name-ip" value="{{ app.request.scheme ~'://' ~ app.request.httpHost }}" />
                                                        <input type="hidden" class="btnTextEdit" value="" />
                                                        <input type="hidden" id="flyer-locale" value="{{ locale }}" />                                      
                                                        
                                                    </div>
                                        <div class="js-box-formating fl-footer-logo fl-hover-fix fl-cont-box fl-box-border obfl-resizeable obfl-draggable">
                                            <div class="fl-product-close">
                                                <div class="fl-close"><a href="javascript:void(0);" class="fl-close-but">X</a></div>
                                            </div>
                                             <img src="{{  (asset(ob_project_assets_base_url ~ '/images/logo.png') ) | logo }}" alt="" width="100%">
                                             
{# 											 <img src="{{ asset(ob_project_admin_asset_url ~ '/images/logo.png') }}" alt="">#}
												
                             
                                        </div>
                                        <div class="js-box-formating fl-hover-fix  fl-coppy-righttext fl-box-border fl-cont-box obfl-resizeable obfl-draggable">
                                            <div class="fl-product-close">
                                                <div class="fl-close"><a href="javascript:void(0)" class="fl-close-but">X</a></div>
                                            </div>
                                             {% autoescape false %} {{ 'admin.flyer_management.copy_right'|trans({'%year%': "now"|date('Y')}) }}{% endautoescape %}
                                        </div>
                                    </div>
                                {% else %}
                                    {{ data.flyerHTML | raw }}
                                {% endif %}
                               </div>
                        </div>
                        </div>
                        </div>
                       </div>
                    {% else %}
                  		Product Not Found.  
                    {% endif %}
                        {% verbatim %}
                        <!-- The template to display files available for upload -->
                        <script id="template-upload" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
        <div class="template-upload fade">
        <div class="preview"><span class="fade"></span></div>
        {% if (file.error) { %}
        <div class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</div>
        {% } else if (o.files.valid && !i) { %}
        <!--td class="start"></td-->
        {% } else { %}
        <!--td colspan="2"></td-->
        {% } %}
        <!--td class="cancel"></td-->
        </div>
        {% } %}
    </script>
    
    <!-- The template to display files available for download -->
    <script id="template-download" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
        <div class="template-download fade">
        {% if (file.error) { %}
        
        {% } else { %}
        <div class="preview">
        <div class="them-trns-bg"></div>
        <div class="fl-add-tham-part">
        <div class="fl-add-tham-img">

        <div class="fl-add-tran-bg">
        <span class="delete">
        <button class="fl-close-img" style="border:none; background:none repeat scroll 0 0 transparent;" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">        
         <i class="fa fa-times"></i>         
        </button>
        </span>
        <span class="crop-img">
        <a href="javascript:void(0)" class="edit-img-crop fl-full-screen" data-url="{%=file.url%}">                        
        <span>        
        <i class="fa fa-eye"></i>
        </span>
        </a>
        </span>

        </div>
        {% if (file.url) { %}
        <span class="crop-thame-images">
        <a href="javascript:void(0);" data-href="{%=file.url%}" title="{%=file.name%}">
        <img src="{%=file.url%}" />
        </a>
        </span>
        {% } %}
        </div>
        </div>
        </div>
        {% } %}
        </div>
        {% } %}
    </script>
                        {% endverbatim %}

                        {% block script_footer_js %}{% endblock script_footer_js %}
                       
                        {% block javascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/tinyeditor.js' %}
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/jquery.minicolors.min.js' %}
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/vendor/jquery.ui.widget.js' %}
                        <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/tmpl.min.js' %}
                        <!-- The Templates plugin is included to render the upload/download listings -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/load-image.min.js' %}
                        <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/jquery.iframe-transport.js' %}
                        <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/jquery.fileupload.js' %}
                        <!-- The basic File Upload plugin -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/jquery.fileupload-fp.js' %}
                        <!-- The File Upload file processing plugin -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/jquery.fileupload-ui.js' %}
                        <!-- The File Upload user interface plugin -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/locale.js' %}
                        <!-- The localization script -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/jquery.imgareaselect.js' %}
                        <!-- Jcrop https://github.com/tapmodo/Jcrop -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/main.js' %}
                        <!-- The main application script -->
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/jquery-ui.min.js' %}
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% javascripts '@OfficeBrainFlyerBundle/Resources/public/js/flyer.js' %}
                        <script src="{{ asset_url }}" type='text/javascript'></script>
                        {% endjavascripts %}

                        {% endblock javascripts %}

                        {% endblock content %}


	</div>
</div>	 		 
    
{% endblock main_content %} 
{% block footer_js %} 
{{ parent() }}
{% endblock footer_js %}