@{
/*********************************************************
 * Approval Details Start
 *********************************************************/
}
<fieldset data-section-id="AD">
    <legend data-role="request-header">APPROVAL DETAILS</legend>
    <section data-role="field-container" class="field-container" data-bind="enable: isEnabled()">
        <hgroup row-display data-bind="visible: approverOne()">
            <h2>Approver 1:</h2>
            <label>Do you approve this request?:</label>
            <br />
            <input type="radio" value="true" name="approverOneButtons" id="approverOneButtonYes" data-bind="checked: value.ApproverOneApproved" />Yes
            <input type="radio" value="false" name="approverOneButtons" id="approverOneButtonNo" data-bind="checked: value.ApproverOneApproved" />No
            <textarea id="approverOneComment" type="text" data-bind="value: value.ApproverOneComment" rows="5" style="width: 95%"></textarea>
        </hgroup>
        <hgroup row-display data-bind="visible: approverTwo()">
            <h2>Approver 2:</h2>
            <label>Do you approve this request?:</label>
            <br />
            <input type="radio" value="true" name="approverTwoButtons" id="approverTwoButtonYes" data-bind="checked: value.ApproverTwoApproved" />Yes
            <input type="radio" value="false" name="approverTwoButtons" id="approverTwoButtonNo" data-bind="checked: value.ApproverTwoApproved" />No
            <textarea id="approverTwoComment" type="text" data-bind="value: value.ApproverTwoComment" rows="5" style="width: 95%"></textarea>
        </hgroup>
    </section>
</fieldset>
<script type="text/javascript">
    $.extend(ViewModel.prototype, {        
        approverOne: function (e) {
            var s = this;
            return s._cts() == 5 || s._cts() == 7 || s._cts() == null;
        },

        approverTwo: function (e) {
            var s = this;
            return s._cts() == 6 || s._cts() == 7 || s._cts() == null;
        },

        isEnabled: function (e) {
            var s = this;
            return s._cis() != 7;
        },

        /*methods are called from init.cshtml*/
        ADValidate: function (e) {
            var s = this;
            var v = s.value;
            var _v = app.utils.validator;

            if (s._cts() == 5) {
                _v.isModelFieldEmpty("value.ApproverOneApproved", "Approver One Button", e.r);
                _v.isModelFieldEmpty("value.ApproverOneComment", "Approver One Comment", e.r);
            }
            if (s._cts() == 6) {
                _v.isModelFieldEmpty("value.ApproverTwoApproved", "Approver Two Button", e.r);
                _v.isModelFieldEmpty("value.ApproverTwoComment", "Approver Two Comment", e.r);
            }
        },

        ADIsEnabled: function () {
            return true;
        },

        ADIsHidden: function () {
            var s = this,
                v = s.value;
            return s._cis() < 4;
        },

        ADIsCollapsed: function () {
            return false;
        }
    });
</script>
@{
/*********************************************************
 * Approval Details End
 *********************************************************/
}