diff --git a/api/urls.py b/api/urls.py
index 7519643..42c3b01 100755
--- a/api/urls.py
+++ b/api/urls.py
@@ -5,6 +5,7 @@ from .views import (
     ContractorResumeFilesViewSet,
     ContractorResumeViewSet,
     DocumentViewSet,
+    ElFormatViewSet,
     LocationViewSet,
     LocationViewSetFlat,
     MessageViewSet,
@@ -29,9 +30,12 @@ from .views import (
 router = routers.DefaultRouter()
 
 router.register(r'answers', AnswerViewSet)
+router.register(r'building_classifications', BuildingClassificationViewSet)
+router.register(r'construction_type', ConstructionTypeViewSet)
 router.register(r'contractorresume', ContractorResumeViewSet)
 router.register(r'contractorresumefiles', ContractorResumeFilesViewSet)
 router.register(r'documents', DocumentViewSet)
+router.register(r'el_format', ElFormatViewSet)
 router.register(r'locations', LocationViewSet)
 router.register(r'locations_flat', LocationViewSetFlat)
 router.register(r'message', MessageViewSet, base_name='Message')
@@ -41,8 +45,6 @@ router.register(r'portfolio-photos', PortfolioPhotoViewSet)
 router.register(r'portfolios', PortfolioViewSet)
 router.register(r'projects', ProjectViewSet)
 router.register(r'realties', RealtyViewSet)
-router.register(r'building_classifications', BuildingClassificationViewSet)
-router.register(r'construction_type', ConstructionTypeViewSet)
 router.register(r'reviews', ReviewViewSet)
 router.register(r'specializations', SpecializationViewSet)
 router.register(r'specializations_flat', SpecializationViewSetFlat)
diff --git a/api/views.py b/api/views.py
index b520848..0a6c00f 100755
--- a/api/views.py
+++ b/api/views.py
@@ -11,7 +11,7 @@ from chat.models import Message, Notes, Documents, NewMessage
 from chat.serializers import MessageSerializer, NoteSerializer, DocumentsSerializer
 from common.filters import LocationFilterSet
 from common.models import Location
-from common.serializers import LocationSerializer, LocationSerializerFlat
+from common.serializers import LocationSerializer, LocationSerializerFlat, ElFormatSerializer
 from projects.filters import (
     ProjectFilterSet, RealtyFilterSet, StageFilterSet, PortfolioFilterSet, OrderFilterSet,
     PortfolioPhotoFilterSet, AnswerFilterSet, BuildingClassficationFilterSet, ConstructionTypeFilterSet
@@ -33,7 +33,7 @@ from users.models import User, ContractorResumeFiles, ContractorResume, Team
 from users.serializers import UserSerializer, ContractorResumeFilesSerializer, ContractorResumeSerializer, \
     TeamSerializer
 from work_sell.filters import WorkSellFilterSet, WorkSellPhotoFilterSet
-from work_sell.models import WorkSell, WorkSellPhoto
+from work_sell.models import WorkSell, WorkSellPhoto, ElFormat
 from work_sell.serializers import WorkSellSerializer, WorkSellPhotoSerializer
 
 
@@ -230,6 +230,12 @@ class LocationViewSetFlat(ModelViewSet):
     filter_class = LocationFilterSet
 
 
+class ElFormatViewSet(ModelViewSet):
+    queryset = ElFormat.objects.all().order_by('name')
+    serializer_class = ElFormatSerializer
+    # filter_class = LocationFilterSet
+
+
 class PortfolioPagination(PageNumberPagination):
     page_size = settings.API_PAGE_SIZE  # Default page size
     page_size_query_param = 'page_size'  # Provide custom page size through a query param
diff --git a/assets/img/aui-icon-close.png b/assets/img/aui-icon-close.png
new file mode 100644
index 0000000..020d80d
Binary files /dev/null and b/assets/img/aui-icon-close.png differ
diff --git a/assets/img/close-img-icon.png b/assets/img/close-img-icon.png
new file mode 100644
index 0000000..0031ab8
Binary files /dev/null and b/assets/img/close-img-icon.png differ
diff --git a/assets/js/build/create_project.js b/assets/js/build/create_project.js
index 5f8a67e..62fb363 100644
--- a/assets/js/build/create_project.js
+++ b/assets/js/build/create_project.js
@@ -48,19 +48,15 @@
 
 	var _file_upload = __webpack_require__(1);
 
-	var _file_upload2 = _interopRequireDefault(_file_upload);
+	var _extended_field = __webpack_require__(3);
 
-	var _extended_field = __webpack_require__(2);
+	var _custom_check = __webpack_require__(4);
 
-	var _custom_check = __webpack_require__(3);
+	var _read_more = __webpack_require__(5);
 
-	var _read_more = __webpack_require__(4);
+	var _only_one_checkbox = __webpack_require__(6);
 
-	var _only_one_checkbox = __webpack_require__(5);
-
-	var _test_seeds = __webpack_require__(6);
-
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+	var _test_seeds = __webpack_require__(7);
 
 	function showHideRealry() {
 	    var check = $('#checkbox-sb-realty');
@@ -75,7 +71,7 @@
 	}
 
 	$(function () {
-	    (0, _file_upload2.default)();
+	    (0, _file_upload.fileUploadInit)();
 	    (0, _extended_field.extendedFieldInit)();
 	    (0, _custom_check.customCheckInit)();
 	    showHideRealry();
@@ -85,30 +81,16 @@
 
 /***/ },
 /* 1 */
-/***/ function(module, exports) {
+/***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
 	    value: true
 	});
-	exports.default = fileUploadInit;
-	function humanFileSize(bytes, si) {
-	    var thresh = si ? 1000 : 1024;
-
-	    if (Math.abs(bytes) < thresh) return bytes + ' B';
+	exports.fileUploadInit = undefined;
 
-	    var units = si ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-
-	    var u = -1;
-
-	    do {
-	        bytes /= thresh;
-	        ++u;
-	    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
-
-	    return bytes.toFixed(1) + ' ' + units[u];
-	}
+	var _utils = __webpack_require__(2);
 
 	function fileUploadInit() {
 	    var $fileUploadContainer = $('#fileUploadContainer');
@@ -123,7 +105,7 @@
 	        var filePath = $fileInput.val().replace(/\\/g, '/');
 	        var fileName = path.basename(filePath);
 	        //var fileExt = path.extname(filePath)
-	        var fileSize = $fileInput.get(0).files && humanFileSize($fileInput.get(0).files[0].size);
+	        var fileSize = $fileInput.get(0).files && (0, _utils.humanFileSize)($fileInput.get(0).files[0].size);
 
 	        if (fileName) {
 	            $fileUploadWidget.find('.file-upload-label').text(fileName + ' ' + fileSize);
@@ -141,19 +123,60 @@
 	        var $btn = $(this);
 	        $btn.closest('.file-upload-widget').remove();
 	    });
-
-	    $fileUploadContainer.on('click', '.existing-file-remove-btn', function ($evt) {
-	        var $btn = $(this);
-	        $btn.closest('.existing-file-widget').remove();
-	    });
 	}
 
+	exports.fileUploadInit = fileUploadInit;
+
 /***/ },
 /* 2 */
 /***/ function(module, exports) {
 
 	'use strict';
 
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	function getCookie(name) {
+	    var cookieValue = null;
+	    if (document.cookie && document.cookie != '') {
+	        var cookies = document.cookie.split(';');
+	        for (var i = 0; i < cookies.length; i++) {
+	            var cookie = jQuery.trim(cookies[i]);
+	            if (cookie.substring(0, name.length + 1) == name + '=') {
+	                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+	                break;
+	            }
+	        }
+	    }
+	    return cookieValue;
+	}
+
+	function humanFileSize(bytes, si) {
+	    var thresh = si ? 1000 : 1024;
+
+	    if (Math.abs(bytes) < thresh) return bytes + ' B';
+
+	    var units = si ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+
+	    var u = -1;
+
+	    do {
+	        bytes /= thresh;
+	        ++u;
+	    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
+
+	    return bytes.toFixed(1) + ' ' + units[u];
+	}
+
+	exports.humanFileSize = humanFileSize;
+	exports.getCookie = getCookie;
+
+/***/ },
+/* 3 */
+/***/ function(module, exports) {
+
+	'use strict';
+
 	Object.defineProperty(exports, "__esModule", {
 	    value: true
 	});
@@ -179,7 +202,7 @@
 	exports.extendedFieldInit = extendedFieldInit;
 
 /***/ },
-/* 3 */
+/* 4 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -208,7 +231,7 @@
 	exports.customCheckInit = customCheckInit;
 
 /***/ },
-/* 4 */
+/* 5 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -234,7 +257,7 @@
 	exports.readMoreInit = readMoreInit;
 
 /***/ },
-/* 5 */
+/* 6 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -265,7 +288,7 @@
 	exports.onlyOneCheckboxInit = onlyOneCheckboxInit;
 
 /***/ },
-/* 6 */
+/* 7 */
 /***/ function(module, exports) {
 
 	"use strict";
diff --git a/assets/js/build/create_worksell.js b/assets/js/build/create_worksell.js
new file mode 100644
index 0000000..032caeb
--- /dev/null
+++ b/assets/js/build/create_worksell.js
@@ -0,0 +1,212 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _file_upload = __webpack_require__(1);
+
+	var _image_upload = __webpack_require__(8);
+
+	$(function () {
+	    // fileUploadInit();
+	    (0, _image_upload.imageUploadInit)();
+	});
+
+/***/ },
+/* 1 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.fileUploadInit = undefined;
+
+	var _utils = __webpack_require__(2);
+
+	function fileUploadInit() {
+	    var $fileUploadContainer = $('#fileUploadContainer');
+
+	    $('#fileUploadAddBtn').on('click', function ($evt) {
+	        $fileUploadContainer.find('.file-upload-widget').last().find('.file-upload-input').click();
+	    });
+
+	    $fileUploadContainer.on('change', '.file-upload-input', function ($evt) {
+	        var $fileInput = $(this);
+	        var $fileUploadWidget = $fileInput.closest('.file-upload-widget');
+	        var filePath = $fileInput.val().replace(/\\/g, '/');
+	        var fileName = path.basename(filePath);
+	        //var fileExt = path.extname(filePath)
+	        var fileSize = $fileInput.get(0).files && (0, _utils.humanFileSize)($fileInput.get(0).files[0].size);
+
+	        if (fileName) {
+	            $fileUploadWidget.find('.file-upload-label').text(fileName + ' ' + fileSize);
+
+	            var $newFileUploadWidget = $fileUploadWidget.clone();
+	            $newFileUploadWidget.find('.file-upload-label').text('');
+
+	            $fileUploadContainer.find('ul').first().append($newFileUploadWidget);
+
+	            $fileUploadWidget.css('display', 'block');
+	        }
+	    });
+
+	    $fileUploadContainer.on('click', '.file-upload-remove-btn', function ($evt) {
+	        var $btn = $(this);
+	        $btn.closest('.file-upload-widget').remove();
+	    });
+	}
+
+	exports.fileUploadInit = fileUploadInit;
+
+/***/ },
+/* 2 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	function getCookie(name) {
+	    var cookieValue = null;
+	    if (document.cookie && document.cookie != '') {
+	        var cookies = document.cookie.split(';');
+	        for (var i = 0; i < cookies.length; i++) {
+	            var cookie = jQuery.trim(cookies[i]);
+	            if (cookie.substring(0, name.length + 1) == name + '=') {
+	                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+	                break;
+	            }
+	        }
+	    }
+	    return cookieValue;
+	}
+
+	function humanFileSize(bytes, si) {
+	    var thresh = si ? 1000 : 1024;
+
+	    if (Math.abs(bytes) < thresh) return bytes + ' B';
+
+	    var units = si ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+
+	    var u = -1;
+
+	    do {
+	        bytes /= thresh;
+	        ++u;
+	    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
+
+	    return bytes.toFixed(1) + ' ' + units[u];
+	}
+
+	exports.humanFileSize = humanFileSize;
+	exports.getCookie = getCookie;
+
+/***/ },
+/* 3 */,
+/* 4 */,
+/* 5 */,
+/* 6 */,
+/* 7 */,
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.imageUploadInit = undefined;
+
+	var _utils = __webpack_require__(2);
+
+	function imageUploadInit() {
+	    var $fileUploadContainer = $('#fileUploadContainer');
+
+	    $('#fileUploadAddBtn').on('click', function ($evt) {
+	        $fileUploadContainer.find('.file-upload-widget').last().find('.file-upload-input').click();
+	    });
+
+	    $fileUploadContainer.on('change', '.file-upload-input', function ($evt) {
+	        var $fileInput = $(this);
+	        var $fileUploadWidget = $fileInput.closest('.file-upload-widget');
+	        var $fileImg = $fileUploadWidget.find('img');
+	        var filePath = $fileInput.val().replace(/\\/g, '/');
+	        var fileName = path.basename(filePath);
+	        var fileSize = $fileInput.get(0).files && (0, _utils.humanFileSize)($fileInput.get(0).files[0].size);
+
+	        if (fileName) {
+	            $fileUploadWidget.find('.file-upload-label').text(fileName + ' ' + fileSize);
+
+	            var $newFileUploadWidget = $fileUploadWidget.clone();
+	            $newFileUploadWidget.find('.file-upload-label').text('');
+
+	            $fileUploadContainer.find('.list-new-new').append($newFileUploadWidget);
+
+	            $fileUploadWidget.css('display', 'block');
+
+	            if ($fileImg) {
+	                var reader = new FileReader();
+	                reader.onload = function (e) {
+	                    $fileImg.attr('src', e.target.result);
+	                };
+
+	                reader.readAsDataURL($fileInput[0].files[0]);
+	            }
+	        }
+	    });
+
+	    $fileUploadContainer.on('click', '.file-upload-remove-img-btn', function ($evt) {
+	        var $btn = $(this);
+	        $btn.closest('.file-upload-widget').remove();
+	    });
+	} //TODO: оформить Upload'еры в виде классов
+	exports.imageUploadInit = imageUploadInit;
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/assets/js/build/init_create_worksell.js b/assets/js/build/init_create_worksell.js
new file mode 100644
index 0000000..b6b0f96
--- /dev/null
+++ b/assets/js/build/init_create_worksell.js
@@ -0,0 +1,1905 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _SelectedContainer = __webpack_require__(10);
+
+	var _SelectedContainer2 = _interopRequireDefault(_SelectedContainer);
+
+	var _SelectedContainerCreate = __webpack_require__(14);
+
+	var _SelectedContainerCreate2 = _interopRequireDefault(_SelectedContainerCreate);
+
+	var _NoTreeSelect = __webpack_require__(15);
+
+	var _NoTreeSelect2 = _interopRequireDefault(_NoTreeSelect);
+
+	var _TreeSelect = __webpack_require__(17);
+
+	var _TreeSelect2 = _interopRequireDefault(_TreeSelect);
+
+	var _SingleTreeSelect = __webpack_require__(18);
+
+	var _SingleTreeSelect2 = _interopRequireDefault(_SingleTreeSelect);
+
+	var _SelectOrCreate = __webpack_require__(19);
+
+	var _SelectOrCreate2 = _interopRequireDefault(_SelectOrCreate);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	$(function () {
+	    function createSpecs(url) {
+	        // SPECIALIZATIONS
+	        var sb_main = new _TreeSelect2.default($('#select-box-1'), { url: url, visible: true, required: true });
+	        sb_main.setHeader("Тип готовой работы");
+	        var select_container = new _SelectedContainer2.default($('#selected-spec'), {
+	            obj: sb_main
+	        });
+	        sb_main.connectSelectedContainer(select_container);
+	        var sb_1 = new _TreeSelect2.default($('#select-box-2'), { obj: sb_main });
+	        var sb_2 = new _TreeSelect2.default($('#select-box-3'), { obj: sb_main });
+	        var sb_3 = new _TreeSelect2.default($('#select-box-4'), { obj: sb_main });
+	        var sb_4 = new _TreeSelect2.default($('#select-box-5'), { obj: sb_main });
+
+	        // select_container.on("add", () => {
+	        //     let $container = $('#spec-value');
+	        //     $container.html($('#selected-spec').find(".selected-element").find(".name").html());
+	        // });
+
+	        sb_main.setNearbySelectBox(sb_1);
+	        sb_1.setNearbySelectBox(sb_2, sb_main);
+	        sb_2.setNearbySelectBox(sb_3, sb_1);
+	        sb_3.setNearbySelectBox(sb_4, sb_2);
+	        sb_4.setNearbySelectBox("", sb_3);
+	    }
+
+	    function createBuildingClass(url) {
+	        // BUILDING-CLASSIFICATION
+	        sb_build_main = new _TreeSelect2.default($('#sb-building-classification'), { url: url, visible: true });
+	        sb_build_main.setHeader("Классификация здания");
+
+	        var sb_build_1 = new _TreeSelect2.default($('#sb-building-sub-classification'), { obj: sb_build_main });
+
+	        var select_build_container = new _SelectedContainer2.default($('#selected-building-classification'), {
+	            obj: sb_build_main,
+	            onlyOne: true
+	        });
+	        sb_build_main.connectSelectedContainer(select_build_container);
+
+	        sb_build_main.setNearbySelectBox(sb_build_1);
+	        sb_build_1.setNearbySelectBox("", sb_build_main);
+	    }
+
+	    function createConstructionType(url) {
+	        sb_constr_main = new _NoTreeSelect2.default($('#sb-construction-type'), { url: url, visible: true });
+	        sb_constr_main.setHeader("Вид строительства");
+	        var select_constr_type = new _SelectedContainer2.default($('#selected-construction-type'), {
+	            obj: sb_constr_main,
+	            noTree: true,
+	            onlyOne: true
+	        });
+	        sb_constr_main.connectSelectedContainer(select_constr_type);
+	    }
+
+	    function createLocations(url) {
+	        sb_loc_main = new _TreeSelect2.default($('#sb-location-1'), { url: url, visible: true });
+	        sb_loc_main.setHeader("Проектное местоположение");
+	        var select_loc = new _SelectedContainer2.default($('#selected-location'), {
+	            obj: sb_loc_main,
+	            onlyOne: true
+	        });
+	        sb_loc_main.connectSelectedContainer(select_loc);
+	        var sb_loc_1 = new _TreeSelect2.default($('#sb-location-2'), { obj: sb_loc_main });
+	        var sb_loc_2 = new _TreeSelect2.default($('#sb-location-3'), { obj: sb_loc_main });
+
+	        sb_loc_main.setNearbySelectBox(sb_loc_1);
+	        sb_loc_1.setNearbySelectBox(sb_loc_2, sb_loc_main);
+	        sb_loc_2.setNearbySelectBox("", sb_loc_1);
+	    }
+
+	    function createFormat(url) {
+	        var sb_format_main = new _NoTreeSelect2.default($('#sb-format'), { url: url, visible: true });
+	        sb_format_main.setHeader("Формат электронной версии");
+	        var select_format = new _SelectedContainer2.default($('#selected-format'), {
+	            obj: sb_format_main,
+	            noTree: true
+	        });
+	        sb_format_main.connectSelectedContainer(select_format);
+	    }
+
+	    var sb_loc_main = void 0,
+	        sb_constr_main = void 0,
+	        sb_build_main = void 0;
+
+	    createSpecs('/api/specializations_flat');
+
+	    createBuildingClass('/api/building_classifications');
+	    createConstructionType('/api/construction_type');
+	    createLocations('/api/locations_flat');
+	    createFormat('/api/el_format');
+
+	    // createRealty('/api/realties/current_user')
+	});
+
+/***/ },
+/* 1 */,
+/* 2 */,
+/* 3 */,
+/* 4 */,
+/* 5 */,
+/* 6 */,
+/* 7 */,
+/* 8 */,
+/* 9 */,
+/* 10 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.default = undefined;
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	var _desc, _value, _class; // `
+
+
+	var _DataTree = __webpack_require__(11);
+
+	var _DataTree2 = _interopRequireDefault(_DataTree);
+
+	var _NoTreeData = __webpack_require__(12);
+
+	var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
+
+	var _decorators = __webpack_require__(13);
+
+	var _decorators2 = _interopRequireDefault(_decorators);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
+	    var desc = {};
+	    Object['ke' + 'ys'](descriptor).forEach(function (key) {
+	        desc[key] = descriptor[key];
+	    });
+	    desc.enumerable = !!desc.enumerable;
+	    desc.configurable = !!desc.configurable;
+
+	    if ('value' in desc || desc.initializer) {
+	        desc.writable = true;
+	    }
+
+	    desc = decorators.slice().reverse().reduce(function (desc, decorator) {
+	        return decorator(target, property, desc) || desc;
+	    }, desc);
+
+	    if (context && desc.initializer !== void 0) {
+	        desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
+	        desc.initializer = undefined;
+	    }
+
+	    if (desc.initializer === void 0) {
+	        Object['define' + 'Property'](target, property, desc);
+	        desc = null;
+	    }
+
+	    return desc;
+	}
+
+	var tmpl_selectedElement = function tmpl_selectedElement(header, name, id) {
+	    return '\n            <div class="selected-element" style="' + (header ? '' : 'display:flex; align-items: center;') + '">\n                <div class="' + (header ? 'header' : '') + '">\n                    ' + header + '\n                </div>\n                <div class="name">\n                    ' + name + '\n                </div>\n                <span data-id="' + id + '" class="icon-remove"></span>\n            </div>\n';
+	};
+
+	var SelectedContainer = (_class = function () {
+	    function SelectedContainer($container, _ref) {
+	        var _this = this;
+
+	        var obj = _ref.obj,
+	            _ref$noTree = _ref.noTree,
+	            noTree = _ref$noTree === undefined ? false : _ref$noTree,
+	            _ref$noHeader = _ref.noHeader,
+	            noHeader = _ref$noHeader === undefined ? false : _ref$noHeader,
+	            _ref$onlyOne = _ref.onlyOne,
+	            onlyOne = _ref$onlyOne === undefined ? false : _ref$onlyOne;
+
+	        _classCallCheck(this, SelectedContainer);
+
+	        // TODO: rename variables to camelCase
+	        this.$self = $container;
+	        this.elements_id = []; // [spec_id, spec_id, ...]
+	        this.onlyOne = onlyOne;
+	        this.options = { noHeader: noHeader };
+	        var self = this;
+	        this.$self.hide();
+
+	        obj.dataPromise.then(function (data) {
+	            data = data.results ? data.results : data;
+	            _this.dataTree = noTree ? new _NoTreeData2.default(data) : new _DataTree2.default(data);
+	            _this.$input = _this.$self.find('input[type="hidden"]');
+	            if (_this.$input.length == 0) throw new URIError('input for ' + _this.$self.attr("class") + ' not found');
+
+	            _this.restoreElements();
+	        }).catch(self._onLoadDataError.bind(self));
+	    }
+
+	    _createClass(SelectedContainer, [{
+	        key: 'restoreElements',
+	        value: function restoreElements() {
+	            var self = this;
+	            if (this.$input && this.$input.val()) {
+
+	                var clearString = this.$input.val().replace(/[\[\]\'\'\"\"]/g, '');
+	                var data = clearString.split(',').filter(function (el) {
+	                    return el;
+	                });
+	                this.elements_id = [];
+	                if (this.$input) this.$input.val(this.elements_id.join(','));
+	                data.forEach(function (el) {
+	                    return self.add(el);
+	                });
+	            }
+	        }
+	    }, {
+	        key: 'on',
+	        value: function on(methodName, func) {
+	            this[methodName] = this[methodName].bind(this, { func: func, bindFunc: true });
+	        }
+	    }, {
+	        key: '_removeById',
+	        value: function _removeById(id) {
+	            var index = this.elements_id.indexOf(id);
+	            if (index >= 0) {
+	                this.elements_id.splice(index, 1);
+	            }
+	            this.$self.find('span[data-id=\'' + id + '\']').parents('.selected-element').remove();
+	        }
+	    }, {
+	        key: '_onLoadDataError',
+	        value: function _onLoadDataError(error) {
+	            console.log("Error loading data -->", error);
+	        }
+	    }, {
+	        key: 'removeAll',
+	        value: function removeAll() {
+	            var _iteratorNormalCompletion = true;
+	            var _didIteratorError = false;
+	            var _iteratorError = undefined;
+
+	            try {
+	                for (var _iterator = this.elements_id[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+	                    var id = _step.value;
+
+	                    this._removeById(id);
+	                }
+	            } catch (err) {
+	                _didIteratorError = true;
+	                _iteratorError = err;
+	            } finally {
+	                try {
+	                    if (!_iteratorNormalCompletion && _iterator.return) {
+	                        _iterator.return();
+	                    }
+	                } finally {
+	                    if (_didIteratorError) {
+	                        throw _iteratorError;
+	                    }
+	                }
+	            }
+	        }
+	    }, {
+	        key: 'remove',
+	        value: function remove(e) {
+	            var spec_id = $(e.target).data("id");
+	            this._removeById(spec_id);
+	            if (this.$input) this.$input.val(this.elements_id.join(','));
+	            if (!this.elements_id.length) this.$self.hide();
+	            e.preventDefault();
+	        }
+	    }, {
+	        key: 'replace',
+	        value: function replace(_id, max_len) {
+	            var id = Number(_id);
+	            if (this.elements_id.length > 1) throw new RangeError("Replace error: more than one element");
+	            // Remove old
+	            this._removeById(this.elements_id[0]);
+	            //Add new
+	            this._addElementToHtml(id, max_len);
+	            this.elements_id = [id];
+	        }
+	    }, {
+	        key: '_addElementToHtml',
+	        value: function _addElementToHtml(id, max_len) {
+	            var self = this;
+	            var header = SelectedContainer.getHeader(this.dataTree.getSpecChain(id), "", max_len);
+	            var name = this.dataTree.getElementById(id).name;
+	            this.elements_id.push(id);
+	            if (this.$input) this.$input.val(this.elements_id.join(','));
+	            // console.log("header = ", header);
+	            this.$self.append(SelectedContainer.getTemplate(header || (this.options.noHeader ? "" : "&nbsp;"), name, id));
+	            this.btn_remove = this.$self.find('.icon-remove');
+	            this.btn_remove.on("click", this.remove.bind(self));
+	            if (this.elements_id.length) this.$self.show();
+	        }
+	    }, {
+	        key: 'add',
+	        value: function add(_id, max_len) {
+	            var id = Number(_id);
+	            var el = this.dataTree.getElementById(id);
+	            if (!el) {
+	                throw new Error('\u042D\u043B\u0435\u043C\u0435\u043D\u0442 \u0441 id = ' + _id + ' \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D \u0438 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D');
+	            }
+	            var self = this;
+	            if (this.onlyOne) {
+	                this.replace(_id, max_len);
+	                return;
+	            }
+
+	            var has_already = this.elements_id.filter(function (el) {
+	                return self.dataTree.isChild(el, id);
+	            });
+
+	            if (has_already.length || this.elements_id.indexOf(Number(id)) != -1) {
+	                //TODO: do popup messages
+	                return;
+	            }
+
+	            var not_valid = this.elements_id.filter(function (el) {
+	                return self.dataTree.isChild(id, el);
+	            });
+
+	            not_valid.forEach(function (el) {
+	                self._removeById(el);
+	            });
+	            this._addElementToHtml(id, max_len);
+	        }
+	    }], [{
+	        key: 'getTemplate',
+	        value: function getTemplate(header, name, id) {
+	            return tmpl_selectedElement(header, name, id);
+	        }
+	    }, {
+	        key: 'getHeader',
+	        value: function getHeader(spec_chain, separator, max_len) {
+	            function toShortString(string, max_len) {
+	                return string.slice(0, max_len) + (string.length > max_len ? "..." : "");
+	            }
+
+	            separator = separator || ' / ';
+	            var str_chain = "";
+
+	            spec_chain.forEach(function (el) {
+	                str_chain = (max_len ? toShortString(el.name, max_len) : el.name) + (str_chain ? separator : "") + str_chain;
+	            });
+
+	            return str_chain;
+	        }
+	    }]);
+
+	    return SelectedContainer;
+	}(), (_applyDecoratedDescriptor(_class.prototype, 'remove', [_decorators2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'remove'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'add', [_decorators2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'add'), _class.prototype)), _class);
+	exports.default = SelectedContainer;
+
+/***/ },
+/* 11 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	var Node = function Node(data, tree) {
+	    _classCallCheck(this, Node);
+
+	    this.name = data.name;
+	    this.id = data.id;
+	    if (data.parent === null) {
+	        this.parent = "root";
+	        data.parent = { id: "root" };
+	        this.name = "";
+	    }
+	    if (data.parent.id && data.parent.id !== 'root') {
+	        var el = tree._getElementById(data.parent.id);
+	        this.parent = el.node || new Node(el, tree);
+	    }
+	    data.node = this;
+	    this.children = data.children.map(function (el_obj) {
+	        var el = tree._getElementById(el_obj.id);
+	        if (el.node) return el.node;
+	        el.node = new Node(el, tree);
+	        return el.node;
+	    });
+
+	    this.children = this.children || [];
+	};
+
+	var DataTree = function () {
+	    function DataTree(data) {
+	        _classCallCheck(this, DataTree);
+
+	        this.baseData = data;
+	        this._root = new Node(data[0], this);
+	    }
+
+	    /**
+	     * получить element в базовой структуре
+	     */
+
+
+	    _createClass(DataTree, [{
+	        key: "_getElementById",
+	        value: function _getElementById(id) {
+	            for (var i = 0; i < this.baseData.length; i++) {
+	                if (this.baseData[i].id == id) return this.baseData[i];
+	            }
+	        }
+
+	        /**
+	         * получить element в дереве
+	         */
+
+	    }, {
+	        key: "getElementById",
+	        value: function getElementById(id) {
+	            function searchInChildren(children) {
+	                for (var i = 0; i < children.length; i++) {
+	                    if (children[i].id == id) return children[i];
+	                    var res = searchInChildren(children[i].children);
+	                    if (res) return res;
+	                }
+	            }
+
+	            return searchInChildren(this._root.children);
+	        }
+
+	        /**
+	         * Является ли узел c el_id дочерним для parent_id
+	         * @param el_id
+	         * @param parent_id
+	         */
+
+	    }, {
+	        key: "isChild",
+	        value: function isChild(elId, parent_id) {
+	            function checkParent(el, parent) {
+	                if (el.parent == parent) return true;
+	                if (el.parent && el.parent != 'root') return checkParent(el.parent, parent);
+	                return false;
+	            }
+	            return checkParent(this.getElementById(elId), this.getElementById(parent_id));
+	        }
+	    }, {
+	        key: "hasChildren",
+	        value: function hasChildren(elId) {
+	            return this.getElementById(elId).children.length ? true : false;
+	        }
+
+	        /**
+	         * @param start_parent_id(number) - начиная с
+	         * @param attached(bool) - включая вложенные/дочерние
+	         * @param exclude_id - исключая узел c exclude_id и всеми его вложенными узлами
+	         * @returns [{name, id}, ...]
+	         */
+
+	    }, {
+	        key: "dataToList",
+	        value: function dataToList(start_parent_id, attached, exclude_id) {
+	            var data_list = [];
+
+	            function goInChildren(children) {
+	                for (var i = 0; i < children.length; i++) {
+	                    if (children[i].id == exclude_id) continue;
+	                    data_list.push({ name: children[i].name, id: children[i].id });
+	                    if (attached) goInChildren(children[i].children);
+	                }
+	            }
+	            var start = start_parent_id ? this.getElementById(start_parent_id) : this._root;
+	            goInChildren(start.children);
+	            return data_list;
+	        }
+
+	        /**
+	         *
+	         * @param id
+	         * @param incl(bool) - исключая сам элемент
+	         * @returns {Array} всех узлов/элементов от элемента с id до корня
+	         */
+
+	    }, {
+	        key: "getSpecChain",
+	        value: function getSpecChain(id) {
+	            var incl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+	            var chain = [];
+	            var el = this.getElementById(id);
+	            function getParent(el) {
+	                if (el.parent && el.parent != "root") {
+	                    chain.push(el.parent);
+	                    getParent(el.parent);
+	                }
+	            }
+	            getParent(el);
+	            if (incl) chain.unshift(el);
+	            return chain;
+	        }
+	    }]);
+
+	    return DataTree;
+	}();
+
+	exports.default = DataTree;
+
+/***/ },
+/* 12 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	var NoTreeData = function () {
+	    function NoTreeData(data) {
+	        _classCallCheck(this, NoTreeData);
+
+	        this.data = data;
+	        this.specChain = [];
+	    }
+
+	    _createClass(NoTreeData, [{
+	        key: "getElementById",
+	        value: function getElementById(id) {
+	            for (var i = 0; i < this.data.length; i++) {
+	                if (this.data[i].id == id) return this.data[i];
+	            }
+	        }
+	    }, {
+	        key: "getSpecChain",
+	        value: function getSpecChain(id, incl) {
+	            return this.specChain;
+	        }
+	    }, {
+	        key: "isChild",
+	        value: function isChild(el_id, parent_id) {
+	            return false;
+	        }
+	    }, {
+	        key: "hasChildren",
+	        value: function hasChildren() {
+	            return false;
+	        }
+	    }, {
+	        key: "dataToList",
+	        value: function dataToList() {
+	            return this.data;
+	        }
+	    }]);
+
+	    return NoTreeData;
+	}();
+
+	exports.default = NoTreeData;
+
+/***/ },
+/* 13 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.default = onBind;
+	function onBind(target, name, descriptor) {
+	    var method = descriptor.value;
+
+	    descriptor.value = function () {
+	        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+	            args[_key] = arguments[_key];
+	        }
+
+	        var binds = [];
+	        args = Array.from(args);
+	        // console.log("args -->", args.slice());
+	        var _iteratorNormalCompletion = true;
+	        var _didIteratorError = false;
+	        var _iteratorError = undefined;
+
+	        try {
+	            for (var _iterator = args.slice()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+	                var arg = _step.value;
+
+	                // console.log("onBind -->", typeof arg, "arg = ", arg);
+	                // console.log("arg.func -->", typeof arg.originalEvent);
+	                // typeof arg === 'object' && !(arg.originalEvent)
+	                if (arg && arg.bindFunc) {
+	                    binds.push(arg);
+	                    args.splice(args.indexOf(arg), 1);
+	                }
+	            }
+	        } catch (err) {
+	            _didIteratorError = true;
+	            _iteratorError = err;
+	        } finally {
+	            try {
+	                if (!_iteratorNormalCompletion && _iterator.return) {
+	                    _iterator.return();
+	                }
+	            } finally {
+	                if (_didIteratorError) {
+	                    throw _iteratorError;
+	                }
+	            }
+	        }
+
+	        method.apply(this, args);
+	        var _iteratorNormalCompletion2 = true;
+	        var _didIteratorError2 = false;
+	        var _iteratorError2 = undefined;
+
+	        try {
+	            for (var _iterator2 = binds[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+	                var bind = _step2.value;
+
+	                bind.func.bind(this)(args);
+	            }
+	        } catch (err) {
+	            _didIteratorError2 = true;
+	            _iteratorError2 = err;
+	        } finally {
+	            try {
+	                if (!_iteratorNormalCompletion2 && _iterator2.return) {
+	                    _iterator2.return();
+	                }
+	            } finally {
+	                if (_didIteratorError2) {
+	                    throw _iteratorError2;
+	                }
+	            }
+	        }
+
+	        return this;
+	    };
+	}
+
+	// export {onBind};
+
+/***/ },
+/* 14 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.default = undefined;
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _desc, _value, _class;
+
+	var _SelectedContainer2 = __webpack_require__(10);
+
+	var _SelectedContainer3 = _interopRequireDefault(_SelectedContainer2);
+
+	var _decorators = __webpack_require__(13);
+
+	var _decorators2 = _interopRequireDefault(_decorators);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+	function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
+	    var desc = {};
+	    Object['ke' + 'ys'](descriptor).forEach(function (key) {
+	        desc[key] = descriptor[key];
+	    });
+	    desc.enumerable = !!desc.enumerable;
+	    desc.configurable = !!desc.configurable;
+
+	    if ('value' in desc || desc.initializer) {
+	        desc.writable = true;
+	    }
+
+	    desc = decorators.slice().reverse().reduce(function (desc, decorator) {
+	        return decorator(target, property, desc) || desc;
+	    }, desc);
+
+	    if (context && desc.initializer !== void 0) {
+	        desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
+	        desc.initializer = undefined;
+	    }
+
+	    if (desc.initializer === void 0) {
+	        Object['define' + 'Property'](target, property, desc);
+	        desc = null;
+	    }
+
+	    return desc;
+	}
+
+	/**
+	 * Контэйнер - позволяющий принимать/отправлять новый объект для создания
+	 */
+	//TODO: попробовать реализовать как Mixin
+	var SelectedContainerCreate = (_class = function (_SelectedContainer) {
+	    _inherits(SelectedContainerCreate, _SelectedContainer);
+
+	    function SelectedContainerCreate() {
+	        _classCallCheck(this, SelectedContainerCreate);
+
+	        return _possibleConstructorReturn(this, (SelectedContainerCreate.__proto__ || Object.getPrototypeOf(SelectedContainerCreate)).apply(this, arguments));
+	    }
+
+	    _createClass(SelectedContainerCreate, [{
+	        key: 'add',
+	        value: function add(_id, max_len) {
+	            console.log("_id = ", _id);
+	            var self = this;
+	            if (_id.text) {
+	                this._removeById(this.elements_id[0]);
+	                this.elements_id = [0];
+	                this.$input_id = this.$self.find('input[type="hidden"].-id');
+	                this.$input_id.val();
+	                this.$input_name = this.$self.find('input[type="hidden"].-name');
+	                this.$input_name.val(_id.text);
+	                this.$self.append(_SelectedContainer3.default.getTemplate("", _id.text, 0));
+	                this.btn_remove = this.$self.find('.icon-remove');
+	                this.btn_remove.on("click", this.remove.bind(self));
+	                if (this.elements_id.length) this.$self.show();
+	                return;
+	            }
+	            _get(SelectedContainerCreate.prototype.__proto__ || Object.getPrototypeOf(SelectedContainerCreate.prototype), 'add', this).call(this, _id, max_len);
+	        }
+	    }]);
+
+	    return SelectedContainerCreate;
+	}(_SelectedContainer3.default), (_applyDecoratedDescriptor(_class.prototype, 'add', [_decorators2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'add'), _class.prototype)), _class);
+	exports.default = SelectedContainerCreate;
+
+/***/ },
+/* 15 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.default = undefined;
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _AbsBaseSelect2 = __webpack_require__(16);
+
+	var _NoTreeData = __webpack_require__(12);
+
+	var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+	var NoTreeSelect = function (_AbsBaseSelect) {
+	    _inherits(NoTreeSelect, _AbsBaseSelect);
+
+	    function NoTreeSelect($container, _ref) {
+	        var url = _ref.url,
+	            obj = _ref.obj,
+	            _ref$visible = _ref.visible,
+	            visible = _ref$visible === undefined ? true : _ref$visible,
+	            _ref$required = _ref.required,
+	            required = _ref$required === undefined ? false : _ref$required;
+
+	        _classCallCheck(this, NoTreeSelect);
+
+	        //TODO: сделать автоматическую передачу всех параметров родителю
+	        return _possibleConstructorReturn(this, (NoTreeSelect.__proto__ || Object.getPrototypeOf(NoTreeSelect)).call(this, $container, { url: url, obj: obj, visible: visible, required: required }));
+	    }
+
+	    _createClass(NoTreeSelect, [{
+	        key: '_buildComponents',
+	        value: function _buildComponents(data) {
+	            _get(NoTreeSelect.prototype.__proto__ || Object.getPrototypeOf(NoTreeSelect.prototype), '_buildComponents', this).call(this, data);
+	            this.dataTree = this.dataTree || new _NoTreeData2.default(data.results || data);
+	            this.$buttonAddOptions.hide();
+	            this._fillOptionsData();
+	            this._bindEvents();
+	        }
+	    }, {
+	        key: '_onclickOptionsElement',
+	        value: function _onclickOptionsElement(e) {
+	            var id = $(e.target).data("id");
+	            this.selectedEl.id = id;
+	            this.selectedEl.value = $(e.target).html();
+	            this.$searchInput.val($(e.target).html());
+
+	            this.$buttonAddOptions.show();
+	            this.$optionsBox.hide();
+
+	            this.clear();
+	            this.selectedContainer.add(id);
+	            e.preventDefault();
+	            return false;
+	        }
+	    }, {
+	        key: '_onButtonAddOptions',
+	        value: function _onButtonAddOptions(e) {
+	            //    pass
+	        }
+	    }]);
+
+	    return NoTreeSelect;
+	}(_AbsBaseSelect2.AbsBaseSelect);
+
+	exports.default = NoTreeSelect;
+
+/***/ },
+/* 16 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	//TEMPLATES `
+	var tmpl_selectBoxEditCont = function tmpl_selectBoxEditCont() {
+	    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+	        _ref$preloaderTemplat = _ref.preloaderTemplate,
+	        preloaderTemplate = _ref$preloaderTemplat === undefined ? "" : _ref$preloaderTemplat;
+
+	    return "\n            <div class=\"row\">\n            <div class=\"col-lg-3\">\n                \n                <div style=\"width: 100%; position: relative\">\n                    " + preloaderTemplate + "\n                    <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\">\n                    <button style=\"display: none\" class=\"button-add options\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n                </div>\n                </div>\n            <div class=\"col-lg-9\">\n                <span style=\"display: none\" class=\"editable-container\"></span>\n            </div>\n            </div>\n";
+	};
+
+	var tmpl_selectBox = function tmpl_selectBox() {
+	    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+	        _ref2$preloaderTempla = _ref2.preloaderTemplate,
+	        preloaderTemplate = _ref2$preloaderTempla === undefined ? "" : _ref2$preloaderTempla;
+
+	    return "        \n            " + preloaderTemplate + "\n            <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\" value=\"\">\n            <button style=\"display: none\" class=\"button-add options\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n";
+	};
+
+	var tmpl_elementResult = function tmpl_elementResult(el, id, header) {
+	    return "<li><label>\n        <input type=\"checkbox\" data-id=\"" + id + "\">" + el + "\n        <div class=\"header\">" + header + "</div>\n    </label></li>";
+	};
+
+	var tmpl_elementOption = function tmpl_elementOption(el) {
+	    return "<li data-id=\"" + el.id + "\">" + el.name + "</li>";
+	};
+
+	var tmpl_plug = function tmpl_plug(_ref3) {
+	    var header = _ref3.header,
+	        selectBox = _ref3.selectBox;
+	    return htmlTemplate({ header: header, selectBox: selectBox });
+	};
+
+	var tmpl_selectBoxOptions = function tmpl_selectBoxOptions() {
+	    return "\n    <div class=\"select-box-options\">\n        <div class=\"box-wrapper\">\n            <ul>\n            \n            </ul>\n        </div>\n    </div>\n";
+	};
+
+	var tmpl_selectBoxResults = function tmpl_selectBoxResults() {
+	    return "\n    <div class=\"select-box-results\">\n        <div class=\"box-wrapper\">\n            <div class=\"main-part\">\n                <ul>\n                </ul>\n            </div>\n            <div class=\"other-part\">\n                <span class=\"other-header\">\u0418\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439</span>\n                <ul>\n                </ul>\n            </div>\n        </div>\n        <div style=\"padding-top: 5px\">\n        <button class=\"button-add results\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n        </div>\n    </div>\n";
+	};
+
+	var htmlTemplate = function htmlTemplate(_ref4) {
+	    var header = _ref4.header,
+	        selectBox = _ref4.selectBox,
+	        _ref4$required = _ref4.required,
+	        required = _ref4$required === undefined ? false : _ref4$required,
+	        _ref4$id = _ref4.id,
+	        id = _ref4$id === undefined ? "" : _ref4$id,
+	        _ref4$classes = _ref4.classes,
+	        classes = _ref4$classes === undefined ? "" : _ref4$classes,
+	        _ref4$tmpl_selectBoxO = _ref4.tmpl_selectBoxOptions,
+	        tmpl_selectBoxOptions = _ref4$tmpl_selectBoxO === undefined ? function () {
+	        return "";
+	    } : _ref4$tmpl_selectBoxO,
+	        _ref4$tmpl_selectBoxR = _ref4.tmpl_selectBoxResults,
+	        tmpl_selectBoxResults = _ref4$tmpl_selectBoxR === undefined ? function () {
+	        return "";
+	    } : _ref4$tmpl_selectBoxR;
+	    return "\n<div class=\"select-box-container " + classes + "\" id=\"" + id + "\">\n    <div class=\"select-box-header\">\n        <div class=\"header\">" + header + "</div>\n         <i class=\"fa fa-question-circle-o\" aria-hidden=\"true\" title=\"bla-bla-bla...\"></i>\n         " + (required ? '<span class="required">Обязательно</span>' : '') + "\n    </div>\n    <div class=\"select-box-search\">\n        " + selectBox + "\n    </div>\n    \n    " + tmpl_selectBoxOptions() + "\n    " + tmpl_selectBoxResults() + "\n    <span style=\"clear: both\"></span>\n</div>\n";
+	};
+	var tmpl_light = function tmpl_light(el) {
+	    return "<span class=\"highlight\">" + el + "</span>";
+	};
+
+	var tmpl_preloader = function tmpl_preloader() {
+	    return "<div id=\"component-preloader\"><span class=\"spinner\"></span></div>";
+	};
+
+	var AbsBaseSelect = function () {
+	    function AbsBaseSelect($container, _ref5) {
+	        var url = _ref5.url,
+	            obj = _ref5.obj,
+	            _ref5$hasEditableCont = _ref5.hasEditableContainer,
+	            hasEditableContainer = _ref5$hasEditableCont === undefined ? false : _ref5$hasEditableCont,
+	            _ref5$visible = _ref5.visible,
+	            visible = _ref5$visible === undefined ? false : _ref5$visible,
+	            _ref5$required = _ref5.required,
+	            required = _ref5$required === undefined ? false : _ref5$required;
+
+	        _classCallCheck(this, AbsBaseSelect);
+
+	        if (new.target === AbsBaseSelect) {
+	            throw new TypeError("Cannot construct Abstract instances directly");
+	        }
+	        if (obj && url) {
+	            throw new URIError("Must be either the date or url");
+	        }
+
+	        var self = this;
+	        //TODO: проверка наличия id контейнера
+	        this.containerId = $container.attr("id");
+	        this.$container = $container;
+	        this.hasEditableContainer = hasEditableContainer;
+	        this.visible = visible;
+	        this.required = required;
+	        // Быстрая заглушка, до отображения данных
+	        if (visible) {
+	            var preloaderTemplate = tmpl_preloader();
+	            var selectBox = this.hasEditableContainer ? tmpl_selectBoxEditCont({ preloaderTemplate: preloaderTemplate }) : tmpl_selectBox({ preloaderTemplate: preloaderTemplate });
+	            var plugTemplate = tmpl_plug({ header: "Loading...", selectBox: selectBox });
+	            $container.html(plugTemplate);
+
+	            this.$preloader = $container.find('#component-preloader');
+	            this.$spinner = this.$preloader.find('.spinner');
+	        }
+	        if (url) {
+	            this.dataPromise = this.getData(url);
+	            //TODO: дописать нормальную обработку url
+	            this.type = url.split("/")[2];
+	        }
+	        var _dataPromise = void 0;
+	        if (url) {
+	            _dataPromise = this.dataPromise;
+	        } else {
+	            _dataPromise = obj.dataPromise;
+	        }
+	        // if (dataTree) this.dataTree = dataTree;
+	        _dataPromise.then(self._buildComponents.bind(self)).catch(self._onLoadDataError.bind(self));
+
+	        //  INIT EMPTY PROP
+	        this.selectedEl = { id: undefined, value: undefined };
+	        this.parentId = undefined;
+	    }
+
+	    _createClass(AbsBaseSelect, [{
+	        key: "getTemplate",
+	        value: function getTemplate(classes) {
+	            var selectBox = this.hasEditableContainer ? tmpl_selectBoxEditCont() : tmpl_selectBox();
+	            classes = classes ? classes.join(" ") : "";
+	            return htmlTemplate({
+	                header: "TestHeader", selectBox: selectBox, required: this.required, id: this.containerId, classes: classes,
+	                tmpl_selectBoxOptions: tmpl_selectBoxOptions, tmpl_selectBoxResults: tmpl_selectBoxResults
+	            });
+	        }
+	    }, {
+	        key: "getData",
+	        value: function getData(url) {
+	            var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+	            var self = this;
+	            return Promise.resolve($.ajax({
+	                url: url,
+	                dataType: 'json',
+	                data: data
+	            }));
+	        }
+	    }, {
+	        key: "hidePreloader",
+	        value: function hidePreloader() {
+	            // console.log("hide preloader ", this.$preloader);
+	            this.$spinner.fadeOut();
+	            return Promise.resolve(this.$preloader.delay(500).fadeOut(2000));
+	        }
+	    }, {
+	        key: "clear",
+	        value: function clear() {
+	            this.$searchInput.val("");
+	            this.$optionsBox.hide();
+	            this.$resultsBox.hide();
+	            this.$buttonAdd.hide();
+	            this.$buttonAddOptions.hide();
+	            this.selectedEl = { id: undefined, value: undefined };
+	            if (this.hasEditableContainer) {
+	                this.$editableContainer.html("");
+	                this.$editableContainer.hide();
+	            }
+	            this.$searchInput.removeClass("active");
+	        }
+	    }, {
+	        key: "hide",
+	        value: function hide() {
+	            this.$selectBox.hide();
+	        }
+	    }, {
+	        key: "show",
+	        value: function show() {
+	            this.$selectBox.show();
+	        }
+	    }, {
+	        key: "setHeader",
+	        value: function setHeader(header) {
+
+	            if (this.$header) {
+	                this.$header.html(header);
+	            } else {
+	                this.header = header;
+	            }
+	            // default hide
+	            // this.show();
+	        }
+	    }, {
+	        key: "setParent",
+	        value: function setParent(parentId) {
+	            this.parentId = parentId;
+	            this._fillOptionsData();
+	        }
+	    }, {
+	        key: "connectSelectedContainer",
+	        value: function connectSelectedContainer(selectedContainer) {
+	            this.selectedContainer = selectedContainer;
+	        }
+	    }, {
+	        key: "getIdsSelectedElements",
+	        value: function getIdsSelectedElements() {
+	            var allChecked = this.$resultsBox.find(":checked");
+	            return allChecked.map(function () {
+	                return $(this).data("id");
+	            });
+	        }
+	    }, {
+	        key: "updateEditableContainer",
+	        value: function updateEditableContainer(elId) {
+	            // Если нет контейнера для отображения ...
+	            if (this.$editableContainer.length) {
+	                var separator = ' / ';
+	                var chainHeader = AbsBaseSelect.getHeader(this.dataTree.getSpecChain(elId, true), { separator: separator });
+	                chainHeader = AbsBaseSelect.highlight(chainHeader, separator, true);
+	                var elTemplate = "<span class=\"\">" + chainHeader + "</span>";
+	                this.$editableContainer.html(elTemplate);
+	                this.$editableContainer.show();
+	                return;
+	            }
+	            //..., передаем отображение предыдущему selectBox
+	            if (this.prevSelectBox) this.prevSelectBox.updateEditableContainer(elId);
+	        }
+	    }, {
+	        key: "_buildComponents",
+	        value: function _buildComponents(data) {
+	            // AFTER PRELOAD
+	            // this.hidePreloader().then(() => console.log("END -)"));
+	            var classes = this.$container.attr('class');
+	            if (classes) classes = classes.split(/\s+/);
+	            var template = this.getTemplate(classes);
+	            this.$container.replaceWith(template);
+
+	            this.$selectBox = $("#" + this.containerId);
+	            this.$header = this.$selectBox.find('.select-box-header .header');
+	            this.$header.html(this.header);
+	            this.$resultsBox = this.$selectBox.find('.select-box-results');
+	            this.$optionsBox = this.$selectBox.find('.select-box-options');
+	            this.$searchInput = this.$selectBox.find('input.select-box-search');
+	            this.$buttonAdd = this.$selectBox.find('.button-add.results');
+	            this.$buttonAddOptions = this.$selectBox.find('.button-add.options');
+	            this.$editableContainer = this.$selectBox.find('.editable-container');
+	            this.$resultsBox.hide();
+	            this.$optionsBox.hide();
+	            this.$buttonAddOptions.hide();
+	            //TODO: реализовать нормальное show/hide + visible
+	            if (!this.visible) this.hide();
+	            //    TODO: сделать проверку на наличие всех нужных элементов и их корректый jq select
+	        }
+	    }, {
+	        key: "_fillOptionsData",
+	        value: function _fillOptionsData() {
+	            var self = this;
+	            var dataList = this.dataTree.dataToList(this.parentId);
+	            var $container = this.$optionsBox.find('ul');
+	            $container.html("");
+	            var _iteratorNormalCompletion = true;
+	            var _didIteratorError = false;
+	            var _iteratorError = undefined;
+
+	            try {
+	                for (var _iterator = dataList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+	                    var el = _step.value;
+
+	                    $container.append($(tmpl_elementOption(el)));
+	                }
+	            } catch (err) {
+	                _didIteratorError = true;
+	                _iteratorError = err;
+	            } finally {
+	                try {
+	                    if (!_iteratorNormalCompletion && _iterator.return) {
+	                        _iterator.return();
+	                    }
+	                } finally {
+	                    if (_didIteratorError) {
+	                        throw _iteratorError;
+	                    }
+	                }
+	            }
+
+	            this.$selectBox.find('li').on("click", this._onclickOptionsElement.bind(self));
+	        }
+	    }, {
+	        key: "_search",
+	        value: function _search(_ref6) {
+	            var searchText = _ref6.searchText,
+	                _ref6$parentCategoryI = _ref6.parentCategoryId,
+	                parentCategoryId = _ref6$parentCategoryI === undefined ? null : _ref6$parentCategoryI,
+	                _ref6$attached = _ref6.attached,
+	                attached = _ref6$attached === undefined ? true : _ref6$attached,
+	                _ref6$excludeCategory = _ref6.excludeCategoryId,
+	                excludeCategoryId = _ref6$excludeCategory === undefined ? null : _ref6$excludeCategory;
+
+	            // :FORMAT spec_list [{name, id}, ...]
+	            var specList = this.dataTree.dataToList(parentCategoryId, attached, excludeCategoryId);
+	            return specList.filter(function (el) {
+	                return el.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
+	            });
+	        }
+	    }, {
+	        key: "_fillContainer",
+	        value: function _fillContainer($container, template, _ref7) {
+	            var _ref7$searchText = _ref7.searchText,
+	                searchText = _ref7$searchText === undefined ? "" : _ref7$searchText,
+	                _ref7$parentCategoryI = _ref7.parentCategoryId,
+	                parentCategoryId = _ref7$parentCategoryI === undefined ? null : _ref7$parentCategoryI,
+	                _ref7$attached = _ref7.attached,
+	                attached = _ref7$attached === undefined ? true : _ref7$attached,
+	                _ref7$excludeCategory = _ref7.excludeCategoryId,
+	                excludeCategoryId = _ref7$excludeCategory === undefined ? null : _ref7$excludeCategory;
+
+	            $container.html("");
+	            $('.other-part').show();
+	            var searchRes = this._search({ searchText: searchText, parentCategoryId: parentCategoryId, attached: attached, excludeCategoryId: excludeCategoryId });
+	            if (!searchRes.length) {
+	                if ($container.closest('div').hasClass('main-part')) {
+	                    $container.append('<li>Ничего не найдено</li>');
+	                    this.$resultsBox.find('.button-add.results').hide();
+	                } else {
+	                    $('.other-part').hide();
+	                }
+	                return;
+	            }
+	            this.$resultsBox.find('.button-add.results').show();
+	            var _iteratorNormalCompletion2 = true;
+	            var _didIteratorError2 = false;
+	            var _iteratorError2 = undefined;
+
+	            try {
+	                for (var _iterator2 = searchRes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+	                    var el = _step2.value;
+
+	                    var header = AbsBaseSelect.getHeader(this.dataTree.getSpecChain(el.id), {});
+	                    $container.append(template(AbsBaseSelect.highlight(el.name, searchText), el.id, header));
+	                }
+	            } catch (err) {
+	                _didIteratorError2 = true;
+	                _iteratorError2 = err;
+	            } finally {
+	                try {
+	                    if (!_iteratorNormalCompletion2 && _iterator2.return) {
+	                        _iterator2.return();
+	                    }
+	                } finally {
+	                    if (_didIteratorError2) {
+	                        throw _iteratorError2;
+	                    }
+	                }
+	            }
+	        }
+	    }, {
+	        key: "_fillResultsData",
+	        value: function _fillResultsData(searchText) {
+	            var self = this;
+	            // FILL RESULTS
+	            //    MAIN PART
+	            var $container = this.$resultsBox.find('.main-part ul');
+	            this._fillContainer($container, tmpl_elementResult, { searchText: searchText, parentCategoryId: self.parentId });
+
+	            //    OTHER PART
+	            // Если нет parentId, не нужно искать в других категориях
+	            if (!this.parentId) {
+	                $('.other-part').hide();
+	            } else {
+	                $container = this.$resultsBox.find('.other-part ul');
+	                this._fillContainer($container, tmpl_elementResult, { searchText: searchText, excludeCategoryId: self.parentId });
+	            }
+	            this.$resultsBox.find('div.header').hide();
+	            this.$resultsBox.find('li').on("mouseover", function (e) {
+	                $(e.target).children('.header').show(300);
+	                e.preventDefault();
+	            });
+
+	            this.$resultsBox.find('li').on("mouseout", function (event) {
+	                var e = event.toElement || event.relatedTarget;
+	                if (e.parentNode == this || e == this) {
+	                    return;
+	                }
+	                $(this).find('.header').hide();
+	            });
+	        }
+	    }, {
+	        key: "_onclickOptionsElement",
+	        value: function _onclickOptionsElement(e) {
+	            this.selectedEl.id = $(e.target).data("id");
+	            this.selectedEl.value = $(e.target).html();
+	            this.$searchInput.val($(e.target).html());
+	            this.updateEditableContainer($(e.target).data("id"));
+	            this.$buttonAddOptions.show();
+	            this.$optionsBox.hide();
+	        }
+	    }, {
+	        key: "_onButtonAddOptions",
+	        value: function _onButtonAddOptions(e) {
+	            this._addToSelectedContainer(this.selectedEl.id);
+	            this.clear();
+	            e.preventDefault();
+	            return false;
+	        }
+	    }, {
+	        key: "_onButtonAdd",
+	        value: function _onButtonAdd(e) {
+	            var self = this;
+
+	            this.getIdsSelectedElements().each(function () {
+	                self._addToSelectedContainer(this);
+	            });
+	            this.clear();
+	            e.preventDefault();
+	            return false;
+	        }
+	    }, {
+	        key: "_onLoadDataError",
+	        value: function _onLoadDataError(error) {
+	            console.log("Error loading data -->", error);
+	        }
+	    }, {
+	        key: "_addToSelectedContainer",
+	        value: function _addToSelectedContainer(id) {
+	            this.selectedContainer.add(id);
+	        }
+	    }, {
+	        key: "_onInput_searchInput",
+	        value: function _onInput_searchInput(e) {
+	            this._fillResultsData(this.$searchInput.val());
+	            this.$resultsBox.show();
+	            this.$optionsBox.hide();
+	        }
+	    }, {
+	        key: "_onClick_searchInput",
+	        value: function _onClick_searchInput(e) {
+	            this.$optionsBox.show();
+	            this.$resultsBox.hide();
+	            this.$searchInput.val("");
+	        }
+	    }, {
+	        key: "_bindEvents",
+	        value: function _bindEvents() {
+	            var self = this;
+	            $(document).click(function (event) {
+	                if ($(event.target).closest("#" + self.containerId).length) {
+	                    return;
+	                }
+	                self._looseFocus();
+	            });
+	            // RESULTS BOX
+	            this.$searchInput.on("input", this._onInput_searchInput.bind(self));
+	            // OPTIONS BOX
+	            this.$searchInput.on("click", this._onClick_searchInput.bind(self));
+
+	            this.$buttonAdd.on("click", this._onButtonAdd.bind(self));
+
+	            this.$buttonAddOptions.on("click", this._onButtonAddOptions.bind(self));
+	        }
+	    }, {
+	        key: "_looseFocus",
+	        value: function _looseFocus() {
+	            this.$resultsBox.hide();
+	            this.$optionsBox.hide();
+	            if (!this.selectedEl.id) {
+	                this.$searchInput.val("");
+	            } else {
+	                this.$searchInput.val(this.selectedEl.value);
+	            }
+	        }
+	    }], [{
+	        key: "getHeader",
+	        value: function getHeader(catChain, _ref8) {
+	            var _ref8$separator = _ref8.separator,
+	                separator = _ref8$separator === undefined ? " / " : _ref8$separator,
+	                _ref8$maxLen = _ref8.maxLen,
+	                maxLen = _ref8$maxLen === undefined ? 60 : _ref8$maxLen;
+
+	            function toShortString(string, maxLen) {
+	                return string.slice(0, maxLen) + (string.length > maxLen ? "..." : "");
+	            }
+
+	            var strChain = "";
+
+	            catChain.forEach(function (el) {
+	                strChain = (maxLen ? toShortString(el.name, maxLen) : el.name) + (strChain ? separator : "") + strChain;
+	            });
+
+	            return strChain;
+	        }
+	    }, {
+	        key: "highlight",
+	        value: function highlight(string, sub_string) {
+	            var lastIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+	            var index = lastIndex ? string.toLowerCase().lastIndexOf(sub_string.toLowerCase()) : string.toLowerCase().indexOf(sub_string.toLowerCase());
+	            if (index === -1) return string;
+	            var before = void 0,
+	                select = void 0,
+	                after = void 0;
+	            if (lastIndex) {
+	                var _ref9 = [string.slice(0, index), string.slice(index, string.length), ""];
+	                before = _ref9[0];
+	                select = _ref9[1];
+	                after = _ref9[2];
+	            } else {
+	                var _ref10 = [string.slice(0, index), string.slice(index, index + sub_string.length), string.slice(index + sub_string.length)];
+	                before = _ref10[0];
+	                select = _ref10[1];
+	                after = _ref10[2];
+	            }
+
+	            return "" + before + tmpl_light(select) + after;
+	        }
+	    }]);
+
+	    return AbsBaseSelect;
+	}();
+
+	exports.default = AbsBaseSelect;
+	exports.htmlTemplate = htmlTemplate;
+	exports.tmpl_plug = tmpl_plug;
+	exports.tmpl_elementOption = tmpl_elementOption;
+	exports.tmpl_preloader = tmpl_preloader;
+	exports.tmpl_light = tmpl_light;
+	exports.tmpl_elementResult = tmpl_elementResult;
+	exports.tmpl_selectBox = tmpl_selectBox;
+	exports.tmpl_selectBoxEditCont = tmpl_selectBoxEditCont;
+	exports.tmpl_selectBoxResults = tmpl_selectBoxResults;
+	exports.tmpl_selectBoxOptions = tmpl_selectBoxOptions;
+	exports.AbsBaseSelect = AbsBaseSelect;
+
+/***/ },
+/* 17 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.default = undefined;
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _AbsBaseSelect2 = __webpack_require__(16);
+
+	var _DataTree = __webpack_require__(11);
+
+	var _DataTree2 = _interopRequireDefault(_DataTree);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+	var TreeSelect = function (_AbsBaseSelect) {
+	    _inherits(TreeSelect, _AbsBaseSelect);
+
+	    function TreeSelect() {
+	        _classCallCheck(this, TreeSelect);
+
+	        return _possibleConstructorReturn(this, (TreeSelect.__proto__ || Object.getPrototypeOf(TreeSelect)).apply(this, arguments));
+	    }
+
+	    _createClass(TreeSelect, [{
+	        key: 'setNearbySelectBox',
+	        value: function setNearbySelectBox(next, prev) {
+	            this.nextSelectBox = next;
+	            this.prevSelectBox = prev;
+	        }
+	    }, {
+	        key: 'clearAllNext',
+	        value: function clearAllNext() {
+	            this.clear();
+	            if (this.nextSelectBox) {
+	                this.nextSelectBox.hide();
+	                this.nextSelectBox.clearAllNext();
+	            }
+	        }
+	    }, {
+	        key: 'clearAllPrev',
+	        value: function clearAllPrev() {
+	            this.clear();
+	            if (this.prevSelectBox) {
+	                this.clear();
+	                this.hide();
+	                this.prevSelectBox.clearAllPrev();
+	            }
+	        }
+	    }, {
+	        key: '_buildComponents',
+	        value: function _buildComponents(data) {
+	            _get(TreeSelect.prototype.__proto__ || Object.getPrototypeOf(TreeSelect.prototype), '_buildComponents', this).call(this, data);
+	            //TODO: Изменять свойство visible при show/hide
+	            if (!this.visible) this.hide();
+	            if (this.hasEditableContainer) this.$editableContainer.hide();
+	            this.dataTree = this.dataTree || new _DataTree2.default(data.results);
+	            this._fillOptionsData();
+	            this._bindEvents();
+	        }
+	    }, {
+	        key: '_onclickOptionsElement',
+	        value: function _onclickOptionsElement(e) {
+	            this.clearAllNext();
+	            _get(TreeSelect.prototype.__proto__ || Object.getPrototypeOf(TreeSelect.prototype), '_onclickOptionsElement', this).call(this, e);
+	            if (this.nextSelectBox && this.dataTree.hasChildren(this.selectedEl.id)) {
+	                this.nextSelectBox.setParent(this.selectedEl.id);
+	                this.nextSelectBox.setHeader(this.selectedEl.value);
+	                this.nextSelectBox.show();
+	            }
+	            if (this.prevSelectBox) {
+	                this.prevSelectBox.$buttonAddOptions.hide();
+	                this.prevSelectBox.$searchInput.removeClass("active");
+	            }
+	            this.$searchInput.addClass('active');
+	        }
+	    }, {
+	        key: '_onButtonAddOptions',
+	        value: function _onButtonAddOptions(e) {
+	            // this._addToSelectedContainer(this.selectedEl.id);
+	            // this.clear();
+	            // e.preventDefault();
+	            // return false;
+	            _get(TreeSelect.prototype.__proto__ || Object.getPrototypeOf(TreeSelect.prototype), '_onButtonAddOptions', this).call(this, e);
+	            this.clearAllNext();
+	            this.clearAllPrev();
+	        }
+	    }, {
+	        key: '_onButtonAdd',
+	        value: function _onButtonAdd(e) {
+	            _get(TreeSelect.prototype.__proto__ || Object.getPrototypeOf(TreeSelect.prototype), '_onButtonAdd', this).call(this, e);
+	            this.clearAllNext();
+	            this.clearAllPrev();
+	        }
+	    }, {
+	        key: '_addToSelectedContainer',
+	        value: function _addToSelectedContainer(id) {
+	            if (this.selectedContainer) {
+	                this.selectedContainer.add(id);
+	                return;
+	            }
+
+	            this.prevSelectBox._addToSelectedContainer(id);
+	        }
+	    }]);
+
+	    return TreeSelect;
+	}(_AbsBaseSelect2.AbsBaseSelect);
+
+	exports.default = TreeSelect;
+
+/***/ },
+/* 18 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.default = undefined;
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	var _AbsBaseSelect = __webpack_require__(16);
+
+	var _TreeSelect2 = __webpack_require__(17);
+
+	var _TreeSelect3 = _interopRequireDefault(_TreeSelect2);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+	var tmpl_selectBoxResults = function tmpl_selectBoxResults() {
+	    return '\n    <div class="select-box-results">\n        <div class="box-wrapper">\n            <div class="main-part">\n                <ul>\n                </ul>\n            </div>\n        </div>\n    </div>\n';
+	};
+
+	var tmpl_elementResult = function tmpl_elementResult(el, id, header) {
+	    return '<li data-id="' + id + '">\n        ' + el + '\n    </li>';
+	};
+	/**
+	 * Поиск только в своей категории, отсутствует множественный выбор
+	 */
+
+	var SingleTreeSelect = function (_TreeSelect) {
+	    _inherits(SingleTreeSelect, _TreeSelect);
+
+	    function SingleTreeSelect() {
+	        _classCallCheck(this, SingleTreeSelect);
+
+	        return _possibleConstructorReturn(this, (SingleTreeSelect.__proto__ || Object.getPrototypeOf(SingleTreeSelect)).apply(this, arguments));
+	    }
+
+	    _createClass(SingleTreeSelect, [{
+	        key: 'getTemplate',
+	        value: function getTemplate(classes) {
+	            var selectBox = this.hasEditableContainer ? (0, _AbsBaseSelect.tmpl_selectBoxEditCont)() : (0, _AbsBaseSelect.tmpl_selectBox)();
+	            classes = classes ? classes.join(" ") : "";
+	            return (0, _AbsBaseSelect.htmlTemplate)({
+	                header: "TestHeader", selectBox: selectBox, id: this.containerId, classes: classes,
+	                tmpl_selectBoxOptions: _AbsBaseSelect.tmpl_selectBoxOptions, tmpl_selectBoxResults: tmpl_selectBoxResults
+	            });
+	        }
+	    }, {
+	        key: '_fillResultsData',
+	        value: function _fillResultsData(searchText) {
+	            var self = this;
+	            // FILL RESULTS
+	            //    MAIN PART
+	            var $container = this.$resultsBox.find('.main-part ul');
+	            this._fillContainer($container, tmpl_elementResult, { searchText: searchText, parentCategoryId: self.parentId, attached: false });
+
+	            this.$resultsBox.find('li').on("click", function (e) {
+	                var id = $(e.target).data("id");
+	                self.selectedEl.id = id;
+	                self.selectedEl.value = self.dataTree.getElementById(id).name;
+	                self.$searchInput.val(self.selectedEl.value);
+	                self.updateEditableContainer(id);
+	                if (self.$buttonAddOptions) self.$buttonAddOptions.show();
+	                self.$resultsBox.hide();
+
+	                //TODO: duplicate code
+	                if (self.nextSelectBox && self.dataTree.hasChildren(self.selectedEl.id)) {
+	                    self.nextSelectBox.setParent(self.selectedEl.id);
+	                    self.nextSelectBox.setHeader(self.selectedEl.value);
+	                    self.nextSelectBox.show();
+	                }
+	                if (self.prevSelectBox) {
+	                    self.prevSelectBox.$buttonAddOptions.hide();
+	                    self.prevSelectBox.$searchInput.removeClass("active");
+	                }
+	                self.$searchInput.addClass('active');
+	            });
+	        }
+	    }]);
+
+	    return SingleTreeSelect;
+	}(_TreeSelect3.default);
+
+	exports.default = SingleTreeSelect;
+
+/***/ },
+/* 19 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.default = undefined;
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _AbsBaseSelect2 = __webpack_require__(16);
+
+	var _NoTreeData = __webpack_require__(12);
+
+	var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+	var htmlTemplate = function htmlTemplate(_ref) {
+	    var header = _ref.header,
+	        selectBox = _ref.selectBox,
+	        _ref$id = _ref.id,
+	        id = _ref$id === undefined ? "" : _ref$id,
+	        _ref$classes = _ref.classes,
+	        classes = _ref$classes === undefined ? "" : _ref$classes,
+	        _ref$tmpl_selectBoxOp = _ref.tmpl_selectBoxOptions,
+	        tmpl_selectBoxOptions = _ref$tmpl_selectBoxOp === undefined ? function () {
+	        return "";
+	    } : _ref$tmpl_selectBoxOp,
+	        _ref$tmpl_selectBoxRe = _ref.tmpl_selectBoxResults,
+	        tmpl_selectBoxResults = _ref$tmpl_selectBoxRe === undefined ? function () {
+	        return "";
+	    } : _ref$tmpl_selectBoxRe;
+	    return '\n<div class="select-box-container ' + classes + '" id="' + id + '">\n    <div class="select-box-search">\n        ' + selectBox + '\n    </div>\n\n    ' + tmpl_selectBoxOptions() + '\n    ' + tmpl_selectBoxResults() + '\n    <span style="clear: both"></span>\n</div>\n';
+	};
+
+	var tmpl_selectBoxResults = function tmpl_selectBoxResults() {
+	    return '\n    <div style="width: 100%; max-width: 95%" class="select-box-results">\n        <button class="button-add create">\u0421\u041E\u0417\u0414\u0410\u0422\u042C</button>\n    </div>\n';
+	};
+
+	// const tmpl_elementResult = (el, id, header) =>
+	//     `<li data-id="${id}">
+	//         ${el}
+	//     </li>`;
+
+	var SelectOrCreate = function (_AbsBaseSelect) {
+	    _inherits(SelectOrCreate, _AbsBaseSelect);
+
+	    function SelectOrCreate() {
+	        _classCallCheck(this, SelectOrCreate);
+
+	        return _possibleConstructorReturn(this, (SelectOrCreate.__proto__ || Object.getPrototypeOf(SelectOrCreate)).apply(this, arguments));
+	    }
+
+	    _createClass(SelectOrCreate, [{
+	        key: 'getTemplate',
+	        value: function getTemplate(classes) {
+	            var selectBox = this.hasEditableContainer ? (0, _AbsBaseSelect2.tmpl_selectBoxEditCont)() : (0, _AbsBaseSelect2.tmpl_selectBox)();
+	            classes = classes ? classes.join(" ") : "";
+	            return htmlTemplate({
+	                header: "TestHeader", selectBox: selectBox, id: this.containerId, classes: classes,
+	                tmpl_selectBoxOptions: _AbsBaseSelect2.tmpl_selectBoxOptions, tmpl_selectBoxResults: tmpl_selectBoxResults
+	            });
+	        }
+	    }, {
+	        key: 'setLinkBoxes',
+	        value: function setLinkBoxes() {
+	            var boxes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+	            this.boxes = boxes;
+	        }
+	    }, {
+	        key: '_buildComponents',
+	        value: function _buildComponents(data) {
+	            _get(SelectOrCreate.prototype.__proto__ || Object.getPrototypeOf(SelectOrCreate.prototype), '_buildComponents', this).call(this, data);
+	            var self = this;
+	            //TODO: Изменять свойство visible при show/hide
+	            if (!this.visible) this.hide();
+	            if (this.hasEditableContainer) this.$editableContainer.hide();
+	            this.dataTree = this.dataTree || new _NoTreeData2.default(data);
+	            this.$buttonCreate = this.$resultsBox.find('.create');
+	            // console.log("$buttonCreate = ", $buttonCreate);
+	            this.$buttonCreate.on("click", function () {
+	                return console.log('Button Create');
+	            });
+	            this.$buttonCreate.on("click", this._onButtonCreate.bind(self));
+	            this._fillOptionsData();
+	            this._bindEvents();
+	        }
+	    }, {
+	        key: 'getData',
+	        value: function getData(url) {
+	            var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+	            return Promise.resolve($.ajax({
+	                url: url,
+	                dataType: 'json',
+	                data: data
+	            }));
+	        }
+	    }, {
+	        key: '_onLoadDataError',
+	        value: function _onLoadDataError(error) {
+	            console.log("Error loading data -->", error);
+	        }
+	    }, {
+	        key: '_fillBoxes',
+	        value: function _fillBoxes() {
+	            var _this2 = this;
+
+	            var self = this;
+	            var id = this.selectedEl.id;
+	            this.getData('/api/realties?id=' + id).then(function (_data) {
+	                var data = _data.results[0] || _data[0];
+	                // this._addToSelectedContainer(this.selectedEl.id);
+	                // console.log("res data = ", data);
+	                var _iteratorNormalCompletion = true;
+	                var _didIteratorError = false;
+	                var _iteratorError = undefined;
+
+	                try {
+	                    for (var _iterator = _this2.boxes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+	                        var box = _step.value;
+
+	                        box.selectedContainer.removeAll();
+	                        //TODO: Костыль!
+	                        if (box.type == 'building_classifications' && data['building_classification']) {
+	                            // console.log("building_classification = ",data['building_classification']);
+	                            box._addToSelectedContainer(data['building_classification'].id);
+	                        } else if (box.type == 'locations_flat' && data['location']) {
+	                            // console.log("location = ",data['location']);
+	                            box._addToSelectedContainer(data['location'].id);
+	                        } else if (box.type == 'construction_type' && data['construction_type']) {
+	                            // console.log("construction_type = ",data['construction_type']);
+	                            box._addToSelectedContainer(data['construction_type'].id);
+	                        } else {
+	                            console.log("Нет совпадений для ", box.type);
+	                        }
+	                    }
+	                } catch (err) {
+	                    _didIteratorError = true;
+	                    _iteratorError = err;
+	                } finally {
+	                    try {
+	                        if (!_iteratorNormalCompletion && _iterator.return) {
+	                            _iterator.return();
+	                        }
+	                    } finally {
+	                        if (_didIteratorError) {
+	                            throw _iteratorError;
+	                        }
+	                    }
+	                }
+	            }).catch(this._onLoadDataError.bind(self));
+	        }
+	    }, {
+	        key: '_onButtonAddOptions',
+	        value: function _onButtonAddOptions(e) {
+	            this._fillBoxes();
+	            _get(SelectOrCreate.prototype.__proto__ || Object.getPrototypeOf(SelectOrCreate.prototype), '_onButtonAddOptions', this).call(this, e);
+	        }
+	    }, {
+	        key: '_onButtonCreate',
+	        value: function _onButtonCreate(e) {
+	            this.selectedContainer.add({ text: this.$searchInput.val() });
+	            if (this.boxes) {
+	                var _iteratorNormalCompletion2 = true;
+	                var _didIteratorError2 = false;
+	                var _iteratorError2 = undefined;
+
+	                try {
+	                    for (var _iterator2 = this.boxes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+	                        var box = _step2.value;
+
+	                        console.log('box clear');
+	                        box.selectedContainer.removeAll();
+	                    }
+	                } catch (err) {
+	                    _didIteratorError2 = true;
+	                    _iteratorError2 = err;
+	                } finally {
+	                    try {
+	                        if (!_iteratorNormalCompletion2 && _iterator2.return) {
+	                            _iterator2.return();
+	                        }
+	                    } finally {
+	                        if (_didIteratorError2) {
+	                            throw _iteratorError2;
+	                        }
+	                    }
+	                }
+	            }
+	            e.preventDefault();
+	            this.$buttonCreate.hide();
+	            this.$searchInput.val("");
+	        }
+	    }, {
+	        key: '_onInput_searchInput',
+	        value: function _onInput_searchInput(e) {
+	            // this._fillResultsData(self .$searchInput.val());
+	            this.$buttonAddOptions.hide();
+	            this.$buttonCreate.show();
+	            // console.log("on input");
+	            this.$resultsBox.show();
+	            this.$optionsBox.hide();
+	        }
+	    }, {
+	        key: '_onClick_searchInput',
+	        value: function _onClick_searchInput(e) {
+	            this.$optionsBox.show();
+	            this.$resultsBox.hide();
+	            this.$searchInput.val("");
+	        }
+	    }]);
+
+	    return SelectOrCreate;
+	}(_AbsBaseSelect2.AbsBaseSelect);
+
+	exports.default = SelectOrCreate;
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/assets/js/build/init_customer_project_create.js b/assets/js/build/init_customer_project_create.js
index 640963b..543551c 100644
--- a/assets/js/build/init_customer_project_create.js
+++ b/assets/js/build/init_customer_project_create.js
@@ -46,27 +46,27 @@
 
 	'use strict';
 
-	var _SelectedContainer = __webpack_require__(7);
+	var _SelectedContainer = __webpack_require__(10);
 
 	var _SelectedContainer2 = _interopRequireDefault(_SelectedContainer);
 
-	var _SelectedContainerCreate = __webpack_require__(11);
+	var _SelectedContainerCreate = __webpack_require__(14);
 
 	var _SelectedContainerCreate2 = _interopRequireDefault(_SelectedContainerCreate);
 
-	var _NoTreeSelect = __webpack_require__(12);
+	var _NoTreeSelect = __webpack_require__(15);
 
 	var _NoTreeSelect2 = _interopRequireDefault(_NoTreeSelect);
 
-	var _TreeSelect = __webpack_require__(14);
+	var _TreeSelect = __webpack_require__(17);
 
 	var _TreeSelect2 = _interopRequireDefault(_TreeSelect);
 
-	var _SingleTreeSelect = __webpack_require__(15);
+	var _SingleTreeSelect = __webpack_require__(18);
 
 	var _SingleTreeSelect2 = _interopRequireDefault(_SingleTreeSelect);
 
-	var _SelectOrCreate = __webpack_require__(16);
+	var _SelectOrCreate = __webpack_require__(19);
 
 	var _SelectOrCreate2 = _interopRequireDefault(_SelectOrCreate);
 
@@ -174,19 +174,15 @@
 	            if (!sb_realty_top.dataTree.data.length) sb_realty_top.hide();
 	        });
 	        select_realty.on("add", function (args) {
-	            // console.log("add args = ", args);
-	            console.log('on add');
 	            //TODO: Костыли!!!
 	            $('#checkbox-sb-realty').prop("checked", true);
 	            sb_realty.show();
 	            var id = args[0];
 	            if (id.text) return;
-	            console.log("id = ", id);
 	            var el = sb_realty.dataTree.getElementById(id);
 	            sb_realty_top.$searchInput.val(el.name);
 	            sb_realty_top.selectedEl.id = id;
 	            sb_realty_top.selectedEl.value = el.name;
-	            // sb_realty_top.show();
 	            sb_realty.selectedEl.id = id;
 	            sb_realty._fillBoxes();
 	        });
@@ -212,7 +208,10 @@
 /* 4 */,
 /* 5 */,
 /* 6 */,
-/* 7 */
+/* 7 */,
+/* 8 */,
+/* 9 */,
+/* 10 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -227,15 +226,15 @@
 	var _desc, _value, _class; // `
 
 
-	var _DataTree = __webpack_require__(8);
+	var _DataTree = __webpack_require__(11);
 
 	var _DataTree2 = _interopRequireDefault(_DataTree);
 
-	var _NoTreeData = __webpack_require__(9);
+	var _NoTreeData = __webpack_require__(12);
 
 	var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
 
-	var _decorators = __webpack_require__(10);
+	var _decorators = __webpack_require__(13);
 
 	var _decorators2 = _interopRequireDefault(_decorators);
 
@@ -466,7 +465,7 @@
 	exports.default = SelectedContainer;
 
 /***/ },
-/* 8 */
+/* 11 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -621,7 +620,7 @@
 	exports.default = DataTree;
 
 /***/ },
-/* 9 */
+/* 12 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -677,7 +676,7 @@
 	exports.default = NoTreeData;
 
 /***/ },
-/* 10 */
+/* 13 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -761,7 +760,7 @@
 	// export {onBind};
 
 /***/ },
-/* 11 */
+/* 14 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -777,11 +776,11 @@
 
 	var _desc, _value, _class;
 
-	var _SelectedContainer2 = __webpack_require__(7);
+	var _SelectedContainer2 = __webpack_require__(10);
 
 	var _SelectedContainer3 = _interopRequireDefault(_SelectedContainer2);
 
-	var _decorators = __webpack_require__(10);
+	var _decorators = __webpack_require__(13);
 
 	var _decorators2 = _interopRequireDefault(_decorators);
 
@@ -862,7 +861,7 @@
 	exports.default = SelectedContainerCreate;
 
 /***/ },
-/* 12 */
+/* 15 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -876,9 +875,9 @@
 
 	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
 
-	var _AbsBaseSelect2 = __webpack_require__(13);
+	var _AbsBaseSelect2 = __webpack_require__(16);
 
-	var _NoTreeData = __webpack_require__(9);
+	var _NoTreeData = __webpack_require__(12);
 
 	var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
 
@@ -945,7 +944,7 @@
 	exports.default = NoTreeSelect;
 
 /***/ },
-/* 13 */
+/* 16 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -1487,7 +1486,7 @@
 	exports.AbsBaseSelect = AbsBaseSelect;
 
 /***/ },
-/* 14 */
+/* 17 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -1501,9 +1500,9 @@
 
 	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
 
-	var _AbsBaseSelect2 = __webpack_require__(13);
+	var _AbsBaseSelect2 = __webpack_require__(16);
 
-	var _DataTree = __webpack_require__(8);
+	var _DataTree = __webpack_require__(11);
 
 	var _DataTree2 = _interopRequireDefault(_DataTree);
 
@@ -1612,7 +1611,7 @@
 	exports.default = TreeSelect;
 
 /***/ },
-/* 15 */
+/* 18 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -1624,9 +1623,9 @@
 
 	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-	var _AbsBaseSelect = __webpack_require__(13);
+	var _AbsBaseSelect = __webpack_require__(16);
 
-	var _TreeSelect2 = __webpack_require__(14);
+	var _TreeSelect2 = __webpack_require__(17);
 
 	var _TreeSelect3 = _interopRequireDefault(_TreeSelect2);
 
@@ -1707,7 +1706,7 @@
 	exports.default = SingleTreeSelect;
 
 /***/ },
-/* 16 */
+/* 19 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -1721,9 +1720,9 @@
 
 	var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
 
-	var _AbsBaseSelect2 = __webpack_require__(13);
+	var _AbsBaseSelect2 = __webpack_require__(16);
 
-	var _NoTreeData = __webpack_require__(9);
+	var _NoTreeData = __webpack_require__(12);
 
 	var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
 
diff --git a/assets/js/src/create_worksell.js b/assets/js/src/create_worksell.js
new file mode 100644
index 0000000..1ce0c56
--- /dev/null
+++ b/assets/js/src/create_worksell.js
@@ -0,0 +1,7 @@
+import {fileUploadInit} from './seeds/file_upload'
+import {imageUploadInit} from './seeds/image_upload'
+
+$(function () {
+    // fileUploadInit();
+    imageUploadInit();
+});
\ No newline at end of file
diff --git a/assets/js/src/customer_project_create.js b/assets/js/src/customer_project_create.js
index 10f8410..be598d4 100644
--- a/assets/js/src/customer_project_create.js
+++ b/assets/js/src/customer_project_create.js
@@ -1,4 +1,4 @@
-import fileUploadInit from './seeds/file_upload'
+import {fileUploadInit} from './seeds/file_upload'
 import {extendedFieldInit} from './seeds/extended_field'
 import {customCheckInit} from './seeds/custom_check'
 import {readMoreInit} from './seeds/read_more'
diff --git a/assets/js/src/init_create_worksell.js b/assets/js/src/init_create_worksell.js
new file mode 100644
index 0000000..259d14a
--- /dev/null
+++ b/assets/js/src/init_create_worksell.js
@@ -0,0 +1,104 @@
+import SelectedContainer from 'components/SelectedContainer';
+import SelectedContainerCreate from 'components/SelectedContainerCreate';
+import NoTreeSelect from 'components/NoTreeSelect';
+import TreeSelect from 'components/TreeSelect';
+import SingleTreeSelect from 'components/SingleTreeSelect'
+import SelectOrCreate from 'components/SelectOrCreate'
+
+$(function () {
+    function createSpecs(url) {
+        // SPECIALIZATIONS
+        let sb_main = new TreeSelect($('#select-box-1'), {url, visible: true, required: true});
+        sb_main.setHeader("Тип готовой работы");
+        let select_container = new SelectedContainer($('#selected-spec'),
+            {
+                obj: sb_main,
+            });
+        sb_main.connectSelectedContainer(select_container);
+        let sb_1 = new TreeSelect($('#select-box-2'), {obj: sb_main});
+        let sb_2 = new TreeSelect($('#select-box-3'), {obj: sb_main});
+        let sb_3 = new TreeSelect($('#select-box-4'), {obj: sb_main});
+        let sb_4 = new TreeSelect($('#select-box-5'), {obj: sb_main});
+
+        // select_container.on("add", () => {
+        //     let $container = $('#spec-value');
+        //     $container.html($('#selected-spec').find(".selected-element").find(".name").html());
+        // });
+
+        sb_main.setNearbySelectBox(sb_1);
+        sb_1.setNearbySelectBox(sb_2, sb_main);
+        sb_2.setNearbySelectBox(sb_3, sb_1);
+        sb_3.setNearbySelectBox(sb_4, sb_2);
+        sb_4.setNearbySelectBox("", sb_3);
+
+    }
+
+    function createBuildingClass(url) {
+        // BUILDING-CLASSIFICATION
+        sb_build_main = new TreeSelect($('#sb-building-classification'), {url, visible: true});
+        sb_build_main.setHeader("Классификация здания");
+
+        let sb_build_1 = new TreeSelect($('#sb-building-sub-classification'), {obj: sb_build_main});
+
+        let select_build_container = new SelectedContainer($('#selected-building-classification'),
+            {
+                obj: sb_build_main,
+                onlyOne: true
+            });
+        sb_build_main.connectSelectedContainer(select_build_container);
+
+        sb_build_main.setNearbySelectBox(sb_build_1);
+        sb_build_1.setNearbySelectBox("", sb_build_main);
+    }
+
+    function createConstructionType(url) {
+        sb_constr_main = new NoTreeSelect($('#sb-construction-type'), {url, visible: true});
+        sb_constr_main.setHeader("Вид строительства");
+        let select_constr_type = new SelectedContainer($('#selected-construction-type'), {
+            obj: sb_constr_main,
+            noTree: true,
+            onlyOne: true
+        });
+        sb_constr_main.connectSelectedContainer(select_constr_type);
+    }
+
+    function createLocations(url) {
+        sb_loc_main = new TreeSelect($('#sb-location-1'), {url, visible: true});
+        sb_loc_main.setHeader("Проектное местоположение");
+        let select_loc = new SelectedContainer($('#selected-location'),
+            {
+                obj: sb_loc_main,
+                onlyOne: true
+            });
+        sb_loc_main.connectSelectedContainer(select_loc);
+        let sb_loc_1 = new TreeSelect($('#sb-location-2'), {obj: sb_loc_main});
+        let sb_loc_2 = new TreeSelect($('#sb-location-3'), {obj: sb_loc_main});
+
+        sb_loc_main.setNearbySelectBox(sb_loc_1);
+        sb_loc_1.setNearbySelectBox(sb_loc_2, sb_loc_main);
+        sb_loc_2.setNearbySelectBox("", sb_loc_1);
+    }
+
+    function createFormat(url) {
+        let sb_format_main = new NoTreeSelect($('#sb-format'), {url, visible: true});
+        sb_format_main.setHeader("Формат электронной версии");
+        let select_format = new SelectedContainer($('#selected-format'), {
+            obj: sb_format_main,
+            noTree: true,
+            // onlyOne: true
+        });
+        sb_format_main.connectSelectedContainer(select_format);
+    }
+
+    let sb_loc_main, sb_constr_main, sb_build_main;
+
+    createSpecs('/api/specializations_flat');
+
+    createBuildingClass('/api/building_classifications');
+    createConstructionType('/api/construction_type');
+    createLocations('/api/locations_flat');
+    createFormat('/api/el_format');
+
+    // createRealty('/api/realties/current_user')
+
+});
\ No newline at end of file
diff --git a/assets/js/src/seeds/file_upload.js b/assets/js/src/seeds/file_upload.js
index 23aa00b..0fadcb8 100644
--- a/assets/js/src/seeds/file_upload.js
+++ b/assets/js/src/seeds/file_upload.js
@@ -1,24 +1,6 @@
-function humanFileSize(bytes, si) {
-    var thresh = si ? 1000 : 1024;
+import {humanFileSize} from '../utils'
 
-    if (Math.abs(bytes) < thresh)
-        return bytes + ' B';
-
-    var units = si
-        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-
-    var u = -1;
-
-    do {
-        bytes /= thresh;
-        ++u
-    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
-
-    return bytes.toFixed(1) + ' ' + units[u]
-}
-
-export default function fileUploadInit() {
+function fileUploadInit() {
     var $fileUploadContainer = $('#fileUploadContainer');
 
     $('#fileUploadAddBtn').on('click', function ($evt) {
@@ -50,8 +32,6 @@ export default function fileUploadInit() {
         $btn.closest('.file-upload-widget').remove()
     });
 
-    $fileUploadContainer.on('click', '.existing-file-remove-btn', function ($evt) {
-        var $btn = $(this);
-        $btn.closest('.existing-file-widget').remove()
-    });
 }
+
+export {fileUploadInit}
\ No newline at end of file
diff --git a/assets/js/src/seeds/image_upload.js b/assets/js/src/seeds/image_upload.js
new file mode 100644
index 0000000..de39cd8
--- /dev/null
+++ b/assets/js/src/seeds/image_upload.js
@@ -0,0 +1,47 @@
+//TODO: оформить Upload'еры в виде классов
+import {humanFileSize} from '../utils'
+
+function imageUploadInit() {
+    var $fileUploadContainer = $('#fileUploadContainer');
+
+    $('#fileUploadAddBtn').on('click', function ($evt) {
+        $fileUploadContainer.find('.file-upload-widget').last().find('.file-upload-input').click()
+    });
+
+    $fileUploadContainer.on('change', '.file-upload-input', function ($evt) {
+        var $fileInput = $(this);
+        var $fileUploadWidget = $fileInput.closest('.file-upload-widget');
+        let $fileImg = $fileUploadWidget.find('img');
+        var filePath = $fileInput.val().replace(/\\/g, '/');
+        var fileName = path.basename(filePath);
+        var fileSize = $fileInput.get(0).files && humanFileSize($fileInput.get(0).files[0].size);
+
+        if (fileName) {
+            $fileUploadWidget.find('.file-upload-label').text(fileName + ' ' + fileSize);
+
+            var $newFileUploadWidget = $fileUploadWidget.clone();
+            $newFileUploadWidget.find('.file-upload-label').text('');
+
+            $fileUploadContainer.find('.list-new-new').append($newFileUploadWidget);
+
+            $fileUploadWidget.css('display', 'block');
+
+            if ($fileImg) {
+                let reader = new FileReader();
+                reader.onload = function (e) {
+                    $fileImg.attr('src', e.target.result);
+                };
+
+                reader.readAsDataURL($fileInput[0].files[0]);
+            }
+        }
+    });
+
+    $fileUploadContainer.on('click', '.file-upload-remove-img-btn', function ($evt) {
+        var $btn = $(this);
+        $btn.closest('.file-upload-widget').remove()
+    });
+
+}
+
+export {imageUploadInit}
\ No newline at end of file
diff --git a/assets/js/src/seeds/textareas_max-rows.js b/assets/js/src/seeds/textareas_max-rows.js
new file mode 100644
index 0000000..e62269f
--- /dev/null
+++ b/assets/js/src/seeds/textareas_max-rows.js
@@ -0,0 +1,16 @@
+function textareasMaxRowsInit() {
+    $('textarea[data-limit-rows=true]')
+        .on('keypress', function (event) {
+            console.log("work");
+            var textarea = $(this),
+                text = textarea.val(),
+                numberOfLines = (text.match(/\n/g) || []).length + 1,
+                maxRows = parseInt(textarea.attr('rows'));
+
+            if (event.which === 13 && numberOfLines === maxRows) {
+                return false;
+            }
+        });
+}
+
+export {textareasMaxRowsInit}
\ No newline at end of file
diff --git a/assets/js/src/utils.js b/assets/js/src/utils.js
new file mode 100644
index 0000000..cc594ca
--- /dev/null
+++ b/assets/js/src/utils.js
@@ -0,0 +1,36 @@
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie != '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = jQuery.trim(cookies[i]);
+            if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+function humanFileSize(bytes, si) {
+    var thresh = si ? 1000 : 1024;
+
+    if (Math.abs(bytes) < thresh)
+        return bytes + ' B';
+
+    var units = si
+        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+
+    var u = -1;
+
+    do {
+        bytes /= thresh;
+        ++u
+    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
+
+    return bytes.toFixed(1) + ' ' + units[u]
+}
+
+export {humanFileSize, getCookie}
\ No newline at end of file
diff --git a/assets/lib/proekton-components/sass/parts/_selected-container.sass b/assets/lib/proekton-components/sass/parts/_selected-container.sass
index 161e077..07af5d8 100644
--- a/assets/lib/proekton-components/sass/parts/_selected-container.sass
+++ b/assets/lib/proekton-components/sass/parts/_selected-container.sass
@@ -38,7 +38,10 @@
 
 .horizontal
   &.selected-container
-    display: inline-block
-    max-width: 300px
+    //display: inline-block
     .header, .name
-      max-width: 300px
\ No newline at end of file
+      //max-width: 300px
+      display: inline-block
+  .selected-element
+    max-width: 300px
+    display: inline-block
\ No newline at end of file
diff --git a/assets/sass/components/custom-components.sass b/assets/sass/components/custom-components.sass
index 1587956..c84253d 100644
--- a/assets/sass/components/custom-components.sass
+++ b/assets/sass/components/custom-components.sass
@@ -20,7 +20,7 @@ label
   margin-bottom: -1px
   &:-webkit-autofill
     -webkit-box-shadow: 0 0 0 1000px white inset
-    //transition: background-color 5000s ease-in-out 0s
+  //transition: background-color 5000s ease-in-out 0s
   &.icon-rub
     background:
       image: url("#{$static}/img/rub.png")
@@ -135,6 +135,12 @@ textarea.description
   width: auto
   text-align: right
 
+.file-upload-widget
+  .preview
+    width: 100%
+    height: 200px
+    margin-bottom: 10px
+
 .separator
   margin-top: 35px
   margin-bottom: 15px
@@ -209,14 +215,29 @@ textarea.description
     color: darkgray
   .file-upload-remove-btn
     display: inline-block
-    //position: absolute
     width: 11px
     height: 11px
     background: url('#{$static}/img/delDoc.png') no-repeat center
-    //background-size: cover
-    //right: -20px !important
-    //top: 2px
     cursor: pointer
+  .file-upload-remove-img-btn
+    width: 16px
+    height: 16px
+    background: url('#{$static}/img/aui-icon-close.png') no-repeat center
+    cursor: pointer
+    //padding: px
+
+  .preview-container
+    position: relative
+    display: inline-block
+    .file-upload-remove-img-btn
+      position: absolute
+      top: 0
+      right: 0
+    textarea.description
+      font-size: 9pt
+      color: darkgray
+      resize: vertical
+      max-height: 68px
 
 .complete
   display: none
diff --git a/common/serializers.py b/common/serializers.py
index 39be952..7bf703d 100644
--- a/common/serializers.py
+++ b/common/serializers.py
@@ -2,6 +2,7 @@ from django.contrib.contenttypes.models import ContentType
 from rest_framework.serializers import ModelSerializer
 
 from .models import Location
+from work_sell.models import ElFormat
 
 
 class NestedLocationSerializer(ModelSerializer):
@@ -64,6 +65,19 @@ class LocationSerializerFlat(ModelSerializer):
             'parent')
 
 
+class ElFormatSerializer(ModelSerializer):
+    # children = NestedLocationSerializerFlat(many=True)
+    # parent = NestedLocationSerializerFlat()
+
+    class Meta:
+        model = Location
+
+        fields = (
+            'id',
+            'name',
+        )
+
+
 class ContentTypeSerializer(ModelSerializer):
     class Meta:
         model = ContentType
diff --git a/projects/templates/customer_project_create.html b/projects/templates/customer_project_create.html
index 3c31375..2132e97 100644
--- a/projects/templates/customer_project_create.html
+++ b/projects/templates/customer_project_create.html
@@ -85,18 +85,18 @@
                     <div style="margin-top: 45px" class="row">
                         <div class="col-lg-12">
                             <div class="simple-field">
-                                <div class="header">Подобно опишите задание для /
+                                <div class="header">Подробно опишите задание для /
                                     <span class="select-text" id="spec-value"></span>
                                 </div>
                                 <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                                 <span class="required">Обязательно</span>
-                                <textarea class="description" rows="6" placeholder=
+                                <textarea name="{{ form.description.html_name }}" class="description" rows="6" placeholder=
                                         " Пример №1
   Разработать архиьектурные решения для жилого дома на основании эскизной проработки
 
 
   Пример №2
-  Разработать проект по електроснабжению и освещению гаража"></textarea>
+  Разработать проект по електроснабжению и освещению гаража">{{ form.description.value }}</textarea>
 
                             </div>
                             <div class="documentsChat mod" id="fileUploadContainer">
diff --git a/templates/partials/sass/header.sass b/templates/partials/sass/header.sass
index 4db75dd..83f0788 100644
--- a/templates/partials/sass/header.sass
+++ b/templates/partials/sass/header.sass
@@ -74,6 +74,20 @@ $static: '/static'
     background-size: cover
     background: url('#{$static}/img/listMain.png') no-repeat -48px 0
 
+  .icon_tml span
+    content: ''
+    position: absolute
+    width: 27px
+    height: 24px
+    //left: -35px
+    top: 0
+    background: url('#{$static}/img/list4.png') no-repeat center !important
+    background-size: cover !important
+
+.icon_tml:hover span
+  background: url('#{$static}/img/list4tml.png') no-repeat center !important
+  background-size: cover !important
+
 .icon_tm1:hover span
   width: 26px
   background: url('#{$static}/img/listMain2.png') no-repeat left !important
@@ -92,6 +106,42 @@ $static: '/static'
   background-size: cover
   background-position: -49px 0 !important
 
+.rating
+  width: 46px
+  height: 46px
+  float: right
+  border-radius: 100%
+  background-color: #4D4D4D
+  margin: 15px 0 0 10px
+  position: relative
+
+.ratingInset
+  width: 46px
+  height: 46px
+  border-radius: 100%
+  background-color: #FF0027
+  position: absolute
+  /*left:-1.859px;*/
+  /*bottom: 3px;*/
+  clip: rect(0, 22px, 50px, 0)
+  transform: rotate(-90deg)
+
+.iconRating
+  width: 100%
+  height: 100%
+  position: absolute
+  left: 0
+  top: 0
+  background: url('#{$static}/img/button12.png') no-repeat center
+
+.ratingPer
+  color: #ff2c2c
+  font-size: 18px
+  font-family: 'pfdintextcomppro-regular', sans-serif
+  float: right
+  margin: 28px 0 0 9px
+  cursor: pointer
+
 .mainMenu li
   &:last-child
     padding-right: 0
@@ -111,6 +161,15 @@ $static: '/static'
   &.icon_tm3.active span
     background: url('#{$static}/img/listMain2.png') no-repeat right !important
 
+li.officeList.icon_tml > a > p
+  display: inline-block
+  padding: 5px 7px 3px 7px
+  background: #ff0000
+  border-radius: 35px
+  position: absolute
+  right: -34px
+  top: -4px
+
 .changeBlock
   width: 485px
   overflow: hidden
diff --git a/users/templates/contractor_profile.html b/users/templates/contractor_profile.html
index 261e765..4349b67 100644
--- a/users/templates/contractor_profile.html
+++ b/users/templates/contractor_profile.html
@@ -247,43 +247,25 @@
                         </div>
                     </div>
 
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
                     <div id="tab12" class="tab-pane fade">
                         {% if contractor.pk == request.user.pk %}
                             <div class="col-lg-9">
                                 <p class="addWork">
-                                    <a href="#" data-toggle="modal" data-target="#worksell-modal">Добавить проект</a>
+                                    <a href="{% url 'work_sell:create'%}">Добавить проект</a>
                                 </p>
                             </div>
-                            <div id="worksell-modal" class="modal fade">
-                                <div class="modal-dialog" style="width: 900px;">
-                                    <div class="modal-content">
-                                        <div class="modal-header">
-                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                                            <h4 class="modal-title">Добавить готовую работу</h4>
-                                        </div>
-                                        
-                                        {% include 'worksell_create_form.html' %}
-                                    </div>
-                                </div>
-                            </div>
+{#                            <div id="worksell-modal" class="modal fade">#}
+{#                                <div class="modal-dialog" style="width: 900px;">#}
+{#                                    <div class="modal-content">#}
+{#                                        <div class="modal-header">#}
+{#                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>#}
+{#                                            <h4 class="modal-title">Добавить готовую работу</h4>#}
+{#                                        </div>#}
+{##}
+{#                                        {% include 'worksell_create_form.html' %}#}
+{#                                    </div>#}
+{#                                </div>#}
+{#                            </div>#}
                         {% endif %}
 
                         <div class="galleryWork2 disTab -work-sells-container">
@@ -817,7 +799,7 @@
                     data: dataSerializer,
                     dataType: 'json',
                     success: function (data) {
-                        console.log(data);
+                        consoCoole.log(data);
                         if (data.status == 'ok') {
                             $("#resume-text-out").html(data.text);
                             $("#resume-text-edit").modal('hide');
diff --git a/webpack.config.js b/webpack.config.js
index f63f80d..da0cdaf 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,9 +8,12 @@ module.exports = {
     // context: path.join(__dirname, "static", "js"),
 
     entry: {
-        // user: "./user",
+        // projects
         create_project: "./assets/js/src/customer_project_create.js",
-        init_customer_project_create: './assets/js/src/init_customer_project_create.js'
+        init_customer_project_create: './assets/js/src/init_customer_project_create.js',
+        //worksell
+        create_worksell: "./assets/js/src/create_worksell.js",
+        init_create_worksell:  './assets/js/src/init_create_worksell.js',
 
     },
 
diff --git a/work_sell/admin.py b/work_sell/admin.py
index 01deb2e..855c85d 100644
--- a/work_sell/admin.py
+++ b/work_sell/admin.py
@@ -1,7 +1,8 @@
 from django.contrib import admin
 
-from .models import WorkSell, WorkSellPhoto, Picture
+from .models import WorkSell, WorkSellPhoto, Picture, ElFormat
 
 admin.site.register(WorkSell)
+admin.site.register(ElFormat)
 admin.site.register(Picture)
 admin.site.register(WorkSellPhoto)
diff --git a/work_sell/forms.py b/work_sell/forms.py
index 63f31fc..1e8afd4 100644
--- a/work_sell/forms.py
+++ b/work_sell/forms.py
@@ -20,26 +20,26 @@ class ContractorWorkSellTrashForm(forms.Form):
 class WorkSellForm(forms.ModelForm):
     # Define a form field manually for a reverse model vield:
 
-    photos = forms.ModelMultipleChoiceField(
-        queryset=WorkSellPhoto.objects.none(),
-        widget=forms.CheckboxSelectMultiple,
-        required=False,
-    )
-
-    live_images = forms.ModelMultipleChoiceField(
-        queryset=LiveImageUpload.objects.all(),
-        widget=forms.CheckboxSelectMultiple,
-        required=False,
-    )
-
-    building_classification = TreeNodeChoiceField(
-        BuildingClassfication.objects.exclude(name='_root'),
-        widget=forms.Select(attrs={
-            'class': 'selectpicker'
-        }),
-        required=False,
-        level_indicator='  ',
-    )
+    # photos = forms.ModelMultipleChoiceField(
+    #     queryset=WorkSellPhoto.objects.none(),
+    #     widget=forms.CheckboxSelectMultiple,
+    #     required=False,
+    # )
+    #
+    # live_images = forms.ModelMultipleChoiceField(
+    #     queryset=LiveImageUpload.objects.all(),
+    #     widget=forms.CheckboxSelectMultiple,
+    #     required=False,
+    # )
+    #
+    # building_classification = TreeNodeChoiceField(
+    #     BuildingClassfication.objects.exclude(name='_root'),
+    #     widget=forms.Select(attrs={
+    #         'class': 'selectpicker'
+    #     }),
+    #     required=False,
+    #     level_indicator='  ',
+    # )
 
     class Meta:
         model = WorkSell
@@ -48,28 +48,45 @@ class WorkSellForm(forms.ModelForm):
             'building_classification',
             'construction_type',
             'specialization',
+            'specializations',
             'contractor',
+            'location',
             'budget',
             'currency',
             'description',
+            'el_format',
             'name',
             'term',
             'term_type',
-            'work_type',
         )
 
-        widgets = {
-            'construction_type': forms.Select(attrs={'class': 'selectpicker'}),
-            'currency': forms.Select(attrs={'class': 'selectpicker'}),
-            'term_type': forms.Select(attrs={'class': 'selectpicker'}),
-            'work_type': forms.Select(attrs={'class': 'selectpicker -project-work-type-select-field'}),
-        }
+        # widgets = {
+        #     'construction_type': forms.Select(attrs={'class': 'selectpicker'}),
+        #     'currency': forms.Select(attrs={'class': 'selectpicker'}),
+        #     'term_type': forms.Select(attrs={'class': 'selectpicker'}),
+        #     'work_type': forms.Select(attrs={'class': 'selectpicker -project-work-type-select-field'}),
+        # }
+
+    # def clean(self):
+    #     print("CLEAN", self.cleaned_data)
+    #     data = self.cleaned_data.get('specialization')
+    #     print("before data = ", data)
+    #     # print('spec = ', data.split(','))
+    #     # self.cleaned_data['specialization'] = data.split(',')
+    #     super().clean()
+
+    # def clean_specialization(self):
+    #     data = self.cleaned_data['specialization']
+    #     print("before data = ", data)
+    #     data = data.split(',')
+    #     print("after data = ", data)
+    #     return data
 
     def __init__(self, *args, **kwargs):
-        # self.request = kwargs.pop('request')
+        self.request = kwargs.pop('request')
         super().__init__(*args, **kwargs)
 
-        self.fields['photos'].queryset = self.instance.photos.all()
+        # self.fields['photos'].queryset = self.instance.photos.all()
 
 
 class WorkSellFilterForm(forms.ModelForm):
diff --git a/work_sell/migrations/0020_auto_20161207_0034.py b/work_sell/migrations/0020_auto_20161207_0034.py
new file mode 100644
index 0000000..84c1bc0
--- /dev/null
+++ b/work_sell/migrations/0020_auto_20161207_0034.py
@@ -0,0 +1,30 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.7 on 2016-12-06 21:34
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('work_sell', '0019_auto_20161201_2003'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ElFormat',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=32)),
+            ],
+            options={
+                'verbose_name': 'Формат электронной версии',
+            },
+        ),
+        migrations.AddField(
+            model_name='worksell',
+            name='el_format',
+            field=models.ManyToManyField(blank=True, related_name='work_sell', to='work_sell.ElFormat'),
+        ),
+    ]
diff --git a/work_sell/migrations/0021_auto_20161207_1210.py b/work_sell/migrations/0021_auto_20161207_1210.py
new file mode 100644
index 0000000..c072344
--- /dev/null
+++ b/work_sell/migrations/0021_auto_20161207_1210.py
@@ -0,0 +1,27 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.7 on 2016-12-07 09:10
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import mptt.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('specializations', '0004_auto_20161014_2344'),
+        ('work_sell', '0020_auto_20161207_0034'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='worksell',
+            name='specializations',
+            field=mptt.fields.TreeManyToManyField(blank=True, to='specializations.Specialization'),
+        ),
+        migrations.AlterField(
+            model_name='worksell',
+            name='work_type',
+            field=models.IntegerField(blank=True, choices=[(403, 'Проектирование777'), (87, 'Техническое сопровождение666')], default=1),
+        ),
+    ]
diff --git a/work_sell/migrations/0022_auto_20161207_1213.py b/work_sell/migrations/0022_auto_20161207_1213.py
new file mode 100644
index 0000000..29c8810
--- /dev/null
+++ b/work_sell/migrations/0022_auto_20161207_1213.py
@@ -0,0 +1,37 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.7 on 2016-12-07 09:13
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+import mptt.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('work_sell', '0021_auto_20161207_1210'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='worksell',
+            name='building_classification',
+            field=mptt.fields.TreeForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='work_sells', to='projects.BuildingClassfication'),
+        ),
+        migrations.AlterField(
+            model_name='worksell',
+            name='construction_type',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='work_sells', to='projects.ConstructionType'),
+        ),
+        migrations.AlterField(
+            model_name='worksell',
+            name='location',
+            field=mptt.fields.TreeForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='work_sells', to='common.Location'),
+        ),
+        migrations.AlterField(
+            model_name='worksell',
+            name='specialization',
+            field=mptt.fields.TreeForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='work_sells', to='specializations.Specialization'),
+        ),
+    ]
diff --git a/work_sell/models.py b/work_sell/models.py
index f5a91b0..f9c6af0 100644
--- a/work_sell/models.py
+++ b/work_sell/models.py
@@ -1,5 +1,5 @@
 from django.db import models
-from mptt.models import TreeForeignKey
+from mptt.models import TreeForeignKey, TreeManyToManyField
 from sorl.thumbnail import ImageField
 
 from projects.models import BuildingClassfication, ConstructionType, TERM_TYPES, CURRENCIES, Project
@@ -11,20 +11,23 @@ class WorkSell(models.Model):
     # TODO: Add consistency ("work_sell" vs "worksell"):
 
     budget = models.DecimalField(max_digits=10, decimal_places=0, default=0, null=True, blank=True)
-    building_classification = TreeForeignKey(BuildingClassfication, related_name='worksells', null=True, blank=True)
-    construction_type = models.ForeignKey(ConstructionType, related_name='worksells', null=True, blank=True)
+    building_classification = TreeForeignKey(BuildingClassfication, related_name='work_sells', null=True, blank=True)
+    construction_type = models.ForeignKey(ConstructionType, related_name='work_sells', null=True, blank=True)
     contractor = models.ForeignKey(User, related_name='work_sell', null=True,
                                    blank=True)  # TODO: Pluralize related name
     created = models.DateTimeField(auto_now_add=True)
     currency = models.CharField(max_length=20, default='rur', choices=CURRENCIES, null=True, blank=True)
     description = models.TextField(blank=True)
-    location = TreeForeignKey('common.Location', related_name='worksells', null=True, blank=True)
+    el_format = models.ManyToManyField('ElFormat', related_name='work_sell', blank=True)
+    location = TreeForeignKey('common.Location', related_name='work_sells', null=True, blank=True)
     name = models.CharField(max_length=255)
-    specialization = TreeForeignKey(Specialization, related_name='worksells', null=True, blank=True)
+    # deprecated
+    specialization = TreeForeignKey(Specialization, related_name='work_sells', null=True, blank=True)
+    specializations = TreeManyToManyField(Specialization, blank=True)
     team = models.ForeignKey(Team, related_name='work_sells', null=True, blank=True)
     term = models.IntegerField(default=0, null=True, blank=True)
     term_type = models.CharField(max_length=20, choices=TERM_TYPES, default='hour', null=True, blank=True)
-    work_type = models.IntegerField(default=1, choices=Project.WORK_TYPES)
+    work_type = models.IntegerField(default=1, choices=Project.WORK_TYPES, blank=True)
 
     def __str__(self):
         return self.name
@@ -80,3 +83,13 @@ class Picture(models.Model):
     def delete(self, *args, **kwargs):
         self.file.delete(False)
         super().delete(*args, **kwargs)
+
+
+class ElFormat(models.Model):
+    name = models.CharField(max_length=32)
+
+    def __str__(self):
+        return self.name
+
+    class Meta:
+        verbose_name = 'Формат электронной версии'
diff --git a/work_sell/templates/worksell_create.html b/work_sell/templates/worksell_create.html
index 752e85f..7f7390b 100644
--- a/work_sell/templates/worksell_create.html
+++ b/work_sell/templates/worksell_create.html
@@ -1,55 +1,224 @@
 {% extends 'partials/base.html' %}
-{% block content %}
-    <form method="post" enctype="multipart/form-data">{% csrf_token %}
+{% load staticfiles %}
+{% load sass_tags %}
+{% load thumbnail %}
+{% block old_css %}{% endblock %}
+{% block head_css %}
+    <link rel='stylesheet' href='{% static "css/font-awesome.min.css" %}'>
+    <link rel='stylesheet' href='{% sass_src "sass/main.sass" %}'>
+    <link rel='stylesheet' href='{% sass_src "sass/components/custom-components.sass" %}'>
+    <link rel='stylesheet' href='{% sass_src "lib/proekton-components/sass/components.sass" %}'>
+    {#    <style>#}
+    {#        .-live-image-upload-container .-position-relative-parent {#}
+    {#            position: relative#}
+    {#        }#}
+    {##}
+    {#        .-live-image-upload-container .-image-delete,#}
+    {#        .-live-image-upload-container .-live-image-delete {#}
+    {#            position: absolute;#}
+    {#            top: 0;#}
+    {#            right: 0;#}
+    {#            background-color: white;#}
+    {#        }#}
+    {#    </style>#}
+{% endblock %}
+
 
-        <div class="col-lg-7">
-            <!-- The fileinput-button span is used to style the file input field as button -->
-                <span class="btn btn-success fileinput-button">
-                    <i class="glyphicon glyphicon-plus"></i>
-                    <span>Add files...</span>
-                    <input type="file" name="files[]" multiple>
-                </span>
+{% block content %}
+    {% include 'partials/modals/project_work_type_suggestion.html' %}
+    {% include 'partials/header.html' %}
+    <div class="container main-scope">
+        <div class="row title-scope">
+            <div class="col-lg-12">
+                {#                <div class="title-scope">#}
+                <h1>Добавить готовую работу</h1>
+                {#                </div>#}
+            </div>
         </div>
-        <input type="submit" value="Save12"/>
-    </form>
-{% endblock %}
+        <div class="row main-content">
+            <div class="col-lg-12">
+                <form action="{% url 'work_sell:create' %}" method="POST"
+                      enctype="multipart/form-data" novalidate>
+                    {% csrf_token %}
+                    <div class="row">
+                        <div class="col-lg-9">
+                            <div class="simple-field">
+                                <div class="header">Название проекта</div>
+                                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                                <span class="required">Обязательно</span>
+                                <input value="{{ form.name.value }}" name="{{ form.name.html_name }}"
+                                       class="simple-input italic"
+                                       placeholder="Пример: Дизайн проект квартиры, Армирование фундамента, Конструкции перекрытия и т.д."
+                                       autocomplete="off"
+                                       required>
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="header ">Стоимость готового проекта
+                                <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
+                            </div>
+                            <input name="{{ form.budget.html_name }}" class="simple-input icon-rub js-number-format"
+                                   placeholder="Введите сумму"
+                                   value="{{ form.budget.value }}"
+                                   autocomplete="off">
+                        </div>
+                    </div>
+                    <div class="row vertical-child mod-align-bottom">
+                        <div class="col-lg-9">
+                            <div class="" id="select-box-1"></div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div href="#" onclick="return false" data-toggle="modal"
+                                 data-target="#projectWorkTypeSuggestionModal"
+                                 class="btn btn-simple btn-plus">Нет нужной специальности хочу добавить
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="select-box-2">
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="select-box-3">
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="select-box-4">
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="select-box-5">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-12 vertical-child">
+                            <div class="selected-container horizontal" id="selected-spec">
+                                <input type="hidden" name="{{ form.specializations.html_name }}"
+                                       value="{{ form.specializations.value }}">
+                            </div>
+                        </div>
+                    </div>
+                    <div style="margin-top: 45px" class="row">
+                        <div class="col-lg-12">
+                            <div class="simple-field">
+                                <div class="header">Подробно опишите проект
+                                    <span class="select-text" id="spec-value"></span>
+                                </div>
+                                <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
+                                <span class="required">Обязательно</span>
+                                <textarea name="{{ form.description.html_name }}" class="description" rows="8">{{ form.description.value }}</textarea>
 
-{% block js_block %}
+                            </div>
+                            <div class="documentsChat mod" id="fileUploadContainer">
+                                <div style="display: inline-block;vertical-align: middle;">
+                                    <div style="display: inline-block;vertical-align: inherit;"
+                                         class="upload-new paper-clip">
+                                        <p id="fileUploadAddBtn" style="margin: 0">прикрепить файл</p>
+                                    </div>
+                                    <span style="display: inline-block;vertical-align: inherit;">ДО 100 ФАЙЛОВ</span>
+                                </div>
 
-    <script type="text/javascript">
+                                <div class="row list-new-new" style="margin-top: 10px">
+                                    <div class="col-lg-3 file-upload-widget" style="display: none">
+                                        <input type="file" name="new_files" class="file-upload-input"
+                                               style="position: absolute; top: -1000px; left: -1000px">
+                                        <div class="preview-container">
+                                            <div class="file-upload-remove-img-btn"></div>
+                                            <img class="preview" src="#" alt="your image"/>
+                                            <textarea rows="2" data-limit-rows="true" class="description">
 
-    $(function(){
-        $.ajax({
-            url : '/work_sell/test/',
-            
-            success:function(data){
-                alert(data);
-                console.log(data);
-            }
-        });
-    });
+                                            </textarea>
+                                        </div>
+                                        <span style="display:none" class="file-upload-label"></span>
 
-        {#       $(function(){#}
-        {#          var files;#}
-        {#           $('input[type=file]').on('change', prepareUpload);#}
-        {#           $('form').on('submit', uploadFiles);#}
-        {##}
-        {#           function uploadFiles(e){#}
-        {#               console.log('submit');#}
-        {#               e.stopPropagation();#}
-        {#               e.preventDefault();#}
-        {#               var data = new FormData();#}
-        {#               $.each(files, function(k,v){#}
-        {#                   console.log(k);#}
-        {#                   console.log(v);#}
-        {#                   data.append(k, v);#}
-        {#               });#}
-        {#               console.log(data);#}
-        {#           }#}
-        {#           function prepareUpload(e){#}
-        {#               files = e.target.files;#}
-        {#           }#}
-        {##}
-        {#       });#}
-    </script>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="sb-building-classification">
+                            </div>
+                            <div class="vertical-child" id="sb-building-sub-classification">
+                            </div>
+                            <div class="selected-container" id="selected-building-classification">
+                                <input type="hidden"
+                                       name="{{ form.building_classification.html_name }}"
+                                       value="{{ form.building_classification.value }}">
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="sb-construction-type">
+                            </div>
+                            <div class="selected-container" id="selected-construction-type">
+                                <input type="hidden"
+                                       name="{{ form.construction_type.html_name }}"
+                                       value="{{ form.construction_type.value }}">
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="sb-location-1"></div>
+                            <div class="vertical-child" id="sb-location-2"></div>
+                            <div class="vertical-child" id="sb-location-3"></div>
+                            <div class="selected-container" id="selected-location">
+                                <input type="hidden"
+                                       name="{{ form.location.html_name }}"
+                                       value="{{ form.location.value }}">
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="sb-format"></div>
+                            <div class="selected-container" id="selected-format">
+                                <input type="hidden"
+                                       name="{{ form.el_format.html_name }}"
+                                       value="{{ form.el_format.value }}">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-12">
+                            <div class="separator">
+                                <div class="border"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row top-line">
+                        <div class="col-lg-3" style="text-align: center">
+                            <div class="header">&nbsp;</div>
+                            <input style="width: 100%" type="submit" class="btn btn-simple"
+                                   value="РАЗМЕСТИТЬ ЗАКАЗ">
+                        </div>
+                        <div class="col-lg-3 col-lg-offset-6" style="text-align: center">
+                            <div class="header">&nbsp;</div>
+                            <input style="width: 100%" type="button" class="btn btn-simple"
+                                   value="ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР">
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+        {% include 'partials/footer.html' %}
+    </div>
+{% endblock %}
+{% block old_js %}
+    <script src='{% static "lib/jquery.fileupload/js/vendor/jquery.ui.widget.js" %}'></script>
+    <script src='{% static "lib/jquery.fileupload/js/jquery.iframe-transport.js" %}'></script>
+    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload.js" %}'></script>
+    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload-process.js" %}'></script>
+    <script src='{% static "lib/lodash/lodash.js" %}'></script>
+    <script src='{% static "my-libs.js" %}'></script>
 {% endblock %}
+{% block js_block %}
+    <script src='{% static "js/bootstrap.min.js" %}'></script>
+    <script src='{% static "js/build/init_create_worksell.js" %}'></script>
+    <script src='{% static "js/build/create_worksell.js" %}'></script>
+    <script src='{% static "js/jquery.mask.min.js" %}'></script>
+    <script>
+        $(function () {
+            $('.js-number-format').mask('0000000000');
+        })
+    </script>
+{% endblock %}
\ No newline at end of file
diff --git a/work_sell/urls.py b/work_sell/urls.py
index 8f64826..0d9a947 100644
--- a/work_sell/urls.py
+++ b/work_sell/urls.py
@@ -5,7 +5,8 @@ from .views import (
     WorkSellUpdateView,
     WorkSellDeleteView,
     UploadView,
-    work_sell_create,
+    # work_sell_create,
+    WorkSellCreateView,
     BasicCreateView,
     PictureCreateView,
     ContractorWorkSellTrashView,
@@ -17,12 +18,12 @@ app_name = 'work_sell'
 
 urlpatterns = [
     urls.url(r'^$', WorkSellFilterView.as_view(), name='list'),
-    # urls.url(r'^create/$', WorkSellCreateView.as_view(), name='create'),
+    urls.url(r'^create/$', WorkSellCreateView.as_view(), name='create'),
     urls.url(r'^upload/$', UploadView.as_view(), name='upload'),
     urls.url(r'^(?P<pk>\d+)/edit/$', WorkSellUpdateView.as_view(), name='edit'),
     urls.url(r'^(?P<pk>\d+)/delete/$', WorkSellDeleteView.as_view(), name='delete'),
     urls.url(r'^(?P<pk>\d+)/trash/$', ContractorWorkSellTrashView.as_view(), name='contractor-worksell-trash'),
-    urls.url(r'^create/$', work_sell_create, name='create'),
+    # urls.url(r'^create/$', work_sell_create, name='create'),
     urls.url(r'^basic/$', BasicCreateView.as_view(), name='upload-basic'),
     urls.url(r'^new/$', PictureCreateView.as_view(), name='upload-new'),
     urls.url(r'^(?P<pk>\d+)/$', WorkSellDetail.as_view(), name='detail'),
diff --git a/work_sell/views.py b/work_sell/views.py
index bbc1fe0..168e11f 100644
--- a/work_sell/views.py
+++ b/work_sell/views.py
@@ -12,13 +12,15 @@ from django.contrib import messages
 from django.db.models import Q
 from django.core.urlresolvers import reverse
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
+from django.core.exceptions import PermissionDenied
 from django.http import JsonResponse, HttpResponse, HttpResponseForbidden
 from django.core.files.base import ContentFile
 from django.views.generic import ListView, DetailView, CreateView, View, \
     UpdateView, DeleteView, TemplateView
 
 from projects.models import BuildingClassfication, ConstructionType
-from .models import WorkSell, Picture, WorkSellPhoto
+from projects.forms import ProjectWorkTypeSuggestionForm
+from .models import WorkSell, Picture, WorkSellPhoto, WorkSellPhoto
 from .forms import WorkSellForm, WorkSellFilterForm, ContractorWorkSellTrashForm
 from .serialize import serialize
 from .response import JSONResponse, response_mimetype
@@ -143,33 +145,83 @@ class WorkSellDetail(DetailView):
         return context
 
 
-def work_sell_create(request):
-    if request.is_ajax():
-        form = WorkSellForm(data=request.POST)
+# def work_sell_create(request):
+#     if request.is_ajax():
+#         form = WorkSellForm(data=request.POST)
+#         if form.is_valid():
+#             instance = form.save(commit=False)
+#             # import code; code.interact(local=dict(globals(), **locals()))
+#             instance.save()
+#             form.save_m2m()
+#             images_ids = request.POST.get('images-ids').split(';')[:-1]
+#             for pk in images_ids:
+#                 picture = Picture.objects.get(pk=pk)
+#                 temp_file = ContentFile(picture.file.read())
+#                 temp_file.name = picture.file.name
+#                 w_photo = WorkSellPhoto()
+#                 w_photo.img = temp_file
+#                 w_photo.worksell = instance
+#                 w_photo.save()
+#             data = {'status': 'ok'}
+#         else:
+#             data = {'status': 'no', 'form_errors': form.errors}
+#         return HttpResponse(json.dumps(data), content_type='application/json')
+
+
+class WorkSellCreateView(BaseMixin, View):
+    model = WorkSell
+    form_class = WorkSellForm
+    work_type_suggestion_form = ProjectWorkTypeSuggestionForm
+    template_name = 'worksell_create.html'
+
+    def dispatch(self, request, *args, **kwargs):
+        if request.user.is_authenticated() and request.user.is_contractor():
+            return super().dispatch(request, *args, **kwargs)
+        else:
+            raise PermissionDenied
+
+    def get(self, request, *args, **kwargs):
+        context = self.get_context_data(**_.merge({}, request.GET, kwargs))
+
+        form = self.form_class(request=request)
+        work_type_suggestion_form = self.work_type_suggestion_form(request=request, prefix='work_type_suggestion')
+
+        context.update({
+            'form': form,
+            'work_type_suggestion_form': work_type_suggestion_form,
+        })
+
+        return render(request, self.template_name, context)
+
+    def post(self, request, *args, **kwargs):
+        form = self.form_class(request.POST, request=request)  # Passing `request.FILES` seems unnecessary here. Files are added manually below
+        # TODO: fix it on front
+        request.POST.setlist('specializations', request.POST.get('specializations').split(','))
+        request.POST.setlist('el_format', request.POST.get('el_format').split(','))
+        print("POST before = ", request.POST)
         if form.is_valid():
-            instance = form.save(commit=False)
-            # import code; code.interact(local=dict(globals(), **locals()))
-            instance.save()
+            work_sell = form.save(commit=False)
+            work_sell.contractor = request.user
+            work_sell.save()
             form.save_m2m()
-            images_ids = request.POST.get('images-ids').split(';')[:-1]
-            for pk in images_ids:
-                picture = Picture.objects.get(pk=pk)
-                temp_file = ContentFile(picture.file.read())
-                temp_file.name = picture.file.name
-                w_photo = WorkSellPhoto()
-                w_photo.img = temp_file
-                w_photo.worksell = instance
-                w_photo.save()
-            data = {'status': 'ok'}
-        else:
-            data = {'status': 'no', 'form_errors': form.errors}
-        return HttpResponse(json.dumps(data), content_type='application/json')
 
+            for file in request.FILES.getlist('new_files'):
+                WorkSellPhoto.objects.create(img=file, worksell=work_sell)
 
-class WorkSellCreateView(CreateView):
-    model = WorkSell
-    form_class = WorkSellForm
-    template_name = 'worksell_create.html'
+            messages.info(request, 'Работа успешно создана')
+            redirect_to = reverse('work_sell:detail', kwargs={'pk': work_sell.pk})
+            return redirect(redirect_to)
+        else:
+            if form.errors:
+                messages.info(request, (
+                    '<p>Произошла ошибка (form)</p>'
+                    '<pre>{form}</pre>'
+                ).format(form=pformat(form.errors)))
+
+                context = self.get_context_data(**kwargs)
+                context.update({'form': form})
+                # context.update({'photos': WorkSellPhoto.objects.filter(worksell__id=)})
+                return render(request, self.template_name, context)
 
 
 class WorkSellUpdateView(UpdateView):