{% block autocomplete_widget %}

    <script type="text/javascript">
    $(document).ready(function() {
        $("#{{ id }}_text").autocomplete({
          open: function() { $('.ui-menu').width(500) },
          minLength: {{ minlenght }},
          {% if route is not empty %}
            source: "{{ path(route) }}",
          {% else %}
            source: [
            {% for k,choice in choices %}
                { label: "{{ choice.label|trans({}, translation_domain) }}", value: "{{ choice.value }}" },
            {% endfor %}
            ],
          {% endif %}
            select: function(event, ui) {
                var selectedObj = ui.item;
                $("#{{ id }}").val(selectedObj.value);
                $("#{{ id }}_text").val(selectedObj.label);
                return false;
            },
            change: function( event, ui ) {
                var selectedObj = ui.item;
                if ($("#{{ id }}_text").val() == '') {
                    $("#{{ id }}").val('');
                }
            }
        });
        $('.tooltip-help').tooltip();
    });
    </script>
    {# bootstrapv3 delete class : add-on input-append #}
    <div class="input-append input-group tooltip-help" data-toggle="tooltip" data-placement="right" data-container="body" data-original-title="{% trans %}Please type the first few characters and select one.{% endtrans %}" title="">
    <input type="hidden" id="{{ id }}" name="{{ full_name }}" {% if value is not empty %}value="{{ value }}" {% endif %}/>
    <input type="text" id="{{ id }}_text" {% for attrname,attrvalue in attr %}{{attrname}}="{{attrvalue}}" {% endfor %} value="{% if value is not empty %}{{ legend }}{% endif %}{#% for k,choice in choices %}{% if choice.value == value %}{{ choice.label }}{% endif %}{% endfor %#}" />
    <span class="add-on input-group-addon"><i class="fa fa-pencil"></i></span>
    </div>
    {% if help is defined %}
        <p class="help"><i class="fa fa-lightbulb-o"></i> {{ help|default('') }}</p>
    {% endif %}
    {% endblock %}

{% block ckeditor_widget %}
<script type="text/javascript" src="{{ asset('twtools/javascript/ckeditor/ckeditor.js')}}" ></script>
{% spaceless %}
    <div style="clear:both">
    <textarea {{ block('widget_attributes') }}>{{ value }}</textarea>
    </div>
    {% if help is defined %}
        <p class="help"><i class="fa fa-lightbulb-o"></i> {{ help|default('') }}</p>
    {% endif %}
{% endspaceless %}

<script>
$(document).ready(function() {
    CKEDITOR.replace( '{{ id }}', {
        extraPlugins : 'autogrow',
        toolbar: [
            {{ ckeditor_buttons }}
        ]
    });
});
</script>
{% endblock %}

{% block daterange_widget %}
    <div class="input-append">
        <input type="text" {{ block('widget_attributes') }} {% if value is not empty %} value="{{ value }}" {% endif %} />
        <span class="add-on"><i class="fa fa-calendar"></i></span>
    </div>
	<script type="text/javascript">
	$(document).ready(function() {
        $('#{{ id }}').daterangepicker({
            format: 'YYYY-MM-DD',
            locale: {
                applyLabel: '{% trans %}daterange.apply{% endtrans %}',
                fromLabel: '{% trans %}daterange.from{% endtrans %}',
                toLabel: '{% trans %}daterange.to{% endtrans %}',
                clearLabel: '{% trans %}daterange.clear{% endtrans %}',
                customRangeLabel: 'Custom Range',
                daysOfWeek: ['{% trans %}daterange.su{% endtrans %}', '{% trans %}daterange.mo{% endtrans %}', '{% trans %}daterange.tu{% endtrans %}', '{% trans %}daterange.we{% endtrans %}', '{% trans %}daterange.th{% endtrans %}', '{% trans %}daterange.fr{% endtrans %}','{% trans %}daterange.sa{% endtrans %}'],
                monthNames: ['{% trans %}daterange.january{% endtrans %}', '{% trans %}daterange.february{% endtrans %}', '{% trans %}daterange.march{% endtrans %}', '{% trans %}daterange.april{% endtrans %}', '{% trans %}daterange.may{% endtrans %}', '{% trans %}daterange.june{% endtrans %}', '{% trans %}daterange.july{% endtrans %}', '{% trans %}daterange.august{% endtrans %}', '{% trans %}daterange.september{% endtrans %}', '{% trans %}daterange.october{% endtrans %}', '{% trans %}daterange.november{% endtrans %}', '{% trans %}daterange.december{% endtrans %}'],
                firstDay: 1
            }
        });
	});
	</script>
{% endblock daterange_widget %}

{% block phone_widget %}
{% spaceless %}
	<style>
	#{{ id }}_prefix {
	    width: 30%;
	    display: inline;
	    font-size: 82%;
	}
	#{{ id }}_suffix {
	    width: 65%;
	    margin-left: 1%;
	    display: inline;
	}
	</style>
	{% set locale = app.request.locale|default('fr') %}
	<div {% for attrname,attrvalue in attr %}{{attrname}}="{{attrvalue}}" {% endfor %}>
	    <select name="{{ full_name }}[prefix]" class="{{ name }}_prefix" id="{{ id }}_prefix">
	        {% for prefix,country in prefixes %}
	            {% set choice = '' %}
	            {% if value.prefix == prefix %}
	                {% set choice = 'selected' %}
	            {% elseif value.prefix == '' and country|lower == locale %}
	                {% set choice = 'selected' %}
	            {% endif %}
	            <option value="{{'+' ~ prefix}}" {{ choice }}>{{'(' ~ country ~ ') ' ~ '+' ~ prefix}}</option>
	        {% endfor %}
	    </select>
		<input type="text" name="{{ full_name }}[suffix]" value="{{ value.suffix }}" class="{{ name }}_suffix" id="{{ id }}_suffix"/>
	</div>
    {% if help is defined %}
        <p class="help"><i class="fa fa-lightbulb-o"></i> {{ help|default('') }}</p>
    {% endif %}
{% endspaceless %}
{% endblock %}

{% block recaptcha_widget %}
{% if form.vars.enabled %}
{% spaceless %}
 <style>
    .{{ full_name }}_size{
        width: 302px;
        height: 352px;
    }
    .{{ full_name }}_positionR{
        position: relative;
    }
    .{{ full_name }}_positionA{
        position: absolute;
    }
    #g-recaptcha-response{
        width: 250px;
        height: 80px;
        border: 1px solid #c1c1c1;
        margin: 0px;
        padding: 0px;
        resize: none;
    }
    .{{ full_name }}_iframe{
        border-style: none;
    }
    #{{ full_name }}DivTextArea{
        width: 250px;
        height: 80px;
        position: absolute;
        border-style: none;
        bottom: 21px;
        left: 25px;
        margin: 0px;
        padding: 0px;
        right: 25px;
    }
 </style>
    {% if not(form.vars.ajax) %}
    <script src="{{ form.vars.url_challenge }}" type="text/javascript"></script>
    <div class="g-recaptcha" data-theme="{{ attr.options.theme }}" data-type="{{ attr.options.type }}" data-sitekey="{{ form.vars.public_key }}"></div>
    <noscript>
        <div class="{{ full_name }}_size" style="">
            <div class="{{ full_name }}_size">
                <div class="{{ full_name }}_size {{ full_name }}_positionR">
                    <iframe src="https://www.google.com/recaptcha/api/fallback?k={{ form.vars.public_key }}" frameborder="0" scrolling="no" class="{{ full_name }}_size {{ full_name }}_iframe" ></iframe>
                </div>
                <div id="{{ full_name }}DivTextArea">
                    <textarea id="g-recaptcha-response" name="g-recaptcha-response"
                    class="g-recaptcha-response"
                    style=""
                    >
                    </textarea>
                </div>
            </div>
        </div>
    </noscript>
    {% else %}
    <div id="recaptcha_div"></div>
    <script type="text/javascript">
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.onload = function() {
            Recaptcha.create('{{ form.vars.public_key }}', 'recaptcha_div', {{ attr.options|default({})|json_encode|raw }});
        }
        script.src = '{{ form.vars.url_api }}';
        document.getElementsByTagName('head')[0].appendChild(script);
    </script>
    {% endif %}
{% endspaceless %}
{% endif %}
{% endblock recaptcha_widget %}


{% block flipswitch_widget %}
{% spaceless %}
 <style>
    .onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
    display: none !important;
    }
    .onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
    }
    .onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    .onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #27a9e3; color: #FFFFFF;
    }
    .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
    }
    .onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 20px !important;
    position: absolute; top: 0; bottom: 0; right: 56px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
    }
 </style>
{% endspaceless %}
    {% spaceless %}
    <div class="onoffswitch" {% for attrname,attrvalue in attr %}{{attrname}}="{{attrvalue}}" {% endfor %}>
        <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} class="onoffswitch-checkbox"/>
        <label class="onoffswitch-label" for="{{ id }}">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>
        {% if help is defined %}
            <p class="help"><i class="fa fa-lightbulb-o"></i> {{ help|default('') }}</p>
        {% endif %}
    {% endspaceless %}
{% endblock %}