<form class="form-horizontal">
	<div id="dataListConfigCommon" style="margin-top: 10px;">
	    <div class="form-group">
	        <label class="col-lg-2 control-label" for="crudTitle"><b><?php echo __LBL_TITLE__;?></b> </label>
	        <div class="col-lg-6">
	            <input type="text" id="crudTitle" name="crud[title]" class="form-control" >
	        </div>
	    </div>
	    <div class="form-group">
	        <label class="col-lg-2 control-label" for="crudRowsPerPage"><b><?php echo __LBL_ROWS_PER_PAGE__;?></b>
	        </label>
	        <div class="col-lg-10">
	            <input type="text" style="width: 50px;" name="crud[rows_per_page]" id="crudRowsPerPage" class="form-control">
	        </div>
	    </div>
	    <div class="form-group">
	        <label class="col-lg-2 control-label" for="crudOrderField"><b><?php echo __LBL_ORDER_BY__;?></b> </label>
	        <div class="col-lg-10">
	            <select name="crud[order_field]" id="crudOrderField" class="form-control" style="width:220px; display:inline-block;">
	                <option value=""></option>
	                <?php foreach($this->fields as $f){ ?>
			         <option value="<?php echo $f['Field']; ?>"><?php echo $f['Field']; ?></option>
			        <?php } ?>
	            </select> 
	            <select style="width:80px; display:inline-block;" name="crud[order_type]" id="crudOrderType" class="form-control">
	                <option value=""></option>
	                <option value="asc"><?php echo __LBL_ORDER_ASC__;?></option>
	                <option value="desc"><?php echo __LBL_ORDER_DESC__;?></option>
	            </select>
	        </div>
	    </div>
            <div class="form-group">
                    <label class="col-lg-2 control-label" for="crudNoColumn"><b><?php echo __LBL_NO_COLUMN__;?></b></label>
                    <div class="col-lg-10">
                        <input type="checkbox" value="1" id="crudNoColumn">
                    </div>
                </div>
	    <div class="form-group">
	        <label class="col-lg-2 control-label"><b><?php echo __LBL_JOIN__;?></b> </label>
	        <div class="col-lg-10">
	        	<div id="dataListJoin" style="margin-bottom: 5px;"></div>
	            <input type="button" class="btn" value="Add join" id="addJoinButton"/>
	        </div>
	    </div>
	</div>


    <div class="row">
        <ul id="dataListConfigElement" class="nav nav-tabs">
            <li class="active"><a href="#filter" data-toggle="tab">
            	<?php echo __LBL_FILTER_ELEMENT__;?>
            </a></li>
            <li><a href="#column" data-toggle="tab"><?php echo __LBL_COLUMN_ELEMENT__;?></a></li>
        </ul>
        <div id="dataListConfigElementContent" class="tab-content">
            <div class="tab-pane fade in active" id="filter">
            	<br />
            	<div class="row-fluid">
	            	<div id="filter_container" class ="col-sm-4" style="padding-left:0px;">
	                	<ul class="list-group" id="filter_elements" style="list-style: none outside none;"></ul>
	                </div>
	           	</div>
            </div>
            <div class="tab-pane fade" id="column">
            	<br />
            	<div class="row-fluid">
				    <div id="column_container" class ="col-sm-4" style="padding-left:0px;">
					    <ul class="list-group" id="column_elements" style="list-style: none outside none;"></ul>
				    </div>
				</div>
            </div>
        </div>
    </div>

    <div align="center" style="padding-top:10px;">
        <input type="button" class="btn btn-primary" value="Save" id="btnSaveDataList" /> 
    </div>

</form>
<script>
$(function() {
    $( "#filter_elements" ).sortable({forcePlaceholderSize: true,placeholder: "ui-state-highlight"});
    $( "#column_elements" ).sortable({forcePlaceholderSize: true,placeholder: "ui-state-highlight"});
});
</script>
<hr />
<footer>
    <p><?php echo __LBL_COPYRIGHT__; ?></p>
</footer>
