<section class="healths">
    <br/><br/>
    <div class="panel panel-default">
        <div class="panel-heading clearfix">
            <h2 style="margin: 0" class="pull-left"><span class="fa fa-home text-success"></span> Find Oils</h2>

            <div class="input-group pull-right">
                <input data-bind="value: filter, valueUpdate: 'keyup'" type="text" name="SearchDualList" class="form-control" placeholder="Enter health name..." />
            </div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-4">
                    <div class="list-group">
                    <a href="#" class="list-group-item disabled">
                        <h3>Healths</h3>
                    </a>
                    <!--ko if: healths().length-->
                        <!--ko foreach: healths-->
                        <a href="#" class="list-group-item" data-bind="click: $parent.activeHealth, css: {
                            'active': $data  == $parent.activeHealth()
                        }">
                            <h5 class="list-group-item-heading" data-bind="text: name"></h5>
                            <p class="list-group-item-text" data-bind="text: description"></p>
                        </a>
                        <!--/ko-->
                    <!--/ko-->
                    <!--ko ifnot: healths().length-->
                        <a href="#" class="list-group-item disabled">
                            No result.
                        </a>
                    <!--/ko-->
                    </div>
                </div>
                <div class="col-lg-4">
                    <div>
                        <div class="list-group">
                            <a href="#" class="list-group-item disabled">
                                <h3>Diseases</h3>
                            </a>
                            <!--ko if: activeHealth-->
                                <!--ko with: activeHealth-->
                                    <!--ko if: diseases().length-->
                                    <!--ko foreach: diseases-->
                                    <a href="#" class="list-group-item" data-bind="click: $parents[1].activeDisease, css: {
                                        'active': $data  == $parents[1].activeDisease()
                                    }">
                                        <h5 class="list-group-item-heading" data-bind="text: name"></h5>
                                        <p class="list-group-item-text" data-bind="text: description"></p>
                                    </a>
                                    <!--/ko-->
                                    <!--/ko-->
                                    <!--ko ifnot: diseases().length-->
                                    <a href="#" class="list-group-item disabled">
                                        No result.
                                    </a>
                                    <!--/ko-->
                                <!--/ko-->
                            <!--/ko-->

                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="list-group">
                        <a href="#" class="list-group-item disabled">
                            <h3>Oils</h3>
                        </a>
                        <!--ko if: oils().length-->
                            <!--ko foreach: oils-->
                            <!--ko if: oil-->
                            <a href="#" class="list-group-item" data-bind="">
                                <h5 class="list-group-item-heading" data-bind="text: oil().name"></h5>
                                <pre>
                                    <p class="list-group-item-text" data-bind="html: direction"></p>
                                </pre>
                            </a>
                            <!--/ko-->
                            <!--/ko-->
                        <!--/ko-->

                    </div>
                </div>
            </div>


        </div>
        <div class="panel-footer text-right">Copyright @ 2014</div>
    </div>
</section>
