<div class="wizdom-container">
    <div class="wizdom-wrapper" ng-show="!currentDocumentation">
        <div class="wizdom-left-nav">
            <div class="tags-wrapper" ng-show="currentFilter.type<3">
                <input class="form-control" ng-class="selectedFilterItems.length==0?'search-no-margin':'search-margin'" type="text" placeholder="{{ 'Search' | translate}} {{currentFilter.name}}" ng-model="query"
                        ng-keydown="searchboxKeydownEvent($event)" typeahead="tag for tag in tags | startWith:$viewValue" typeahead-on-select="tagSelected($item)" typeahead-append-to-body="true" />
                <ul class="tags-container" ng-if="selectedFilterItems.length>0">
                    <!--<li ng-repeat="filterItem in selectedFilterItems" class="label btn-lg tag" ng-class="filterItem.type=='tag'?'label-default':'label-info'">
                        <h6><i class="ms-Icon ms-Icon--Cancel" ng-click="tagRemoved(filterItem)"></i><span>{{filterItem.text}}</span></h6>
                    </li>-->
                    <li ng-repeat="filterItem in selectedFilterItems" class="label btn-lg tag">
                        <h6><i class="ms-Icon ms-Icon--Cancel" ng-click="tagRemoved(filterItem)"></i><span class="filter-text">{{filterItem.text}}</span></h6>
                    </li>
                </ul>
            </div>
            <ul class="nav nav-stacked documentation-type">
                <li role="presentation" class="wizdom-subcategory-title" ng-repeat="filter in filterBys">
                    <a href=""
                       ng-class="{'active' : filter === currentFilter}"
                       ng-click="selectFilter(filter)">{{filter.name | translate}}</a>
                </li>
            </ul>
        </div>

        <div class="wizdom-main documentations">
            <div class="documentations-wrapper" ng-if="currentFilter.type<3">
                <wizdom365-spinner class="spinner" loading="loading"></wizdom365-spinner>

                <div class="row grid" ng-if="(documents || documents.length > 0)">
                    <div class="col-lg-3 col-md-4 col-sm-6 grid-item" ng-repeat="item in documents | documentTagsContains:selectedFilterItems">
                        <div class="pane article-pane" ng-if="item.type === 0">
                            <!--Articles-->
                            <h3 class="remove-top-margin cursor-pointer" ng-click="showArticle(item)" title="{{item.title}}">
                                {{item.title | filter}}
                            </h3>
                            <div class="content-preview cursor-pointer" ng-bind-html="item.shortContent" ng-click="showArticle(item)"></div>
                            <hr />
                            <div class="content-created">
                                <span class="ms-Icon ms-Icon--Recent"></span><span am-time-ago="(item.created | date:'medium')"></span>
                            </div>
                            <div class="content-modified">
                                <span class="glyphicon glyphicon-pencil"></span><span am-time-ago="(item.lastModified | date:'medium')"></span>
                            </div>
                        </div>
                        <div class="pane video-pane" ng-if="item.type === 1">
                            <!--Videos-->
                            <h3 class="remove-top-margin" title="{{item.title}}">
                                <a ng-click="showVideo()">{{item.title | filter}}</a>
                            </h3>
                            <div class="content-description">
                                {{item.description}}
                            </div>
                            <div class="content-preview">
                                <azure-player video="item"></azure-player>
                            </div>
                            <hr />
                            <div class="content-created">
                                <span class="ms-Icon ms-Icon--Recent"></span><span am-time-ago="(item.created | date:'medium')"></span>
                            </div>
                            <div class="content-modified">
                                <span class="glyphicon glyphicon-pencil"></span><span am-time-ago="(item.lastModified | date:'medium')"></span>
                            </div>
                        </div>
                        <div class="pane article-pane" ng-if="item.type === 2">
                            <!--Release Notes-->
                            <h3 class="remove-top-margin cursor-pointer" ng-click="showArticle(item)" title="{{item.title}}">
                                {{item.title | filter}}
                            </h3>
                            <div class="content-preview cursor-pointer" ng-bind-html="item.shortContent" ng-click="showArticle(item)"></div>
                            <hr />
                            <div class="content-created">
                                <span class="ms-Icon ms-Icon--Recent"></span><span am-time-ago="(item.created | date:'medium')"></span>
                            </div>
                            <div class="content-modified">
                                <span class="glyphicon glyphicon-pencil"></span><span am-time-ago="(item.lastModified | date:'medium')"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="alert alert-info" ng-if="!loading && (!documents || documents.length === 0)">{{"No results found" | translate}}</div>
            </div>
        </div>
    </div>

    <div class="wizdom-wrapper documentations" ng-show="currentDocumentation">
        <div class="wizdom-left-nav">
            <p class="header">
                <a href="" ng-click="moveBack()">
                    <i class="streamline icon-arrow-left-1"></i><span>Back</span>
                    {{currentDocumentation.title | translate}}
                </a>
            </p>
            <div class="panel panel-default" ng-hide="loading" ng-if="currentDocumentation.headings && currentDocumentation.headings.length>0">
                <div class="panel-heading">
                    <div class="panel-title">{{'Table of contents' | filter}}</div>
                </div>
                <div class="panel-body current-document-view">
                    <ul class="">
                        <li ng-repeat="heading in currentDocumentation.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 current-document-view">
            <wizdom365-spinner class="spinner" loading="loading"></wizdom365-spinner>
            <div class="article-container" ng-hide="loading">
                <div class="wizdom-article-container link-collection-content wizdom-link-collection" ng-bind-html="currentDocumentation.content | wizdom365TrustHtml:true"></div>
            </div>
            <div ng-if="currentDocumentation.type==1 && currentDocumentation.link" class="vh80percent">
                <azure-video-player videolink="currentDocumentation.link"></azure-video-player>
            </div>
        </div>
    </div>
</div>
