<div class="bootstrap-wrapper wt-azWebpart wizdom-fullview">
    <input class="form-control" type="text" placeholder="{{'Search pages' | translate}}" ng-model="searchPage.title" ng-change="search()" />
    <div ng-if="!loading && letterPages">
        <div class="topLetters notranslate flexLayout">
            <span ng-repeat="char in charArray" class="spanWidth">
                <a ng-if="hasPages(char)" href="" ng-click="updateTab('{{char}}')" ng-class="{'selectedLetter':tab === char}">{{char}}</a>
                <span ng-if="!hasPages(char)" ng-class="{'selectedLetter':tab === char}">{{char}}</span>
            </span>
            <span class="spanWidth"><a href="" ng-click="updateTab('All')" ng-class="{'selectedLetter':tab === 'All'}">{{"All" | translate}}</a></span>
        </div>
        <div id="manualPages">
            <table class="azResultTable resultsAll azHeadingsTable table-hover">
                <thead>
                    <tr>
                        <th class="col-xs-8 wt-azCol1 firstItemRow">{{"Title" | translate}}</th>
                        <th class="col-xs-2 wt-azCenterCol">{{"Date" | translate}}</th>
                        <th class="col-xs-2 wt-azCenterCol">{{"Version" | translate}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="wt-azLetterRow" ng-repeat-start="item in letterPages" ng-show="tab == 'All' || tab == '{{item.firstLetter}}'" ng-if="(item.pages | filter : searchPage).length >0">
                        <td class="col-xs-8 wt-azCol1 firstLetterItem">{{item.firstLetter}}</td>
                        <td class="col-xs-2"></td>
                        <td class="col-xs-2"></td>
                    </tr>
                    <tr class="wt-azLinkRow" ng-repeat="page in item.pages | filter : searchPage" ng-show="tab == 'All' || tab == '{{item.firstLetter}}'" ng-click="location.href = '{{page.path}}'">
                        <td class="col-xs-8 wt-azCol1"><a href="{{page.path}}">{{page.title}}</a></td>
                        <td class="col-xs-2 wt-azCenterCol"><a href="{{page.path}}">{{page.modifiedDate  | date: 'shortDate' }}</a></td>
                        <td class="col-xs-2 wt-azCenterCol"><a href="{{page.path}}">{{page.pageVersion}}</a></td>
                        <td class="col-xs-2"><button class="editWebpartButton btn" ng-click="getPolicyContent(page.path,page.title)" type="button">{{"Print" | translate}}</button></td>
                    </tr>
                    <tr ng-repeat-end></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div style="display: none;">
        <div id="printContent"></div>
    </div>
</div>