{% if errorMsg is not none %}
    <div class="alert alert-error">
        <a class="close" data-dismiss="alert" href="#">×</a>
        {{ errorMsg }}
    </div>
{% endif %}

<h1 style='padding-left:30px;'>
    {{ 'status:: numero de bit' | trans }} {{ app['request'].get('bit') }} ({{ flag_slugify(status['labelon']) }})
</h1>

<form id="fileupload" class="form-horizontal" target="_self" enctype="multipart/form-data" method="post" action="{{ path('database_submit_statusbit', { 'databox_id' : app['request'].get('databox_id'), 'bit' : app['request'].get('bit') }) }}">
    <div class="row-fluid">
        <div class="span12 well">
            <span class="label">{{ 'admin::status: case B' | trans }}</span>
            <div class="row-fluid">
                <label class="control-label" for="label_on">
                    {{ 'admin::status: texte a afficher' | trans }}
                </label>
                <div class="controls">
                    <input id="label_on" onkeyup="inputChanged(this);return(false);" name="label_on"
                           class="input-xlarge" type="text" value="{{ status['labelon'] }}">
                    <span class="alert alert-danger" style="margin-left:20px;padding-top: 5px;padding-right: 15px;padding-left: 15px;">{{ 'admin::status: warning! need indexation if changed' | trans }}</span>
                </div>
            </div>
            <div class="row-fluid">
                <label class="control-label">
                </label>
                <div class="controls">
                    {% for code, language in app['locales.available'] %}
                    <div class="span2">
                        <h6>{{ language }}</h6>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="row-fluid">
                <label class="control-label">
                    {{ 'Labels' | trans }}
                </label>
                <div class="controls">
                {% for code, language in app['locales.available'] %}
                <div class="span2">
                    <input name="labels_on[{{ code }}]" value="{{ status['labels_on'][code] }}" class="span12" type="text">
                </div>
                {% endfor %}
                </div>
            </div>
            <br />
            <div class="row-fluid">
                <label class="control-label" for="image_on">
                    {% trans %}Symbolized by{% endtrans %}
                </label>
                <div class="controls clearfix">
                    <span class="btn btn-success fileinput-button pull-left">
                        <i class="fa fa-plus icon-white" aria-hidden="true"></i>
                        <span>{% trans %}Select files...{% endtrans %}</span>
                        <input type="file" name="image_on" accept="image/jpg, image/png"/>
                    </span>
                    <div class='thumbnail pull-left' style='height:20px;width:20px;margin-left:10px'>
                        {% if status['img_on'] is defined and status['img_on'] %}
                            <img src="{{ status['img_on'] }}" />
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <label class="control-label" for="delete_icon_on">
                    {{ 'admin::status:: aucun symbole' | trans }}
                </label>
                <div class="controls">
                    <label class="checkbox">
                        <input id="delete_icon_off" name="delete_icon_on" type="checkbox">
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12 well">
            <span class="label">{{ 'admin::status: case A' | trans }}</span>
            <div class="row-fluid">
                <label class="control-label" for="label_off">
                    {{ 'admin::status: texte a afficher' | trans }}
                </label>
                <div class="controls">
                    <input id="label_off" onkeyup="inputChanged(this);return(false);" name="label_off"
                           class="input-xlarge" type="text" value="{{ status['labeloff'] }}">
                </div>
            </div>
            <div class="row-fluid">
                <label class="control-label">
                </label>
                <div class="controls">
                    {% for code, language in app['locales.available'] %}
                        <div class="span2">
                            <h6>{{ language }}</h6>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="row-fluid">
                <label class="control-label">
                    {{ 'Labels' | trans }}
                </label>
                <div class="controls">
                    {% for code, language in app['locales.available'] %}
                        <div class="span2">
                            <input name="labels_off[{{ code }}]" value="{{ status['labels_off'][code] }}" class="span12" type="text">
                        </div>
                    {% endfor %}
                </div>
            </div>
            <br />
            <div class="row-fluid">
                <label class="control-label" for="image_off">
                    {% trans %}Symbolized by{% endtrans %}
                </label>
                <div class="controls clearfix">
                    <span class="btn btn-success fileinput-button pull-left">
                        <i class="fa fa-plus icon-white" aria-hidden="true"></i>
                        <span>{% trans %}Select files...{% endtrans %}</span>
                        <input type="file" name="image_off" accept="image/jpg, image/png"/>
                    </span>
                    <div class='thumbnail pull-left' style='height:20px;width:20px;margin-left:10px;'>
                        {% if status['img_off'] is defined and status['img_off'] %}
                            <img src="{{ status['img_off'] }}" />
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <label class="control-label" for="delete_icon_off">
                    {{ 'admin::status:: aucun symbole' | trans }}
                </label>
                <div class="controls">
                    <label class="checkbox">
                        <input id="delete_icon_off" name="delete_icon_off" type="checkbox">
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <label class="checkbox">
                <input id="printable" name="printable" type="checkbox" {{ status['printable'] is defined and status['printable'] == '1' ? "checked" : "" }}>
                        {{ 'status:: Afficher le status dans les feuilles de reponses pour tous les utilisateurs' | trans }}
            </label>
            <label class="checkbox">
                <input id="searchable" name="searchable" type="checkbox" {{ status['searchable'] is defined and status['searchable'] == '1' ? "checked" : "" }}>
                            {{ 'status:: retrouver sous forme de filtre dans la recherche' | trans }}
            </label>
        </div>
    </div>
    <div class="row-fluid">
        <div  class=" span12">
            <div class="form-actions">
                <button id="form_submitter" class="btn btn-primary" type="button">
                    {{ 'boutton::valider' | trans }}
                </button>
                <a style='text-decoration:none;' target='right' class="btn" href="{{ path('database_display_statusbit', { 'databox_id' : app['request'].get('databox_id') }) }}">
                    {{ 'boutton::retour' | trans }}
                </a>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">
    function inputChanged(elem) {
        if ($(elem).val().length > 0) {
            //check if contains special characters
            if (isInvalid($(elem).val())) {
                $(elem).css('border-color', '#F00');
            } else {
                $(elem).css('border-color', '');
            }
        } else {
            $(elem).css('border-color', '#F00');
        }
    }

    function isInvalid(string) {
        var validText = new RegExp(/[!@#$%^&*()"£><≥≤/+=:;,]+/);
        return validText.test(string);
    }

$(document).ready(function(){
    var selected_files = [];

    $("#fileupload").fileupload({
        singleFileUploads: false,
        limitMultiFileUploads: 2,
        dataType: 'html',
        add: function(e, data) {
            $.each(data.files, function(i, file) {
                {% set supported_file_types = ['png', 'jpg', 'gif']|join(' | ') %}
                if( ! /(\image|\/)(png|jpeg|jpg|pjpg|gif)$/i.test(file.type)) {
                    alert("{{ 'Invalid file type, only (%supported_file_types%) file formats are supported' | trans({'%supported_file_types%' : supported_file_types}) | e('js') }}");

                    return false;
                }

                require([
                    "blueimp.loadimage"
                ], function (loadImage) {

                    loadImage(file,function(img){
                       $('input[name='+data.paramName[0]+']').closest('.controls').find('.thumbnail').empty().append(img);
                    }, {
                        fileType: /^image\/(gif|jpeg|png|jpg)$/,
                        maxSize : 5242880, // 5MB
                        maxWidth: 16,
                        maxHeight: 16,
                        minWidth: 16,
                        minHeight: 16
                    });
                });
            });

            selected_files.push(data);

            return false;
        },
        submit: function(e, data) {
          $('#right-ajax').empty().addClass('loading');
    },
        done: function (e, data) {
            enableFormsCallback(data.result);
        }
    });

    $("#form_submitter").bind('click', function(){
        if ($("[name=label_off]").val().length === 0) {
            $("[name=label_off]").css('border-color', '#F00');
            return;
        }
        if ($("[name=label_on]").val().length === 0) {
            $("[name=label_on]").css('border-color', '#F00');
            return;
        }
        if (isInvalid($("[name=label_off]").val()) || isInvalid($("[name=label_on]").val())) {
            return;
        }
        if( selected_files.length > 0 ) {
           $.each( selected_files, function(i, data) {
                data.submit();
            });
        } else {
            $("#fileupload").submit();
        }
    });
});

</script>