<form class="form-horizontal">
    <div class="form-group">
        <label for="Name">Name</label>
        <input class="form-control" type="text" name="Name" data-bind="value: Name"/>
    </div>
    <div class="form-group">
        <label for="VerticalAxisLabel">Vertical Axis Title</label>
        <input class="form-control" type="text" name="VerticalAxisLabel" data-bind="value: VerticalAxisLabel"/>
    </div>
    <div class="form-group">
        <label for="HorizontalAxisLabel">Horizontal Axis Title</label>
        <input class="form-control" type="text" name="HorizontalAxisLabel" data-bind="value: HorizontalAxisLabel"/>
    </div>
    <div class="form-group">
        <label for="HorizontalAxis">Axis Values</label>
        <select class="form-control" name="HorizontalAxis" data-bind="options: NumericOrDatetimeInputColumns, value: HorizontalAxis"></select>
    </div>
    <h3>Plot the following columns:</h3>
    <p class="helpText">Drag columns into the list on the right and re-order as required. Click the 'x' button to remove columns from the list.</p>
    <div class="form-group">
        <div class="leftSettingsColumn">
            <ul class="connectedColumnList" data-bind="foreach: NumericInputColumnInfos">
                <li class="availableColumn blockItem" data-bind="attr: { 'data-bind-col-index': Index }, draggable_column: $data"> <span data-bind="text: Name"></span></li>
            </ul>
            <button class="btn btn-default" data-bind="click: AddAll" style="float:right">add all</button>
        </div>
        <div class="rightSettingsColumn">
            <ul class="connectedColumnList" data-bind="foreach: DataSeriesColumnIndexes, sortable_column_list: { data: DataSeriesColumnIndexes }">
                <li class="selectedColumn blockItem" data-bind="attr: { 'data-bind-col-index': $data }">
                    <span class="selectedColumn blockItemText" data-bind="text: $parent.GetColumnName($data)"></span>
                    <button class="btn btn-sm blockItemRemoveButton" data-bind="click: $parent.RemoveItem">x</button>
                </li>
            </ul>
            <button class="btn btn-default"  data-bind="click: RemoveAll">remove all</button>
        </div>
    </div>
</form>
