<div class="row">
    <style>
        textarea {
            resize: none;
        }

        .sortable-placeholder {
            background-color: #eee;
            border: dashed 2px #aaa;
            height: 40px;
        }

        .sortable-selected {
        }

            .sortable-selected input,
            .sortable-selected select,
            .sortable-selected textarea {
                background-color: #eeffff;
            }

        .float-wrapper {
            display: inline-block;
            vertical-align: middle;
            zoom: 1;
            width: 49%;
            overflow: hidden;
        }

        .bootstrap-wrapper .panel-body.webform-row {
            padding: 0px;
        }

        .webform-column {
            padding-top: 15px;
            padding-bottom: 15px;
        }

            .webform-column:not(:last-child) {
                border-right: 1px solid #ddd;
            }
    </style>

    <div class="col-md-4" id="formlyToolbox">
        <div class="panel panel-default">
            <div class="panel-heading">
                Toolbox
            </div>
            <div class="panel-body">
                <div>
                    <div class="row">
                        <div class="col-md-6">
                            <div draggable="toolboxOptions"
                                 ng-model="vm.toolboxFields.column1"
                                 ng-repeat="field in vm.toolboxFields.column1">

                                <formly-field options="field"
                                              editmode="false"
                                              class="formly-field"
                                              form-value="result[field.key||$index]"
                                              form-id="options.uniqueFormId"
                                              index="$index">
                                </formly-field>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div draggable="toolboxOptions"
                                 ng-model="vm.toolboxFields.column2"
                                 ng-repeat="field in vm.toolboxFields.column2">

                                <formly-field options="field"
                                              editmode="false"
                                              class="formly-field"
                                              form-value="result[field.key||$index]"
                                              form-id="options.uniqueFormId"
                                              index="$index">
                                </formly-field>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6" id="formlyFormular">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="float-wrapper">
                    <div class="pull-left">
                        {{"Form" | translate}}
                    </div>
                </div>
                <div class="float-wrapper">
                    <div class="pull-right">
                        <a style="cursor: pointer;font-weight: bold;"
                           ng-click="vm.addRow()">
                            {{"Add row" | translate}}
                        </a>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="bs-callout bs-callout-info">
                    <form class="formly"
                          role="form"
                          name="{{options.uniqueFormId}}">

                        <div ui-sortable="vm.rowSortOptions"
                             ng-model="vm.rows">
                            <div ng-repeat="row in vm.rows">
                                <label style="float: right;"
                                       class="formlyEditDelete">
                                    <a ng-click="vm.editRow(row)">
                                        {{"Edit" | translate}}
                                    </a>
                                    <span ng-show="vm.rows.length > 1">|</span>
                                    <a ng-click="vm.deleteRow(row)"
                                       ng-show="vm.rows.length > 1">
                                        {{"Delete" | translate}}
                                    </a>
                                </label>
                                <label>
                                    {{"Row" | translate}}
                                </label>
                                <div class="panel panel-default">
                                    <div class="panel-body webform-row">
                                        <div ng-repeat="column in row.columns"
                                             style="min-height: 150px;"
                                             sortable="vm.fieldSortOptions"
                                             ng-model="column.fields"
                                             class="fieldContainer webform-column"
                                             ng-class="row.columnSizeClass">

                                            <div ng-repeat="field in column.fields"
                                                 ng-class='{ "sortable-selected": field == vm.settingsField }'>
                                                <formly-field options="field"
                                                              editmode="true"
                                                              class="formly-field"
                                                              form-value="result[field.key||$index]"
                                                              form-id="options.uniqueFormId"
                                                              index="$index">
                                                </formly-field>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2" id="formlySettings">
        <div class="panel panel-default">
            <div class="panel-heading">
                {{"Field settings" | translate}}
            </div>
            <div class="panel-body" ng-hide="vm.settingsField">
                {{"Choose a field to edit its settings" | translate}}
            </div>
            <div class="panel-body" ng-show="vm.settingsField">
                <div wizdom-include="'Webform/Templates/formly/formly-settings.html'">
                </div>
            </div>
        </div>
    </div>
</div>
