<div class="wizdom-container">

    <div class="wizdom-wrapper" ng-show="!currentModule">

        <div class="wizdom-left-nav">
            <div class="tags-wrapper">
                <input class="form-control wizdom-modules-search" type="search" placeholder="{{ (tabName && tabName.toLowerCase()=='admin'?'Search pages':'Search modules') | translate}}" ng-model="search.Title" />
            </div>

            <ul class="nav nav-stacked lt-order-list">
                <li role="presentation" class="wizdom-subcategory-title lt-order-list__item" ng-repeat="order in orders">                    
                    <a href="" ng-class="{'active' : order === currentOrder}" ng-click="selectOrder(order)">
                        <i class="streamline" ng-class="order.ascending ? 'icon-reorder-down' : 'icon-reorder-up'"></i>
                        {{order.name | translate}}
                    </a>
                </li>
            </ul>
        </div>

        <div class="wizdom-main">
            <div class="container-fluid lt-modules" style="width:100%">
                
                <h1 ng-if="!adminModules && !enableCustomModules"  class="remove-top-margin">Modules</h1>
                <h1 ng-if="!adminModules && enableCustomModules"  class="remove-top-margin">Custom Modules</h1>
                <h1 ng-if="adminModules"  class="remove-top-margin">Admin</h1>
                
                <div ng-class="{'col-xs-11':enableCustomModules}" style="padding-left:0px;">
                    <h3 ng-show="search.Title.length > 0">{{('Search for' | translate) + ": " + search.Title}}</h3>
                    <h3 ng-show="!loading && viewModules.length == 0">{{'No results' | translate}}</h3>

                    <wizdom365-spinner class="spinner" loading="loading"></wizdom365-spinner>
                    <div style="display:block;">
                        <ul class="lt-tiles">
                            <li class="lt-tiles__item" ng-repeat="module in viewModules = (modules | filter:search | orderBy:currentOrder.field:!currentOrder.ascending)" ng-click="selectModule(module)" ng-class="{'lt-tiles__item--disabled' : module.ModuleUrl && !module.Enabled}">
                                <div class="lt-tiles__icon">
                                    <wizdom365-icon ng-if="module.Title !== 'Viva Engage Integration'" class="tile-icon" icon="module.Icon"></wizdom365-icon>
                                    <svg ng-if="module.Title === 'Viva Engage Integration'" class="tile-icon" fill="currentColor" width="40" height="40" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9635 4.05903C13.5889 1.63531 10.9854 0 8 0C3.58172 0 0 3.58172 0 8V20.5H0.00868921C0.223301 26.7971 3.81055 32 10.5 32C12.6089 32 14.5384 31.3224 16.0241 30.2004C17.5797 31.3488 19.5542 32 21.5 32C22.3498 32 23.1704 31.89 23.9447 31.6852C30.3273 30.2199 31.8595 23.992 31.9904 20.5H32L32 8C32 3.58172 28.4183 0 24 0C21.0146 0 18.4111 1.63531 17.0364 4.05904C16.6964 4.02004 16.3505 4 16 4C15.6495 4 15.3036 4.02004 14.9635 4.05903ZM12.9065 4.54574C11.8204 3.00582 10.0277 2 8 2C4.68629 2 2 4.68629 2 8V10.9503C3.36202 13.2576 5.16461 15.5041 7.69969 16.4853C7.24905 15.4133 7 14.2357 7 13C7 9.11636 9.45986 5.80725 12.9065 4.54574ZM10.2521 16.9963C10.3341 16.9988 10.4168 17 10.5 17C12.5975 17 14.5176 17.6704 16 18.7815C17.4824 17.6704 19.4025 17 21.5 17C21.5832 17 21.6659 16.9988 21.7479 16.9963C22.5372 15.8632 23 14.4856 23 13C23 9.13401 19.866 6 16 6C12.134 6 9 9.13401 9 13C9 14.4856 9.46281 15.8632 10.2521 16.9963ZM24.3003 16.4853C26.8354 15.5041 28.638 13.2576 30 10.9503L30 8C30 4.68629 27.3137 2 24 2C21.9723 2 20.1796 3.00582 19.0935 4.54574C22.5401 5.80726 25 9.11636 25 13C25 14.2357 24.7509 15.4133 24.3003 16.4853ZM21.5 30C20.01 30 18.6005 29.5445 17.4774 28.7845C18.4372 27.5699 19 26.0929 19 24.5C19 22.8968 18.4299 21.411 17.4588 20.192C18.5376 19.4574 19.9198 19 21.5 19C25.36 19 28.0746 16.903 30 14.4937V20.2076L29.9918 20.4251C29.9341 21.9659 29.5626 24.0652 28.5596 25.8887C27.5878 27.6555 26.0406 29.152 23.4972 29.7359L23.4651 29.7432L23.4332 29.7517C22.8257 29.9124 22.1769 30 21.5 30ZM2 20.211L2.00753 20.4319C2.10329 23.2416 2.948 25.6525 4.35552 27.3224C5.72423 28.9463 7.72747 30 10.5 30C14.3324 30 17 27.3097 17 24.5C17 21.6903 14.3324 19 10.5 19C6.64004 19 3.92538 16.903 2 14.4937V20.211Z" />
                                    </svg>
                                </div>
                                <div class="lt-tiles__title">
                                    {{module.Title | translate}}
                                    <div title="{{'Edit' | translate}}" ng-click="openModule({module:module});$event.stopPropagation()" ng-if="enableCustomModules && module.ModuleUrl" class="lt-tiles__edit">
                                        <i class="glyphicon glyphicon-pencil"></i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div ng-class="{'col-xs-1':enableCustomModules}" style="position:relative;" ng-if="enableCustomModules">
                    <button style="position:absolute; top:15px; right:15px;" class="btn btn-primary" ng-click="openModule(null)">{{'Add' | translate}}</button>
                </div>
            </div>
        </div>
    </div>

    <!--Show Iframe custom module-->
    <div style="height:100%; overflow:hidden" ng-show="currentModule && currentModule.ModuleUrl">
        <iframe width="100%" height="100%" frameborder="0" ng-src="{{currentModule.TrustedModuleUrl}}"></iframe>
    </div>

    <div ng-show="currentModule && !currentModule.ModuleUrl" class="wizdom-wrapper" >
        <div class="wizdom-left-nav" ng-show="documentInfo.mode=='less'">
            <div class="wizdom-left-nav-inside">
                <p class="header">
                    <a href="" ng-click="currentModule.Backhandler && currentModule.Backhandler(); moveBack();">
                        <i class="streamline icon-arrow-left-1"></i><span>Back</span>
                    </a>
                </p>

                <ul class="nav nav-stacked">
                    <li role="presentation" class="wizdom-subcategory-title wizdom-subcategory-module-title">
                        {{currentModule.Title | translate}}
                    </li>
                </ul>

                <ul class="nav nav-stacked">
                    <li role="presentation" class="wizdom-subcategory-title" ng-repeat="page in currentModule.Pages">
                        <a href=""
                           ng-class="{'active' : page === currentPage}"
                           ng-click="selectPage(page)">
                            {{page.Title | translate}}
                            <i ng-if="page.Type == 'Link'" style="float:right" class="glyphicon glyphicon-new-window"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="wizdom-left-nav" ng-show="documentInfo.mode=='more'">
            <p class="header">
                <a href="" ng-click="moveBackToDocuments()">
                    <i class="streamline icon-arrow-left-1"></i>
                    {{documentInfo.title | translate}}
                </a>
            </p>
            <div class="panel panel-default" ng-hide="loading" ng-if="documentInfo.headings && documentInfo.headings.length>0">
                <div class="panel-heading">
                    <h1 class="panel-title">{{'Table of contents' | filter}}</h1>
                </div>
                <div class="panel-body current-document-view-toc">
                    <ul class="">
                        <li ng-repeat="heading in documentInfo.headings">
                            <a ng-click="scrollTo(heading.id)" href="{{'#' + heading.id}}">{{heading.title}}</a>
                            <ul ng-if="heading.subheadings.length > 0" class="">
                                <li ng-repeat="subheading in heading.subheadings">
                                    <a ng-click="scrollTo(subheading.id)" href="{{'#' + subheading.id}}">{{subheading.title}}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="wizdom-main">
            <div class="full-height" ng-if="currentPage.Type" ng-switch on="currentPage.Type">
                <div class="full-height" ng-switch-when="TemplateEditor">
                    <template-editor templates-provider="templatesProvider" folder="currentPage.Params"></template-editor>
                </div>
                <div class="full-height" ng-switch-when="CodeEditor">
                    <template-editor templates-provider="templatesProvider" folder="currentPage.Params.Path" mode="currentPage.Params.Type"></template-editor>
                </div>
                <div class="full-height lt-modules" ng-switch-when="ConfigEditor">
                    <config-editor node="currentPage.Params" title="currentPage.Title"></config-editor>
                </div>
                <div class="full-height lt-modules" ng-switch-when="Documentation">
                    <documentation module="currentPage.Params" tagid="currentPage.TagID"></documentation>
                </div>
                <div class="full-height lt-modules" ng-switch-when="Api">
                    <api module="currentPage.Params"></api>
                </div>
                <div class="full-height lt-modules" ng-switch-when="Permissions">
                    <module-permissions module="currentPage.Params"></module-permissions>
                </div>
                <div class="full-height" ng-switch-when="Iframe" style="overflow:hidden">
                    <iframe id="pageFrame" width="100%" height="100%" frameborder="0" ng-src="{{currentPage.Params.TrustedUrl}}" ng-onload="pageFrameLoad"></iframe>
                </div>
            </div>
            
            <div class="full-height" ng-class="!currentPage.UseFullWidthAndHeight ? 'lt-modules' : ''" ng-if="currentPage.Url" wizdom-include='currentPage.Url'></div>

        </div>

    </div>

</div>