app/views/templates/vertical_layout.scala.html

<script type="text/html" id="vertical_layout">
    <div class="column" data-bind="css: {
        'narrow': style.isNarrow()
    }">

        <div class="columnPane configPane" data-bind="slideIn: layout.configVisible">
            <div>
                <i class="fa fa-plus-circle" data-bind="click: layout.addColumn.bind(layout)"></i>
                <i class="fa fa-minus-circle" data-bind="click: layout.removeColumn.bind(layout)"></i>

                <br>
                <div data-bind="foreach: layout.availableColumns">
                    <div data-bind="
                        click: $parent.layout.setType.bind($parent.layout, layoutType, $parent),
                        attr: {
                            class: 'checkbox checkbox-' + layoutType
                        }
                    ">
                        <label>
                            <input type="checkbox" data-bind="checked: $parent['is' + layoutType]">
                            <span class="check"></span>
                            <strong data-bind="text: title"></strong>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <section class="columnPane contentPane" data-bind="
            css: {
                'contentPane-configVisible': layout.configVisible
            },
            component: component
        "></section>
    </div>
</script>

<script type="text/html" id="checkbox">
    <label>
        <input type="checkbox" data-bind="checked: checked">
        <span class="check"></span>
        <strong data-bind="text: label"></strong>
    </label>
</script>