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

    <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">
                                <umb-icon icon="{{indexer.isHealthy ? 'icon-check' : 'icon-delete'}}"
                                          ng-class="{'color-green' : indexer.isHealthy, 'color-red' : !indexer.isHealthy}">
                                </umb-icon>
                            </div>

                            <div class="umb-panel-group__details-status-content">
                                <div class="umb-panel-group__details-status-text">
                                    <button type="button" class="btn-link -underline" ng-click="vm.showIndexInfo(indexer)">
                                        {{indexer.name}}
                                    </button>
                                </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">
                                <umb-icon icon="icon-info"></umb-icon>
                            </div>

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

            </div>

        </div>

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

            <umb-editor-sub-header>
                <umb-editor-sub-header-content-left>
                    <button type="button" class="umb-package-details__back-action" ng-click="vm.setViewState('list');"><span aria-hidden="true">&larr;</span> <localize key="general_backToOverview">Back to overview</localize></button>
                </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">
                                    <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">
                                                    <div class="flex">

                                                        <div class="flex-auto">
                                                            <umb-search-filter
                                                                input-id="examine-search"
                                                                model="vm.searchText"
                                                                on-search="vm.search(vm.selectedIndex, $event)"
                                                                label-key="placeholders_filter"
                                                                text="Type to filter..."
                                                                css-class="w-100">
                                                            </umb-search-filter>
                                                        </div>

                                                        <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>
                                                                    <a ng-show="result.editUrl" ng-click="vm.goToResult(result, $event)" ng-href="#{{result.editUrl}}">{{ ::result.values['nodeName'] | umbCmsJoinArray:', '}}</a>
                                                                    <span ng-hide="result.editUrl">{{ ::result.values['nodeName'] | umbCmsJoinArray:', '}}</span>
                                                                    <button type="button" class="table__action-overlay color-green" ng-click="vm.showSearchResultDialog(result.values)">({{ ::result.fieldCount}} <localize key="examineManagement_fields">fields</localize>)</button>
                                                                </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>
                    <button type="button" class="umb-package-details__back-action" ng-click="vm.setViewState('list');"><span aria-hidden="true">&larr;</span> <localize key="general_backToOverview">Back to overview</localize></button>
                </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">
                                    <umb-icon icon="{{vm.selectedIndex.isHealthy ? 'icon-check' : 'icon-delete'}}"
                                              ng-class="{ 'color-green' : vm.selectedIndex.isHealthy, 'color-red': !vm.selectedIndex.isHealthy}">
                                    </umb-icon>
                                </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">
                                            <localize key="examineManagement_indexCannotRead">The index cannot be read and will need to be rebuilt</localize>
                                        </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">
                                                    <div class="flex">

                                                        <div class="flex-auto">
                                                            <umb-search-filter
                                                                input-id="examine-search"
                                                                model="vm.searchText"
                                                                on-search="vm.search(vm.selectedIndex, $event)"
                                                                label-key="placeholders_filter"
                                                                text="Type to filter..."
                                                                css-class="w-100">
                                                            </umb-search-filter>
                                                        </div>

                                                        <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 />
                                                    <div class="result-table">
                                                        <table class="table table-bordered table-condensed">
                                                            <thead>
                                                                <tr>
                                                                    <th class="id nowrap" width="40">Id</th>
                                                                    <th><localize key="general_name">Name</localize></th>
                                                                    <th class="nowrap" ng-repeat="field in vm.showSearchResultFields">
                                                                        <div class="flex justify-between">
                                                                            <span>{{ field }}</span>
                                                                            <button type="button" class="btn btn-mini btn-white ml-3" ng-click="vm.toggleField(field)">
                                                                                &times;
                                                                            </button>
                                                                        </div>
                                                                    </th>
                                                                    <th class="tr nowrap" width="40">
                                                                        <button type="button" class="btn btn-reset btn-link" style="font:inherit;color:inherit;" ng-click="vm.showSelectFieldsDialog()">Fields</button>
                                                                    </th>
                                                                    <th class="score tr nowrap" width="40">Score</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr ng-repeat="result in vm.searchResults.results track by $index" valign="top">
                                                                    <td class="nowrap">{{result.id}}</td>
                                                                    <td>
                                                                        <a ng-show="result.editUrl" ng-click="vm.goToResult(result, $event)" ng-href="#{{result.editUrl}}">
                                                                            {{ ::result.values['nodeName'] | umbCmsJoinArray:', ' }}
                                                                        </a>
                                                                        <span ng-hide="result.editUrl">{{ ::result.values['nodeName'] | umbCmsJoinArray:', ' }}</span>
                                                                    </td>
                                                                    <td ng-repeat="field in vm.showSearchResultFields">
                                                                        {{ ::result.values[field] | umbCmsJoinArray:', ' }}
                                                                    </td>
                                                                    <td class="tr nowrap">
                                                                        <button type="button" 
                                                                            class="table__action-overlay color-green" 
                                                                            ng-click="vm.showSearchResultDialog(result.values)">({{ ::result.fieldCount }} <localize key="examineManagement_fields">fields</localize>)</button>
                                                                    </td>
                                                                    <td class="tr nowrap umb-avatar--white">
                                                                        <span title="{{ result.score }}">
                                                                            {{ ::result.score | number:4 }}
                                                                        </span>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <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="danger"
                                                            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">
                                                    <localize key="examineManagement_processIsTakingLonger">The process is taking longer than expected, check the umbraco log to see if there have been any errors during this operation</localize>
                                                </div>

                                            </ng-form>

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

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

</div>
