<div ng-show="ctrl.overlayGrid.active" bs-panel-content>

    <div bs-inputs bs-grid="wide-4 desk-2">
        <div bs-grid-item>
            <div bs-input="text">
                <label for="grid-size" bs-input-label>Grid Size</label>

                <div bs-input>
                    <input type="text"
                           max="100"
                           min="0"
                           step="1"
                           id="grid-size"
                           size="20"
                           ng-change="ctrl.alter(ctrl.overlayGrid)"
                           ng-model="ctrl.overlayGrid.size"/>
                </div>
            </div>
        </div>
        <div bs-grid-item>
            <div bs-input="text">
                <label for="grid-color" bs-input-label>Grid Colour</label>

                <div bs-input>
                    <input type="text"
                           max="100"
                           min="0"
                           step="1"
                           id="grid-color"
                           size="20"
                           ng-change="ctrl.alter(ctrl.overlayGrid)"
                           ng-model="ctrl.overlayGrid.color"/>
                </div>
            </div>
        </div>
        <div bs-grid-item>
            <div bs-input="text">

                <label for="grid-selector" bs-input-label>CSS Selector</label>

                <div bs-input>
                    <input type="text"
                           max="100"
                           min="0"
                           step="1"
                           id="grid-selector"
                           size="20"
                           ng-change="ctrl.alter(ctrl.overlayGrid)"
                           ng-model="ctrl.overlayGrid.selector"/>
                </div>
            </div>
        </div>
    </div>
    <div bs-inputs bs-grid="wide-4 desk-2">
        <div bs-grid-item>
            <div bs-input="text">

                <label for="grid-offsetY" bs-input-label>Offset Top</label>

                <div bs-input>
                    <input type="text"
                           id="grid-offsetY"
                           size="20"
                           ng-change="ctrl.alter(ctrl.overlayGrid)"
                           ng-model="ctrl.overlayGrid.offsetY"/>
                </div>
            </div>
        </div>
        <div bs-grid-item>
            <div bs-input="text">

                <label for="grid-offsetX" bs-input-label>Offset Left</label>

                <div bs-input>
                    <input type="text"
                           id="grid-offsetX"
                           size="20"
                           ng-change="ctrl.alter(ctrl.overlayGrid)"
                           ng-model="ctrl.overlayGrid.offsetX"/>
                </div>
            </div>
        </div>
    </div>
    <div bs-inputs bs-grid="wide-4 desk-2">
        <div bs-grid-item>
            <div bs-input="inline">
                <input
                        type="checkbox"
                        id="grid-axis-y"
                        ng-model="ctrl.overlayGrid.vertical"
                        ng-change="ctrl.toggleAxis('vertical', ctrl.overlayGrid.vertical)"/>
                <label for="grid-axis-y" bs-input-label>Vertical Axis</label>
            </div>
        </div>
        <div bs-grid-item>
            <div bs-input="inline">
                <input
                        type="checkbox"
                        id="grid-axis-x"
                        ng-model="ctrl.overlayGrid.horizontal"
                        ng-change="ctrl.toggleAxis('horizontal', ctrl.overlayGrid.horizontal)"/>
                <label for="grid-axis-x" bs-input-label>Horizontal Axis</label>
            </div>
        </div>
    </div>
</div>