class LocaleGenerator {
            constructor(parent){
                this.parent = parent;
                this.count = this.parent.children().length;
                this.locales = this.prepareLocales();
                this.queriesSets = this.prepareQueriesSets();
                this.existLanguages = [];

                let fg = this.parent.children();
                fg.each((elem,val)=>{
                    this.existLanguages.push($(val).find('option:selected').first().text())
                });
            }

            generate(){
                if(this.existLanguages.length === this.locales.length){
                    return alert('No available languages');
                }

                let form_group = $('<div class="form-group">'),
                    label = $('<label class="control-label col-lg-2 required">').text(this.count),
                    div_10 = $('<div class="col-lg-10">'),
                    div = $('<div>').attr('id', `app_basebundle_site_locales_${this.count}`);

                this.parent.append(
                    form_group.append(
                        label,
                        div_10.append(
                            div.append(
                                this.renderSelect('Language'),
                                this.renderCheckBox('Enabled'),
                                this.renderCheckBox('Default'),
                                this.renderSelect('Queries')
                            )
                        )
                    )
                );
            }

            renderCheckBox($type){
                let div_fp = $('<div class="form-group">'),
                    div_checkbox = $('<div class="checkbox">'),
                    label = '',
                    input = '';

                if($type === 'Default'){
                    label = $('<label>').attr('for', `app_basebundle_site_locales_${this.count}_default`);
                    input = $('<input type="checkbox" value="0">').attr({
                        'name' : `app_basebundle_site[locales][${this.count}][default]`,
                        'id' : `app_basebundle_site_locales_${this.count}_default`
                    });
                }

                if($type === 'Enabled'){
                    label = $('<label>').attr('for', `app_basebundle_site_locales_${this.count}_enabled`);
                    input = $('<input type="checkbox" value="1" checked>').attr({
                        'name' : `app_basebundle_site[locales][${this.count}][enabled]`,
                        'id' : `app_basebundle_site_locales_${this.count}_enabled`
                    });
                }

                return div_fp.append(
                    div_checkbox.append(
                        label.append(input, $type)
                    )
                );
            }

            renderSelect($type){
                let label = '',
                    select = '',
                    div_fp = $('<div class="form-group">'),
                    div_col_lg_10 = $('<div class="col-lg-10">');

                if($type === 'Language'){

                    label = $('<label class="control-label col-lg-2 required">')
                        .text('Language')
                        .attr('for',`app_basebundle_site_locales_${this.count}_langId`);

                    select = $('<select class="form-control" required disabled>').attr({
                        'id' : `app_basebundle_site_locales_${this.count}_langId`,
                        'name' : `app_basebundle_site[locales][${this.count}][langId]`,
                        'disabled' : 'disabled',
                        'required' : 'required',
                    });

                    for (let i in this.locales){
                        if($.inArray(this.locales[i].name, this.existLanguages) === -1){
                            select.append(
                                $('<option>').attr('selected', 'selected').val(this.locales[i].id).text(this.locales[i].name)
                            );
                        } else {
                            select.append(
                                $('<option>').val(this.locales[i].id).text(this.locales[i].name)
                            );
                        }
                    }
                }

                if($type === 'Queries'){
                    label = $('<label class="control-label col-lg-2 required">')
                        .text('Queries set id')
                        .attr('for',`app_basebundle_site_locales_${this.count}_queriesSetId`);

                    select = $('<select class="form-control" required>').attr({
                        'name' : `app_basebundle_site[locales][${this.count}][queriesSetId]`,
                        'id' : `app_basebundle_site_locales_${this.count}_queriesSetId`
                    });

                    for (let i in this.queriesSets){
                        select.append(
                            $('<option>').val(this.queriesSets[i].id).text(this.queriesSets[i].name)
                        );
                    }
                }

                return div_fp.append(
                    label, div_col_lg_10.append(select)
                );
            }

            prepareLocales(){
                let firstLocale = this.parent.find($('.form-group')).first(),
                    firstSelect = firstLocale.find($('select')).first(),
                    options = firstSelect.find($('option')),
                    languages = [];

                options.each((elem, value) => {
                    let val = $(value);
                    languages.push({
                        'id' : val.val(),
                        'name' : val.text()
                    });
                });

                return languages;
            }

            prepareQueriesSets(){
                let firstLocale = this.parent.find($('.form-group')).first(),
                    firstSelect = firstLocale.find($('select')).last(),
                    options = firstSelect.find($('option')),
                    queriesSets = [];

                options.each((elem, value) => {
                    let val = $(value);
                    queriesSets.push({
                        'id' : val.val(),
                        'name' : val.text()
                    });
                });

                return queriesSets;
            }
        }