<div id="examineManagement" class="examine-management" ng-controller="Umbraco.Dashboard.ExamineManagementController as vm">

    <div ng-if="vm.viewState === 'list'">
        <umb-box>
            <umb-box-content>
                <h3 class="bold">Examine Management</h3>
            </umb-box-content>
        </umb-box>
    </div>

    <div ng-show="vm.loading">
        <umb-load-indicator></umb-load-indicator>
    </div>

    <div ng-hide="vm.loading">
        <div ng-if="vm.viewState === 'list'" class="umb-panel-group__details">

            <div class="umb-panel-group__details-group">

                <div class="umb-panel-group__details-group-title">
                    <div class="umb-panel-group__details-group-name"><localize key="examineManagement_indexers">Indexers</localize></div>
                </div>

                <div class="umb-panel-group__details-checks">
                    <div class="umb-panel-group__details-check">
                        <div class="umb-panel-group__details-check-title">
                            <div class="umb-panel-group__details-check-name"><localize key="examineManagement_manageIndexes">Manage Examine's indexes</localize></div>
                            <div class="umb-panel-group__details-check-description"><localize key="examineManagement_manageIndexesDescription">Allows you to view the details of each index and provides some tools for managing the indexes</localize></div>
                        </div>

                        <div class="umb-panel-group__details-status" ng-repeat="indexer in vm.indexerDetails">

                            <div class="umb-panel-group__details-status-icon-container">
                                <i class="umb-panel-status-icon"
                                   ng-class="{'icon-check color-green' : indexer.isHealthy, 'icon-delete color-red' : !indexer.isHealthy}"></i>
                            </div>

                            <div class="umb-panel-group__details-status-content">
                                <div class="umb-panel-group__details-status-text">
                                    <a class="btn-link -underline" href="" ng-click="vm.showIndexInfo(indexer)">
                                        {{indexer.name}}
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <br />

            <div class="umb-panel-group__details-group">

                <div class="umb-panel-group__details-group-title">
                    <div class="umb-panel-group__details-group-name"><localize key="examineManagement_searchers">Searchers</localize></div>
                </div>

                <div class="umb-panel-group__details-checks">
                    <div class="umb-panel-group__details-check">
                        <div class="umb-panel-group__details-check-title">
                            <div class="umb-panel-group__details-check-name"><localize key="examineManagement_configuredSearchers">Configured Searchers</localize></div>
                            <div class="umb-panel-group__details-check-description"><localize key="examineManagement_configuredSearchersDescription">Shows properties and tools for any configured Searcher (i.e. such as a multi-index searcher)</localize></div>
                        </div>

                        <div class="umb-panel-group__details-status" ng-repeat="searcher in vm.searcherDetails">

                            <div class="umb-panel-group__details-status-icon-container">
                                <i class="umb-panel-status-icon icon-info"></i>
                            </div>

                            <div class="umb-panel-group__details-status-content">
                                <div class="umb-panel-group__details-status-text">
                                    <a class="btn-link -underline" href="" ng-click="vm.showSearcherInfo(searcher)">
                                        {{searcher.name}}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div ng-if="vm.viewState === 'searcher-details'">

            <umb-editor-sub-header>
                <umb-editor-sub-header-content-left>
                    <a class="umb-panel-back-link" href="" ng-click="vm.setViewState('list');">&larr; Back to overview</a>
                </umb-editor-sub-header-content-left>
            </umb-editor-sub-header>

            <div class="umb-panel-group__details">

                <div class="umb-panel-group__details-group">

                    <div class="umb-panel-group__details-group-title">
                        <div class="umb-panel-group__details-group-name">{{ vm.selectedSearcher.name }}</div>
                    </div>

                    <div class="umb-panel-group__details-checks">

                        <!-- Search Tool -->

                        <div class="umb-panel-group__details-check">

                            <div class="umb-panel-group__details-check-title">
                                <div class="umb-panel-group__details-check-name">Search</div>
                                <div class="umb-panel-group__details-check-description">Search the index and view the results</div>
                            </div>

                            <div class="umb-panel-group__details-status">

                                <div class="umb-panel-group__details-status-content">

                                    <div class="umb-panel-group__details-status-actions">
                                        <div class="umb-panel-group__details-status-action">
                                            <ng-form name="searchTools">

                                                <div class="row form-search">
                                                    <div class="inner-addon left-addon flex">
                                                        <i class="icon icon-search"></i>

                                                        <input type="text" class="search-query"
                                                               placeholder="@placeholders_search"
                                                               localize="placeholder"
                                                               ng-model="vm.searchText" no-dirty-check
                                                               ng-keypress="vm.search(vm.selectedSearcher, $event)" />

                                                        <umb-button disabled="vm.selectedSearcher.isProcessing"
                                                                    type="button"
                                                                    button-style="success"
                                                                    action="vm.search(vm.selectedSearcher)"
                                                                    label="Search"
                                                                    label-key="general_search">
                                                        </umb-button>

                                                    </div>
                                                </div>

                                                <div ng-if="!vm.selectedSearcher.isProcessing && vm.searchResults">
                                                    <br />

                                                    <table class="table table-bordered table-condensed">
                                                        <thead>
                                                            <tr>
                                                                <th class="score">Score</th>
                                                                <th class="id">Id</th>
                                                                <th><localize key="general_name">Name</localize></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr ng-repeat="result in vm.searchResults.results track by $index">
                                                                <td>{{result.score}}</td>
                                                                <td>{{result.id}}</td>
                                                                <td>
                                                                    <span>{{result.values['nodeName']}}</span>&nbsp;
                                                                    <a class="color-green" href="" ng-click="vm.showSearchResultDialog(result.values)">
                                                                        <em>({{result.fieldCount}} fields)</em>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>

                                                    <div class="flex justify-center">
                                                        <umb-pagination page-number="vm.searchResults.pageNumber"
                                                                        total-pages="vm.searchResults.totalPages"
                                                                        on-next="vm.nextSearchResultPage"
                                                                        on-prev="vm.prevSearchResultPage"
                                                                        on-go-to-page="vm.goToPageSearchResultPage">
                                                        </umb-pagination>
                                                    </div>

                                                </div>

                                            </ng-form>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>
        </div>

        <div ng-if="vm.viewState === 'index-details'">

            <umb-editor-sub-header>
                <umb-editor-sub-header-content-left>
                    <a class="umb-panel-back-link" href="" ng-click="vm.setViewState('list');">&larr; <localize key="general_backToOverview">Back to overview</localize></a>
                </umb-editor-sub-header-content-left>
            </umb-editor-sub-header>


            <div class="umb-panel-group__details">

                <div class="umb-panel-group__details-group">

                    <div class="umb-panel-group__details-group-title">
                        <div class="umb-panel-group__details-group-name">{{ vm.selectedIndex.name }}</div>
                    </div>

                    <div class="umb-panel-group__details-checks">

                        <!-- Health Status -->

                        <div class="umb-panel-group__details-check">

                            <div class="umb-panel-group__details-check-title">
                                <div class="umb-panel-group__details-check-name"><localize key="examineManagement_healthStatus">Health status</localize></div>
                                <div class="umb-panel-group__details-check-description"><localize key="examineManagement_healthStatusDescription">The health status of the index and if it can be read</localize></div>
                            </div>

                            <div class="umb-panel-group__details-status">

                                <div class="umb-panel-group__details-status-icon-container">
                                    <i class="umb-panel-status-icon"
                                       ng-class="{'icon-check color-green' : vm.selectedIndex.isHealthy, 'icon-delete color-red' : !vm.selectedIndex.isHealthy}"></i>
                                </div>

                                <div class="umb-panel-group__details-status-content">

                                    <div class="umb-panel-group__details-status-text">
                                        <div>{{vm.selectedIndex.healthStatus}}</div>
                                        <div ng-show="!vm.selectedIndex" class="color-red">
                                            The index cannot be read and will need to be rebuilt
                                        </div>
                                        <!--<div ng-if="status.description" ng-bind-html="status.description"></div>-->
                                    </div>
                                </div>

                            </div>

                        </div>

                        <!-- Search Tool -->

                        <div class="umb-panel-group__details-check">

                            <div class="umb-panel-group__details-check-title">
                                <div class="umb-panel-group__details-check-name"><localize key="general_search">Search</localize></div>
                                <div class="umb-panel-group__details-check-description"><localize key="examineManagement_searchDescription">Search the index and view the results</localize></div>
                            </div>

                            <div class="umb-panel-group__details-status">

                                <div class="umb-panel-group__details-status-content">

                                    <div class="umb-panel-group__details-status-actions">
                                        <div class="umb-panel-group__details-status-action">
                                            <ng-form name="searchTools">

                                                <div class="row form-search">
                                                    <div class="inner-addon left-addon flex">
                                                        <i class="icon icon-search"></i>

                                                        <input type="text" class="search-query"
                                                               placeholder="@placeholders_search"
                                                               localize="placeholder"
                                                               ng-model="vm.searchText" no-dirty-check
                                                               ng-keypress="vm.search(vm.selectedIndex, $event)" />

                                                        <umb-button disabled="vm.selectedIndex.isProcessing"
                                                                    type="button"
                                                                    button-style="success"
                                                                    action="vm.search(vm.selectedIndex)"
                                                                    label="Search"
                                                                    label-key="general_search">
                                                        </umb-button>

                                                    </div>
                                                </div>

                                                <div ng-if="!vm.selectedIndex.isProcessing && vm.searchResults">
                                                    <br />

                                                    <table class="table table-bordered table-condensed">
                                                        <thead>
                                                            <tr>
                                                                <th class="score">Score</th>
                                                                <th class="id">Id</th>
                                                                <th><localize key="general_name">Name</localize></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr ng-repeat="result in vm.searchResults.results track by $index">
                                                                <td>{{result.score}}</td>
                                                                <td>{{result.id}}</td>
                                                                <td>
                                                                    <span>{{result.values['nodeName']}}</span>&nbsp;
                                                                    <a class="color-green" href="" ng-click="vm.showSearchResultDialog(result.values)">
                                                                        <em>({{result.fieldCount}} fields)</em>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>

                                                    <div class="flex justify-center">
                                                        <umb-pagination page-number="vm.searchResults.pageNumber"
                                                                        total-pages="vm.searchResults.totalPages"
                                                                        on-next="vm.nextSearchResultPage"
                                                                        on-prev="vm.prevSearchResultPage"
                                                                        on-go-to-page="vm.goToPageSearchResultPage">
                                                        </umb-pagination>
                                                    </div>

                                                </div>

                                            </ng-form>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                        <!-- Index Stats -->

                        <div class="umb-panel-group__details-check">

                            <div class="umb-panel-group__details-check-title">
                                <div class="umb-panel-group__details-check-name"><localize key="examineManagement_indexInfo">Index info</localize></div>
                                <div class="umb-panel-group__details-check-description"><localize key="examineManagement_indexInfoDescription">Lists the properties of the index</localize></div>
                            </div>

                            <div class="umb-panel-group__details-status">

                                <div class="umb-panel-group__details-status-content">

                                    <table class="table table-bordered table-condensed">
                                        <caption>&nbsp;</caption>
                                        <tr ng-repeat="(key, val) in vm.selectedIndex.providerProperties track by $index">
                                            <th>{{key}}</th>
                                            <td>{{val}}</td>
                                        </tr>
                                    </table>

                                </div>

                            </div>

                        </div>

                        <!-- Rebuild -->

                        <div class="umb-panel-group__details-check">

                            <div class="umb-panel-group__details-check-title">
                                <div class="umb-panel-group__details-check-name"><localize key="examineManagement_tools">Tools</localize></div>
                                <div class="umb-panel-group__details-check-description"><localize key="examineManagement_toolsDescription">Tools to manage the index</localize></div>
                            </div>

                            <div class="umb-panel-group__details-status">

                                <div class="umb-panel-group__details-status-content">

                                    <div class="umb-panel-group__details-status-actions">
                                        <div class="umb-panel-group__details-status-action">
                                            <ng-form name="indexTools">

                                                <umb-button ng-show="!vm.selectedIndex.isProcessing && (!vm.selectedIndex.processingAttempts || vm.selectedIndex.processingAttempts < 100)"
                                                            disabled="!vm.selectedIndex.canRebuild"
                                                            type="button"
                                                            button-style="success"
                                                            action="vm.rebuildIndex(vm.selectedIndex, $event)"
                                                            label="Rebuild index"
                                                            label-key="examineManagement_rebuildIndex">
                                                </umb-button>

                                                <div ng-show="vm.selectedIndex.isProcessing">
                                                    <div class="umb-panel-group__details-status-overlay"></div>
                                                    <umb-load-indicator></umb-load-indicator>
                                                </div>

                                                <div ng-show="vm.selectedIndex.processingAttempts >= 100">
                                                    The process is taking longer than expected, check the umbraco log to see if there have been any errors during this operation
                                                </div>

                                            </ng-form>

                                            <div class="umb-panel-group__details-status-action-description" ng-show="!vm.selectedIndex.canRebuild">
                                                This index cannot be rebuilt because it has no assigned <code>IIndexPopulator</code>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

    <umb-overlay ng-if="vm.searchResults.overlay"
                 position="center"
                 view="vm.searchResults.overlay.view"
                 model="vm.searchResults.overlay">
    </umb-overlay>

</div>
