<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController" class="usky-grid usky-grid-configuration">
    <div style="max-width: 600px">
        <div class="control-group uSky-templates">

            <h4><localize key="grid_gridLayouts"/></h4>
            <p><localize key="grid_gridLayoutsDetail" /></p>

            <ul class="unstyled"
                ui-sortable
                ng-model="model.value.templates">

                <li ng-repeat="template in model.value.templates" class="clearfix">

                    <div ng-click="configureTemplate(template)"
                         class="preview-rows layout" style="margin-top: 5px; margin-bottom: 20px; float:left">

                        <div class="preview-row">
                            <div class="preview-col"
                                 ng-class="{last:$last}"
                                 ng-repeat="section in template.sections | filter:zeroWidthFilter"
                                 ng-style="{width: percentage(section.grid) + '%', height: '60px', 'max-width': '100%'}">
                                <div class="preview-cell"></div>
                            </div>
                        </div>
                    </div>

                    <div>
                        {{template.name}} <br />
                        <i class="icon-delete red"></i>
                        <a class="btn btn-small btn-link"
                           href
                           ng-click="deleteTemplate($index)"><localize key="general_delete" /></a>
                    </div>

                </li>
            </ul>

            <button class="btn btn-small"
                    prevent-default
                    ng-click="configureTemplate()">
                    <i class="icon-add"></i> <localize key="grid_addGridLayout" />
            </button>
        </div>
    </div>
    <div style="max-width: 600px">

        <div class="control-group uSky-templates">

            <h4><localize key="grid_rowConfigurations" /></h4>
            <p><localize key="grid_rowConfigurationsDetail" /></p>

            <div class="control-group uSky-templates-rows">
                <ul class="unstyled"
                    ui-sortable
                    ng-model="model.value.layouts">

                    <li ng-repeat="layout in model.value.layouts" class="clearfix">

                        <div ng-click="configureLayout(layout)"
                            class="preview-rows columns" style="margin-top: 5px; margin-bottom: 25px; float:left">

                            <div class="preview-row">
                                <div class="preview-col"
                                    ng-class="{last:$last}"
                                    ng-repeat="area in layout.areas | filter:zeroWidthFilter"
                                    ng-style="{width: percentage(area.grid) + '%', 'max-width': '100%'}">

                                    <div class="preview-cell"></div>
                                </div>
                            </div>
                        </div>

                        <div>
                            {{layout.label || layout.name}}<br />
                            <i class="icon-delete red"></i>
                            <a class="btn btn-small btn-link" href ng-click="deleteLayout($index)">
                                <localize key="general_delete" />
                            </a>
                        </div>

                    </li>
                </ul>

                <button class="btn btn-small" prevent-default ng-click="configureLayout()">
                    <i class="icon-add"></i> <localize key="grid_addRowConfiguration" />
                </button>

            </div>
        </div>

    </div>


    <div style="max-width: 600px">

        <umb-control-group
            label="@grid_columns"
            description="@grid_columnsDetails">
                <input type="number" min="1" ng-model="model.value.columns" />
        </umb-control-group>

        <umb-control-group
            label="@grid_settings"
            description="@grid_settingsDetails">

            <ul class="unstyled list-icons umb-contentpicker"
                ui-sortable
                ng-model="model.value.config">

                <li ng-repeat="configValue in model.value.config">
                    <i class="icon icon-navigation handle"></i>

                    <a href="#" prevent-default ng-click="removeConfigValue(model.value.config, $index)">
                        <i class="icon icon-delete red hover-show"></i>
                        <i class="icon-settings-alt-2 hover-hide"></i>
                        {{configValue.label}}
                    </a>
                </li>
            </ul>

            <ul class="unstyled list-icons">
                <li>
                    <i class="icon icon-add turquoise"></i>

                    <a href="#" ng-click="editConfig()" prevent-default>
                        <localize key="general_edit" />
                    </a>
                </li>
            </ul>
        </umb-control-group>



        <umb-control-group
            label="@grid_styles"
            description="@grid_stylesDetails">

            <ul class="unstyled list-icons umb-contentpicker"
                ui-sortable
                ng-model="model.value.styles">

                <li ng-repeat="style in model.value.styles">
                    <i class="icon icon-navigation handle"></i>

                    <a href="#" prevent-default ng-click="removeConfigValue(model.value.styles, $index)">
                        <i class="icon icon-delete red hover-show"></i>
                        <i class="icon-brush hover-hide"></i>
                        {{style.label}}
                    </a>

                </li>
            </ul>

            <ul class="unstyled list-icons">
                <li>
                    <i class="icon icon-add turquoise"></i>
                    <a href="#" ng-click="editStyles()" prevent-default>
                        <localize key="general_edit" />
                    </a>
                </li>
            </ul>
        </umb-control-group>
    </div>

    <umb-overlay
      ng-if="layoutConfigOverlay.show"
      model="layoutConfigOverlay"
      view="layoutConfigOverlay.view"
      position="right">
    </umb-overlay>

    <umb-overlay
      ng-if="rowConfigOverlay.show"
      model="rowConfigOverlay"
      view="rowConfigOverlay.view"
      position="right">
    </umb-overlay>

    <umb-overlay
      ng-if="editConfigCollectionOverlay.show"
      model="editConfigCollectionOverlay"
      view="editConfigCollectionOverlay.view"
      position="right">
    </umb-overlay>

    <umb-overlay
      ng-if="rowDeleteOverlay.show"
      model="rowDeleteOverlay"
      view="rowDeleteOverlay.view"
      position="right">
    </umb-overlay>

</div>
