<div class="row widget-setup-row-pad">
    <div class="col-md-12 form-group label-floating">
        <label for="widget-name" class="control-label">Give your widget a name</label>
        <input id="widget-name" maxlength="128" class="form-control"
        type="text" value="<%- name %>">
    </div>
</div>
<div class="row widget-setup-row-pad">
    <div class="col-md-12 form-group label-floating">
        <label for="widget-position" class="control-label">Select a position for the widget</label>
        <div id="widget-position-container" class="widget-general-set-pad">
            <select id="widget-position" class="form-control">
                <%= html.options([
                ['top-left', __('Top Left')], ['top-right', __('Top Right')],
                ['bottom-right', __('Bottom Right')], ['bottom-left', __('Bottom Left')]
                ], position) %>
            </select>
        </div>
    </div>
</div>
<div class="row widget-setup-row-pad">
    <div class="col-xs-12 form-group label-floating">
        <label class="control-label text-left"><%= __('Select the type of widget') %></label>
        <div class="col-sm-6 checkbox-no-pad">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="widget-type-tab" <%= typeTab ? "checked" : "" %> />
                    <span class="checkbox-label-font">
                        <%= __('Tab') %>
                    </span>
                </label>
            </div>
        </div>
        <div class="col-sm-6 checkbox-no-pad">
            <div class="checkbox">
                <label for="widget-type-image">
                    <input type="checkbox" id="widget-type-image" <%= typeImage ? "checked" : "" %> />
                    <span class="checkbox-label-font">
                        <%= __('Image') %>
                    </span>
                </label>
            </div>
        </div>
    </div>
</div>
<div id="widget-tab-section">
    <div class="row widget-setup-row-pad">
        <div class="col-xs-12 form-group label-floating">
            <label class="control-label" for="widget-title"><%= __("Give the tab a title") %></label>
                <input type="text" id="widget-title" class="form-control" maxlength="128"
                value="<%- title %>">
        </div>
    </div>
    <div class="row widget-setup-row-pad">
        <div class="col-md-12 form-group label-floating">
            <label for="widget-color" class="control-label">Select the color of the tab</label>
            <div id="widget-color-container" class="input-group input-colorpicker colorpicker-element widget-general-set-pad">
                <span class="input-group-addon color-picker-block-pad"><i></i></span>
                <input id="widget-color" class="form-control" type="text"
                value="<%- color %>">
            </div>
        </div>
    </div>
    <div class="row widget-setup-row-pad">
        <div class="col-md-12 label-floating">
            <label class="control-label" for="widget-tab-width"><%= __("Change the tab width") %>
            </label>
            <div class="slider" data-slider-min="0" data-slider-max="100" 
                data-slider-input="widget-tab-width"></div>
            <input id="widget-tab-width" type="hidden" value="<%- tabWidth %>" />
        </div>
    </div>
</div>
<div id="widget-image-section">
    <div class="row widget-setup-row-pad">
        <div class="col-xs-12 form-group label-floating">
            <label class="control-label" for="widget-image"><%= __("Select the widget image") %></label>
            <select id="widget-default-image" class="form-control">
                <%= html.options([
                ['Custom', __('Custom')],
                ['Calling Man', __('Calling Man')],
                ['Calling Woman', __('Calling Woman')]], defaultImage) %>
            </select>
        </div>
    </div>
    <div class="row widget-setup-row-pad" id="widget-image-box">
        <div class="col-sm-12 text-center">
            <div id="widget-upload-image" class="text-muted">
            <%= __('Drag images here or click to upload') %>
            </div>
        </div>
    </div>
    <div class="row widget-setup-row-pad">
        <div class="col-md-12 label-floating">
            <label class="control-label" for="widget-image-horizontal"><%= __("Move the image position horizontally") %>
            </label>
            <div class="slider" data-slider-min="0" data-slider-max="100" data-slider-input="widget-image-horizontal"></div>
            <input id="widget-image-horizontal" class="form-control input-slider" type="hidden"
            value="<%- imageHorizontal || 0 %>">
        </div>
    </div>
    <div class="row widget-setup-row-pad">
        <div class="col-md-12 label-floating">
            <label class="control-label" for="widget-image-vertical"><%= __("Move the image position vertically") %>
            </label>
            <div class="slider" data-slider-min="0" data-slider-max="100" 
                data-slider-input="widget-image-vertical"></div>
            <input id="widget-image-vertical" class="form-control input-slider"
            type="hidden" value="<%- imageVertical || 0 %>">
        </div>
    </div>
    <div class="row widget-setup-row-pad">
        <div class="col-md-12 label-floating">
            <label class="control-label" for="widget-image-size"><%= __("Change the image size") %>
            </label>
            <div class="slider" data-slider-min="0" data-slider-max="200" 
                data-slider-input="widget-image-size"></div>
            <input id="widget-image-size" type="hidden" value="<%- imageSize %>" />
        </div>
    </div>
    <div class="row widget-setup-row-pad">
        <div class="col-xs-12 form-group label-floating">
            <label class="control-label" for="widget-show-hide-button">
                <%= __('Image position when tab is visible') %>
            </label>
            <div class="checkbox">
                <label>
                    <input id="widget-image-in-front" class="widget-field-checkbox"
                    type="checkbox" <% if (imageInFront) { %> checked <% } %> />
                    <span class="checkbox-label-font">
                        <%= __("Display image in-front of tab") %>
                    </span>
                </label>
            </div>
        </div>
    </div>
</div>
<div class="row widget-setup-row-pad">
    <div class="col-md-12 label-floating">
        <label for="widget-name" class="control-label">Apply advance widget settings</label>
    </div>
    <div class="col-md-12 panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">
                    <h4 class="panel-title">
                        Widget Animation Settings
                        <i class="material-icons">keyboard_arrow_down</i>
                    </h4>
                </a>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="false" style="height: 0px;">
                <div class="panel-body">
                    <div class="row widget-setup-row-pad">
                        <div class="col-md-12 form-group label-floating">
                            <label class="control-label" for="widget-animation"><%= __("Add some animation to your widget") %></label>
                            <select id="widget-animation" class="form-control" size="1">
                                <%= html.options([
                                ["", __("No Animation")],
                                ["bounce-in", __("Bounce - In")],
                                ["bounce-up", __("Bounce - Up")],
                                ["bounce-down", __("Bounce - Down")],
                                ["bounce-left", __("Bounce - Left")],
                                ["bounce-right", __("Bounce - Right")],
                                ["flip-horizontal", __("Flip - Horizontal")],
                                ["flip-vertical", __("Flip - Vertical")],
                                ["fade-in", __("Fade - In")],
                                ["fade-up", __("Fade - Up")],
                                ["fade-down", __("Fade - Down")],
                                ["fade-left", __("Fade - Left")],
                                ["fade-right", __("Fade - Right")],
                                ["slide-up", __("Slide - Up")],
                                ["slide-down", __("Slide - Down")],
                                ["slide-left", __("Slide - Left")],
                                ["slide-right", __("Slide - Right")],
                                ["rotate-in", __("Rotate - In")],
                                ["rotate-down-left", __("Rotate - Down Left")],
                                ["rotate-down-right", __("Rotate - Down Right")],
                                ["rotate-up-left", __("Rotate - Up Left")],
                                ["rotate-up-right", __("Rotate - Up Right")],
                                ["shake", __("Shake")]], animation) %>
                            </select>
                        </div>
                    </div>
                    <div class="row widget-setup-row-pad">
                        <div class="col-xs-12 form-group label-floating">
                            <label class="control-label" for="widget-show-hide-button">
                                <%= __('Repeating animation') %>
                            </label>
                            <div class="checkbox">
                                <label>
                                    <input id="widget-repeat-animation" class="widget-field-checkbox" value="option1" type="checkbox" checked>
                                    <span class="checkbox-label-font">
                                        <%= __("Repeat every 20 seconds") %>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    <h4 class="panel-title">
                        Widget Responsive Settings
                        <i class="material-icons">keyboard_arrow_down</i>
                    </h4>
                </a>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="false">
                <div class="panel-body">
                    <div class="row widget-setup-row-pad">
                        <div class="col-xs-12 form-group label-floating">
                            <label class="control-label" for="widget-show-hide-button">
                                <%= __('Hiding widget') %>
                            </label>
                            <div class="checkbox">
                                <label>
                                    <input id="widget-show-hide-button" class="widget-field-checkbox"
                                    type="checkbox" <% if (showHideButton) { %> checked <% } %> />
                                    <span class="checkbox-label-font">
                                        <%= __('show "close" button on widget') %>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row widget-setup-row-pad">
                        <div class="col-xs-12 form-group label-floating">
                            <label class="control-label" for="widget-show-hide-button">
                                <%= __('Mobile visibility') %>
                            </label>
                            <div class="checkbox">
                                <label>
                                    <input id="widget-show-on-mobile" class="widget-field-checkbox"
                                    type="checkbox" <% if (showOnMobile) { %> checked <% } %> />
                                    <span class="checkbox-label-font">
                                        <%= __("Show widget on mobile devices") %>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row widget-setup-row-pad">
                        <div class="col-xs-12 form-group label-floating">
                            <label class="control-label" for="widget-show-hide-button">
                                <%= __("Mobile Optimized") %>
                            </label>
                            <div class="checkbox">
                                <label>
                                    <input id="widget-mobile-optimized" class="widget-field-checkbox"
                                    type="checkbox" <% if (mobileOptimized) { %> checked <% } %> />
                                    <span class="checkbox-label-font">
                                        <%= __("Show a mobile optimized widget") %>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>