<div class="wizdom-documentation-container">
    <div class="full-height" ng-show="!currentDocumentation">
        <wizdom365-spinner class="spinner" loading='loading'></wizdom365-spinner>

        <h1>{{documentation.title | filter}}</h1>

        <div class="grid">
            <div class="grid-sizer"></div>

            <div class="grid-item col1" ng-repeat="article in documentation">
                <div class="pane video-pane" ng-if="article.type === 1">
                    <h3 class="remove-top-margin">
                        <a ng-click="showVideo(article)">{{article.title | filter}}</a>
                    </h3>

                    <div class="content-description" ng-bind-html="article.content | wizdom365SmartHtmlStrip:300">
                    </div>

                    <div class="content-preview">
                        <a href="" ng-click="showVideo(article)">
                            <i class="glyphicon glyphicon-play-circle icon-play"></i>
                            <img ng-src="{{article.thumbnail}}" />
                        </a>
                    </div>

                    <hr />

                    <div class="content-created">
                        <span class="ms-Icon ms-Icon--Recent"></span><span am-time-ago="(article.created | date:'medium')"></span>
                    </div>

                    <div class="content-modified">
                        <span class="glyphicon glyphicon-pencil"></span><span am-time-ago="(article.lastModified | date:'medium')"></span>
                    </div>

                    <div class="content-type">
                        <a ng-click="showVideo(article)">
                            <span class="label label-primary">{{"Video" | translate}}</span>
                        </a>
                    </div>
                </div>

                <div class="pane article-pane" ng-if="article.type !== 1">
                    <h3 class="remove-top-margin">
                        <a ng-click="showArticle(article)">{{article.title | filter}}</a>
                    </h3>

                    <div class="content-preview" ng-bind-html="article.content | wizdom365SmartHtmlStrip:300"></div>

                    <hr />

                    <div class="content-created">
                        <span class="ms-Icon ms-Icon--Recent"></span><span am-time-ago="(article.created | date:'medium')"></span>
                    </div>

                    <div class="content-modified">
                        <span class="glyphicon glyphicon-pencil"></span><span am-time-ago="(article.lastModified | date:'medium')"></span>
                    </div>

                    <div class="content-type">
                        <a ng-click="showArticle(article)">
                            <span class="label label-primary">{{"Article" | translate}}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="alert alert-info data-get-failed" ng-if="!loading && !documentation">{{"Cannot retrieve data" | translate}}</div>
    </div>
    <div class="full-height current-document" ng-show="currentDocumentation">
        <wizdom365-spinner class="spinner" loading="loading"></wizdom365-spinner>
        <div ng-if="currentDocumentation.content" 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="video-wrapper">
            <wizdom365-video-player videolink="currentDocumentation.link"></wizdom365-video-player>
        </div>
    </div>

</div>