<nav class="navbar">
    <div class="container-toolbar container-fluid">
        {{!-- Menu items/tabs --}}
        <div class="left-area">
            <div class="back-button">
                <a id="backBtn" class="btn btn-lg" href="{{ exitURL }}">
                    <i class="fa fa-caret-left"></i>
                    <span>{{trans.exit}}</span>
                </a>
            </div>

            <div id="layoutInfo" class="navbar-text layout-info">
                <span id="layout-info-status" class="badge badge-default" 
                    data-status-code="" 
                    data-toggle="popover"
                    data-trigger="hover" 
                    data-placement="right"
                    data-html="true">
                    <i class="fa fa-spinner fa-spin"></i>
                </span>

                <span class="layout-info-name" 
                    data-toggle="tooltip" 
                    data-placement="bottom"
                    data-container=".editor-top-bar" 
                    data-title="{{trans.nameDetail}}">
                    <i class="fa fa-tag layout-info-icon" title="{{trans.name}}"></i>
                    <span>"{{mainObject.name}}"</span>
                </span>

                <span class="layout-info-duration"
                    data-toggle="tooltip" 
                    data-placement="bottom"
                    data-container=".editor-top-bar" 
                    data-title="{{trans.durationDetail}}">
                    <i class="fa fa-clock-o layout-info-icon" title="{{trans.duration}}"></i>
                    <span class="layout-info-duration-value">{{mainObject.durationFormatted}}</span>
                </span>

                <span class="layout-info-dimensions"
                    data-toggle="tooltip" 
                    data-placement="bottom"
                    data-container=".editor-top-bar" 
                    data-title="{{trans.dimensionsDetail}}">
                    <i class="fa fa-arrows layout-info-icon" title="title="{{trans.dimensions}}""></i>
                    <span>{{mainObject.width}}x{{mainObject.height}}</span>
                </span>
            </div>
        </div>

        {{!-- Right menu --}}
        <ul class="layout-action-menu nav">
            {{!-- Interactive control --}}
            <li class="nav-item interactive-control" data-status="off">
                <div class="interactive-control-container">
                    <i class="fa fa-paper-plane"></i>
                    <div class="interactive-control-label">{{trans.interactiveToggle.mode}}</div>
                    <div class="interactive-control-status-on">{{trans.interactiveToggle.on}}</div>
                    <div class="interactive-control-status-off">{{trans.interactiveToggle.off}}</div>
                </div>
            </li>

            {{!-- Layout select dropdown --}}
            <li>
                <div id="layoutJumpListContainer" data-toggle="tooltip" data-placement="bottom" data-container=".editor-top-bar" data-title="{{trans.changeLayout}}"
                    class="navbar-btn d-none">
                </div>
            </li>

            {{!-- Options menu --}}
            {{#if showOptions}}
                <li class="nav-item dropdown navbar-submenu navbar-submenu-options hide-on-lock">
                    <a id="optionsContainerTop" class="nav-link dropdown-toggle option-container" data-toggle="dropdown" role="button"
                        aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-bars" data-toggle="tooltip" data-container=".editor-top-bar" data-placement="top"
                            data-title="{{trans.options}}"></i>
                    </a>
                
                    <div class="dropdown-menu dropdown-menu-right navbar-submenu-container navbar-submenu-options-container" aria-labelledby="optionsContainerTop">
                        {{#each customDropdownOptions}}
                            {{#if isDivider}}
                                <div class="dropdown-divider"></div>
                            {{else}}
                                <a class="dropdown-item">
                                    <div id="{{id}}" class="navbar-submenu-item {{class}}" href="#">
                                        {{#if logo}}
                                            <i class="{{logo}}"></i>
                                        {{/if}}
                                        <span>{{title}}</span>
                                    </div>
                                </a>
                            {{/if}}
                        {{/each}}

                        {{#if customDropdownOptions}}
                            <div class="dropdown-divider"></div>
                        {{/if}}
                        
                        <a class="dropdown-item">
                            <label class="navbar-submenu-item navbar-submenu-item-options displayTooltips-container tooltip-always-on"
                                for="displayTooltips" data-toggle="tooltip" data-container=".editor-top-bar" data-placement="left" data-title="{{trans.displayTooltipsTitle}}"
                                accesskey="">
                                <input type="checkbox" id="displayTooltips" name="displayTooltips"
                                    {{#if displayTooltips}}checked{{/if}}>
                                <span>{{trans.displayTooltipsName}}</span>
                            </label>
                        </a>

                        <a class="dropdown-item">
                            <label class="navbar-submenu-item navbar-submenu-item-options deleteConfirmation-container tooltip-always-on"
                                for="deleteConfirmation" data-toggle="tooltip" data-container=".editor-top-bar" data-placement="left" data-title="{{trans.deleteConfirmationTitle}}"
                                accesskey="">
                                <input type="checkbox" id="deleteConfirmation" name="deleteConfirmation"
                                    {{#if deleteConfirmation}}checked{{/if}}>
                                <span>{{trans.deleteConfirmationName}}</span>
                            </label>
                        </a>
                    </div>
                </li>
            {{/if}}
        </ul>
    </div>
</nav>