{% from "form_macros.html" import yop_poll_general_options_label as label  %}
{% from "form_macros.html" import yop_poll_input_field as input  %}
{% from "form_macros.html" import yop_poll_select as select  %}
<div class = "postbox stuffbox {% if ( 'advanced' == user_interface_type ) %} closed {% endif %}" id = "3">
    <div title = '{{ __("Click to toggle") }}' class = "handlediv"><br/></div>
    <h3 class = "hndle" style = "border-bottom: 1px solid #AAAAAA;">
        <span>{{ __( "Results Options" ) }}</span>
    </h3>
    <div class = "inside">
        <table width = "100%" cellspacing = "0"
               class = "yop-poll-options-table links-table">
            <tbody>
                <tr>
                    <th>{{ __("Sort Results") }}:</th>
                    <td>
                        {{ label( __("As Defined"),         'yop_poll_sorting_results_as_defined',      'yop_poll_options[sorting_results]', "as_defined",   "radio", "", current_poll.sorting_results, "as_defined"    ) }}
                        {{ label( __("Alphabetical Order"), 'yop_poll_sorting_results_alphabetical',    'yop_poll_options[sorting_results]', "alphabetical", "radio", "", current_poll.sorting_results, "alphabetical"  ) }}
                        {{ label( __("by Number of Votes"), 'yop_poll_sorting_results_votes',           'yop_poll_options[sorting_results]', "votes",        "radio", "", current_poll.sorting_results, "votes"         ) }}
                    </td>
                </tr>
                <tr class = "yop_poll_suboption" id = "yop_poll_sort_results_rule-div"
                    style = "{% if current_poll.sorting_results == 'as_defined' %} display: none; {% endif %}">
                    <th>{{ __("Sort Results Rule") }}:</th>
                    <td>
                        {{ label(__("Ascending"),  'yop_poll_sorting_results_asc',  'yop_poll_options[sorting_results_direction]', 'asc',  'radio', '', current_poll.sorting_results_direction, "asc" ) }}
                        {{ label(__("Descending"), 'yop_poll_sorting_results_desc', 'yop_poll_options[sorting_results_direction]', 'desc', 'radio', '', current_poll.sorting_results_direction, "desc") }}
                    </td>
                </tr>
                <tr >

                    <th>{{ __("Display Results as") }}: </th>

                    <td>

                        {{ label(__("Bar"),  'yop_poll_results_bar',  'yop_poll_options[show_results_in]', 'bar',  'radio', '', current_poll.show_results_in, "bar" ) }}

                        {{ label(__("Pie"), 'yop_poll_results_bar_pie', 'yop_poll_options[show_results_in]', 'bar', 'radio', 'yop_poll_tooltip-buy_pro yop_poll_tooltip-buy',  "bar") }}

                        {{ label(__("Polar Area"),  'yop_poll_results_polar',  'yop_poll_options[show_results_in]', 'bar',  'radio', 'yop_poll_tooltip-buy_pro yop_poll_tooltip-buy',  "bar" ) }}

                        {{ label(__("Doughnut"), 'yop_poll_results_doughnut', 'yop_poll_options[show_results_in]', 'bar', 'radio', 'yop_poll_tooltip-buy_pro yop_poll_tooltip-buy', "bar") }}

                    </td>

                    <td></td>

                </tr>
                <tr>
                    <th>{{ __("Result Bar Style") }}: </th>
                    <td></td>
                </tr>
                <tr class="yop_poll_suboption">
                    <th><label for="yop-poll-bar-background" >{{ __("Background Color") }}:</label></th>
                    <td>#<input class="yop-small-input hascolorpicker"
                                id="yop-poll-bar-background"
                                value="{{ current_poll.bar_background }}"
                                onblur="yop_poll_update_bar_style('#yop-poll-bar-preview', 'background-color', '#' + this.value)"
                                type="text"
                                name="yop_poll_options[bar_background]"/>
                    </td>
                </tr>
                <tr class="yop_poll_suboption">
                    <th><label for="yop-poll-bar-height">{{ __("Height") }}:</label></th>
                    <td>&nbsp;
                        <input class="yop-small-input" id="yop-poll-bar-height"
                               value="{{current_poll.bar_height }}"
                               onblur="yop_poll_update_bar_style('#yop-poll-bar-preview', 'height', this.value + 'px')"
                               type="text"
                               name="yop_poll_options[bar_height]"/> px
                    </td>
                </tr>
                <tr class="yop_poll_suboption">
                    <th><label for="yop-poll-bar-border-color">{{ __("Border Color") }}: </label></th>
                    <td>#<input class="yop-small-input hascolorpicker"
                                id="yop-poll-bar-border-color"
                                value="{{ current_poll.bar_border_color }}"
                                onblur="yop_poll_update_bar_style( '#yop-poll-bar-preview', 'border-color', '#' + this.value )"
                                type="text"
                                name="yop_poll_options[bar_border_color]"/>
                    </td>
                </tr>
                <tr class="yop_poll_suboption">
                    <th><label for="yop-poll-bar-border-width">{{ __("Border Width") }}:</label></th>
                    <td>&nbsp;
                        <input class="yop-small-input"
                               id="yop-poll-bar-border-width"
                               value="{{ current_poll.bar_border_width }}"
                               onblur="yop_poll_update_bar_style('#yop-poll-bar-preview', 'border-width', this.value + 'px')"
                               type="text"
                               name="yop_poll_options[bar_border_width]"/> px
                    </td>
                </tr>
                <tr class="yop_poll_suboption">
                    <th><label for="yop-poll-bar-border-style">{{ __("Border Style") }}:</label></th>
                    <td>&nbsp;
                        <select id="yop-poll-bar-border-style"
                                onchange="yop_poll_update_bar_style('#yop-poll-bar-preview', 'border-style', this.value)"
                                name="yop_poll_options[bar_border_style]">
                            <option value="solid"  {{ selected(current_poll.bar_border_style, 'solid')  }} >{{__("Solid")}} </option>
                            <option value="dashed" {{ selected(current_poll.bar_border_style, 'dashed') }} >{{__("Dashed")}}</option>
                            <option value="dotted" {{ selected(current_poll.bar_border_style, 'dotted') }} >{{__("Dotted")}}</option>
                        </select>
                    </td>
                </tr>
                <tr class="yop_poll_suboption">
                    <th><label>{{ __("Bar Preview") }}</label></th>
                    <td>&nbsp;&nbsp;
                        <div id="yop-poll-bar-preview"
                             style="
                                                        width: 200px;
                                                        height:             {{  current_poll.bar_height         }}px;
                                                        background-color:   #{{ current_poll.bar_background     }};
                                                        border-style:       {{  current_poll.bar_border_style   }};
                                                        border-width:       {{  current_poll.bar_border_width   }}px;
                                                        border-color:       #{{ current_poll    .bar_border_color   }}"></div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>