<commit_before>{#=== Options ============================================================================#}

{% set attr_opt = {
class:              field.class|default(''),
id:                 key,
name:               name,
required:           field.required|default(false),
readonly:           field.readonly|default(false),
type:               field.hidden ? 'hidden' : 'text',
'data-format':      field.format|default('rgba'),
'data-inline':      field.inline ? 'true' : 'false',
'data-horizontal':  field.horizontal ? 'true' : 'false',
'data-align':       field.align|default('left')
}%}

{#=== FIELDSET ============================================================================#}

<fieldset class="bootstrap-colorpicker">
    <div class="col-sm-12">
        <div>
            <label class="control-label">{{field.label|default(key)}}</label>
        </div>
        <input {{ macro.attr(attr_opt) }} data-container=".{{key}}container" value="{{ context.content.get(contentkey)|default('rgba(0,0,0,1)') }}" data-color="{{ context.content.get(contentkey)|default('rgba(0,0,0,1)') }}"/>
        <div class="{{key}}container"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#{{ key }}').colorpicker().on('changeColor.colorpicker', function(event){
                  $(this).val(event.color);
                }).colorpicker('setValue', '{{ context.content.get(contentkey)|default('rgba(0,0,0,1)') }}');
            })
        </script>
    </div>
</fieldset><commit_msg>update to support new colorpicker box to the right<commit_after>{#=== Options ============================================================================#}

{% set attr_opt = {
class:              field.class|default(''),
id:                 key,
name:               name,
required:           field.required|default(false),
readonly:           field.readonly|default(false),
type:               field.hidden ? 'hidden' : 'text',
'data-format':      field.format|default('rgba'),
'data-inline':      field.inline ? 'true' : 'false',
'data-horizontal':  field.horizontal ? 'true' : 'false',
'data-align':       field.align|default('left')
}%}

{#=== FIELDSET ============================================================================#}

<fieldset class="bootstrap-colorpicker">
    <div class="col-sm-12">
        <div>
            <label class="control-label">{{field.label|default(key)}}</label>
        </div>
        <div id="{{key}}wrapper" class="input-group {% if field.component %}colorpicker-component{% endif %}">
            <input {{ macro.attr(attr_opt) }} data-container=".{{key}}container" value="{{ context.content.get(key)|default('rgba(0,0,0,1)') }}" data-color="{{ context.content.get(key)|default('rgba(0,0,0,1)') }}"/>
            {% if field.component %}<span class="input-group-addon"><i></i></span>{% endif %}
        </div>
        <div class="{{key}}container"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#{{ key }}wrapper').colorpicker().on('changeColor.colorpicker', function(event){
                  $(this).val(event.color);
                }).colorpicker('setValue', '{{ context.content.get(key)|default('rgba(0,0,0,1)') }}');
            })
        </script>
    </div>
</fieldset>
{'fraction_non_alphanumeric': 0.28493812254754, 'fraction_numerical': 0.008451554482342288, 'mean_word_length': 3.1896333754740835, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7638082', 'n_tokens_mistral': 958, 'n_tokens_neox': 916, 'n_words': 140}