{% from "form_macros.html" import yop_poll_general_options_label as label  %}

<div class="postbox stuffbox">

    <div title='{{ __("Click to toggle") }}' class="handlediv"><br/> </div>

    <h3 class="hndle" style="border-bottom: 1px solid #AAAAAA;">

        <span>{{ __("Poll Templates") }}</span>

    </h3>

    <div class="inside yop-poll-slider">

        <div class="yop-poll-slider-container">

            <h4 class="hndle">

                <span>{{ __("Page Template") }}</span>

            </h4>

            <span>{{ __("Template Width") }}:</span><input type="text"

                                                           id="yop-poll-template-width"

                                                           name="yop_poll_options[template_width]"

                                                           value="{{current_poll.template_width}}">

            <input type="hidden" id="yop-poll-page-template"

                   name="yop_poll_options[template]"

                   value="{{ current_poll.template }}">

            <div class="yop-poll-page-slider" id="yop-poll-page-template-slider">

                <ul>
                    {% if count( templates ) > 0 %}

                    {% set i = 0 %}

                    {% for template in templates %}

                    <li id="yop-poll-page-template-{{template.id}}" style="cursor: pointer;margin-left:4px;margin-right:4px"

                        class='yop-poll-page-template-li {% if current_poll.template == template.id %} yop-poll-page-template-selected {% endif%}'

                        onclick="yop_poll_select_template({{template.id}}, 'page')">

                        <p>{{template.name|e}}</p> <br>

                        {{template.preview|raw}}

                    </li>

                    {% set i = i+1 %}

                    {% endfor %}

                    {% endif %}
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy' >
                        <p>
                            {{ __('Green v4 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/green_pro_4.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy' >
                        <p>
                            {{ __('Red Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/red_pro.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Green v1 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/green_pro.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Orange v1 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/orange_pro.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Dark Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/dark_pro.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Grey v3 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/grey_prov2.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Grey v2 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/grey_pro_v1.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Grey v1 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/grey_prov1.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Grey Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/grey_pro.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Blue v3 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/blue_v3_pro.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Blue v2 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/blue2.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy'>
                        <p>
                            {{ __('Blue v1 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/blue_pro.jpg"/>
                    </li>
                    <li id="yop-poll-1"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-page-template-li yop-poll-page-template-buy' >
                        <p>
                            {{ __('White Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/white_pro.jpg"/>
                        </li>









                </ul>

            </div>

            <!-- Prev/next controls -->

            <a href="javascript:void(0)"

               class="yop-poll-page-slider-control-prev">&lsaquo;</a>

            <a href="javascript:void(0)"

               class="yop-poll-page-slider-control-next">&rsaquo;</a>

            <!-- Pagination -->

            <p class="yop-poll-page-slider-pagination"></p>

        </div>
         <label for="yop-poll-use-same-template-for-widget" style="position: relative">
                            <input type="checkbox" value="yes" name="yop_poll_options[use_the_same_template_for_widget]" id="yop-poll-use-same-template-for-widget"
                                {% if ( current_poll.use_the_same_template_for_widget == 'yes' ) %}checked="checked"{% endif %}
                            >
                       {{__("Use the same template for widgets")}}!</label>
      <div id="widget-templates" style="{%  if ( current_poll.use_the_same_template_for_widget == 'yes' )  %} display: none; {% endif %}"> <div class="yop-poll-slider-container">
            <input type="hidden" value=" {%if ( current_poll.use_the_same_template_for_widget == 'yes' ) %}0{%else%}1{% endif %}" id="slider_init">
            <h4 class="hndle">

                <span>{{ __("Widget Template") }}</span>

            </h4>

            <span>{{ __("Widget Template Width") }}:</span><input type="text"

                                                                  id="yop-poll-widget-template-width"

                                                                  name="yop_poll_options[widget_template_width]"

                                                                  value="{{current_poll.widget_template_width}}">

            <input type="hidden" id="yop-poll-widget-template"

                   name="yop_poll_options[widget_template]"

                   value="{{ current_poll.widget_template }}">

            <div class="yop-poll-widget-slider" id="yop-poll-widget-template-slider">

                <ul>
                    {% if count( templates ) > 0 %}

                    {% set i = 0 %}

                    {% for template in templates %}

                    <li id="yop-poll-widget-template-{{template.id}}"  style="cursor: pointer;margin-left:4px;margin-right:4px"

                        class='yop-poll-widget-template-li {% if current_poll.widget_template == template.id %} yop-poll-widget-template-selected {% endif%}'

                        onclick="yop_poll_select_template({{template.id}}, 'widget')">

                        <p>{{template.name|e}}</p> <br>

                        {{template.preview|raw}}

                    </li>

                    {% set i = i+1 %}

                    {% endfor %}

                    {% endif %}
                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy' >
                        <p>
                            {{ __('Red Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/red_pro.jpg"/>
                    </li>
                    <li id="yop-poll-page-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy' >
                        <p>
                            {{ __('Green v1 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/green_pro.jpg"/>
                    </li>
                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('Orange v1 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/orange_pro.jpg"/>
                    </li>
                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('Dark Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/dark_pro.jpg"/>
                    </li>
                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('Grey v3 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/grey_prov2.jpg"/>
                    </li>
                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('Grey v2 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/grey_pro_v1.jpg"/>
                    </li>
                    <li id="yop-poll-page-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('Grey v1 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/grey_prov1.jpg"/>
                    </li>
                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('Grey Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/grey_pro.jpg"/>
                    </li>

                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('Blue v3 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/blue_v3_pro.jpg"/>
                    </li>
                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('Blue v2 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/blue2.jpg"/>
                    </li>
                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

                        class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('Blue v1 Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/blue_pro.jpg"/>
                    </li>

                    <li id="yop-poll-widget-template-{{template.id}}"style="cursor: pointer;margin-left:2px;margin-right:2px"

       class='yop_poll_tooltip-buy_pro yop-poll-widget-template-li yop-poll-widget-template-buy'>
                        <p>
                            {{ __('White Pro')}}
                        </p><br>
                        <img src="{{poll_url}}images/white_pro.jpg"/>
                        </li>










                </ul>

            </div>

            <!-- Prev/next controls -->

            <a href="javascript:void(0)"

               class="yop-poll-widget-slider-control-prev">&lsaquo;</a>

            <a href="javascript:void(0)"

               class="yop-poll-widget-slider-control-next">&rsaquo;</a>

            <!-- Pagination -->

            <p class="yop-poll-widget-slider-pagination"></p>

        </div>

    </div></div>

</div>