define([], function () { return '\
<div class="container-fluid" data-bind="template: { afterRender: afterRender }">\
    <div class="row">\
        <div class="col-xs-4 navbar-column">\
            <div class="volume-container">\
                <div class="slider-left"></div>\
                <div class="slider-right"></div>\
                <div class="slider-middle">\
                    <div id="volume-slider" data-bind="attr: { \'data-label\': $parent.caption.sliderVolume }"></div>\
                </div>\
            </div>\
        </div>\
        <div class="col-xs-4 navbar-column">\
            <div class="nav navbar-nav">\
                <div data-bind="css: { disabled: !$parent.goBack.canExecute() }">\
                    <button class="navigation-back-link" data-bind="command: $parent.goBack, attrOnce: { \'aria-label\': $parent.caption.navigateBack }"></button>\
                </div>\
                <div data-bind="css: { disabled: !$parent.goForward.canExecute() }">\
                    <button class="navigation-forward-link" data-bind="command: $parent.goForward, hasFocus: $parent.isGoForwardFocused, attrOnce: { \'aria-label\': $parent.caption.navigateForward }" aria-disabled="false"></button>\
                </div>\
            </div>\
        </div>\
        <div class="col-xs-4 navbar-column">\
            <div class="zoom-container">\
                <div class="slider-left"></div>\
                <div class="slider-right"></div>\
                <div class="slider-middle">\
                    <div id="zoom-slider" data-bind="attr: { \'data-label\': $parent.caption.sliderZoom }"></div>\
                </div>\
            </div>\
        </div>\
    </div>\
</div>\
'; });
