<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 class="tile-icon" icon="module.Icon"></wizdom365-icon>
                                </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>