<section class="healths container">
    <p>
    <div class="row">
        <div class="col-lg-12">

        </div>
    </div>
    </p>
    <div class="panel panel-default" data-bind="with: health">
        <div class="panel-heading clearfix">
            <h2 style="margin: 0" class="pull-left"><span class="fa fa-edit"></span> <span data-bind="editable: name, editableOptions: {emptytext: 'Empty health name', defaultValue: '', mode: 'inline', placeholder: 'Enter health name...'}"></span></h2>
            <div class="btn-group pull-right">
                <a href="javascript:void(0)" class="btn btn-primary" data-bind="click: $parent.save">Save</a>
                <a href="javascript:void(0)" class="btn btn-success" data-bind="click: $parent.saveClose">Save and Close</a>
                <a href="javascript:void(0)" class="btn btn-warning" data-bind="click: $parent.cancel">Cancel</a>
                <a href="javascript:void(0)" class="btn btn-danger" data-bind="click: $parent.deleteHealth">Delete</a>
                <a href="#healths" class="btn btn-success">Back</a>
            </div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-4">
                    <fieldset>
                        <legend>Description</legend>
                        <span data-bind="editable: description, editableOptions: {type: 'textarea', emptytext: 'Empty description...', placeholder: 'Enter health description...',mode: 'inline'}"></span>

                    </fieldset>
                </div>
                <div class="col-lg-8">
                    <fieldset>
                        <legend>Diseases <span class="fa fa-plus-circle pull-right text-success" data-bind="click: $parent.addDisease"></span></legend>
                        <!--ko if: $parent.editingDisease-->
                        <div data-bind="with: $parent.editingDisease">
                            <form class="form-horizontal" role="form" data-bind="submit: $parents[1].saveDisease" style="position: relative;">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Name</label>
                                    <div class="col-sm-10">
                                        <span data-bind="editable: name, editableOptions: {placeholder: 'Enter health disease...',mode: 'inline'}"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Description</label>
                                    <div class="col-sm-10">
                                        <span data-bind="editable: description, editableOptions: {type: 'textarea', placeholder: 'Enter disease description...', mode: 'popup'}"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Tags</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" placeholder="Tags" data-bind="
                                        value: selectedTagValues,
                                        item: $data,
                                        select2: {
                                            tags: $parents[1].allTags
                                        }">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Ois</label>
                                    <div class="col-sm-10">
                                        <span class="fa fa-plus-circle pull-right text-success" data-bind="click: $parents[1].addDirection"></span>
                                        <br/>
                                        <div data-bind="foreach: directions" class="list-group" style="clear: both;">
                                            <a class="list-group-item">
                                                <span style="min-width: 80px" class="label label-success" data-bind="
                                                editable: oilId, editableOptions: {
                                                    value: oilId,
                                                    type: 'select2',
                                                    source: $parents[2].oils(),
                                                    select2: {
                                                        placeholder: 'Select a Oil',
                                                        allowClear: true,
                                                        width: '230px'
                                                    }
                                                }"></span>
                                                <span data-bind="editable: direction, editableOptions: {type: 'textarea', inputclass: 'form-control', emptytext: 'Empty instruction', placeholder: 'Enter instruction...', mode: 'inline'}"></span>
                                                <span class="hide" data-bind="editable: params"></span>
                                                <span class="fa fa-minus-circle text-danger pull-right" data-bind="click: $parents[2].removeDirection"></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group" style="position: absolute; width: 300px;top: 0;right: 0;text-align: right;">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <a href="javascript:void(0)" class="btn btn-success btn-sm" data-bind="click: $parents[1].saveDisease">Save</a>
                                        <a href="javascript:void(0)" class="btn btn-warning btn-sm" data-bind="click: $parents[1].cancelDisease">Cancel</a>
                                        <a href="javascript:void(0)" class="btn btn-danger btn-sm" data-bind="click: $parents[1].removeDisease">Remove</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--/ko-->
                        <div class="list-group" data-bind="foreach: diseases" style="max-height: 260px;overflow: auto;">
                            <a href="javascript:void(0)" class="list-group-item" data-bind="click: $parents[1].editDisease, css: {'list-group-item-warning': $index() % 2}">
                                <h5 class="list-group-item-heading" data-bind="text: name"></h5>
                                <p class="list-group-item-text" data-bind="text: description"></p>
                            </a>
                        </div>
                    </fieldset>

            </div>
            </div>
        </div>
        <div class="panel-footer text-right">
            Panel content
        </div>
    </div>
</section>
