{namespace meilisearch=WapplerSystems\Meilisearch\ViewHelpers}
<f:layout name="Backend/WithPageTree"/>

<f:section name="Main">
    <div role="tabpanel">
        <ul class="nav nav-tabs t3js-tabs" role="tablist" id="tabs-tab" data-store-last-tab="1">
            <li role="presentation" class="t3js-tabmenu-item  active">
                <a href="#connections-tab" title="" aria-controls="tab-1" role="tab" data-toggle="tab">
                    Connections
                </a>
            </li>
            <li role="presentation" class="t3js-tabmenu-item ">
                <a href="#statistics-tab" title="" aria-controls="tab-3" role="tab" data-toggle="tab">
                    Statistics
                </a>
            </li>
            <li role="presentation" class="t3js-tabmenu-item ">
                <a href="#index_fields-tab" title="" aria-controls="tab-2" role="tab" data-toggle="tab">
                    Index Fields
                </a>
            </li>
            <li role="presentation" class="t3js-tabmenu-item">
                <a href="#index_inspector-tab" title="" aria-controls="tab-2" role="tab" data-toggle="tab">
                    Index Documents
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="connections-tab">
                <div class="panel panel-tab">
                    <div class="panel-body">
                        <f:render section="ConnectionInfos" arguments="{_all}"/>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="statistics-tab">
                <div class="panel panel-tab">
                    <div class="panel-body">
                        <f:render section="Statistics" arguments="{_all}"/>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="index_fields-tab">
                <div class="panel panel-tab">
                    <div class="panel-body">
                        <f:render section="IndexFields" arguments="{_all}"/>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="index_inspector-tab">
                <div class="panel panel-tab">
                    <div class="panel-body">
                        <f:render section="IndexInspector" arguments="{_all}"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</f:section>

<f:comment><!-- Sections --></f:comment>

<f:section name="ConnectionInfos">
    <h2>Site: {site.label}</h2>

    <f:if condition="{connectedHosts}">
        <f:be.infobox title="Following Meilisearch servers have been contacted:" state="0">
            <ul>
                <f:for each="{connectedHosts}" as="connectedHost">
                    <li>{connectedHost}</li>
                </f:for>
            </ul>
        </f:be.infobox>
    </f:if>

    <f:if condition="{missingHosts}">
        <f:be.infobox title="Unable to contact following Meilisearch servers:" state="2">
            <ul>
                <f:for each="{missingHosts}" as="missingHost">
                    <li>{missingHost}</li>
                </f:for>
            </ul>
        </f:be.infobox>
    </f:if>

    <hr class="double" />
    Used domain: {site.domain}

    <hr class="double" />
    API key: {apiKey}

    <hr class="double" />

</f:section>

<f:section name="Statistics">
    <!-- TODO add buttons to select time frame [last 24h] [last 30 days] [all] -->

    <f:be.pageRenderer
            includeJsFiles="{
        0: '{f:uri.resource(path:\'JavaScript/SearchStatistics.js\')}'
    }"
    />

    <div class="row">
        <div class="col-md-12">
            <script type="application/javascript">
                var queryLabels = <f:format.raw>{queriesChartLabels}</f:format.raw>;
                var queryData = {queriesChartData};
            </script>
            <canvas id="queriesOverTime"></canvas>
        </div>
    </div>


    <f:if condition="{top_search_phrases}">
        <div class="row">
            <div class="col-md-12">
                <h2>
                    <f:translate key="meilisearch.backend.search_statistics_module.top_search_phrases"/>
                </h2>

                <ul>
                    <f:for each="{top_search_phrases}" as="phrase">
                        <li>
                            {phrase.keywords} ({phrase.count})
                        </li>
                    </f:for>
                </ul>
            </div>
        </div>

        <hr class="section-divider" />
    </f:if>

    <f:if condition="{top_search_phrases_without_hits}">
        <div class="row section-with-header">
            <div class="col-md-12">
                <h2>
                    <f:translate key="meilisearch.backend.search_statistics_module.top_search_phrases_without_hits"/>
                </h2>

                <ul>
                    <f:for each="{top_search_phrases_without_hits}" as="phrase">
                        <li>
                            {phrase.keywords} ({phrase.count})
                        </li>
                    </f:for>
                </ul>
            </div>
        </div>

        <hr class="section-divider" />
    </f:if>

    <div class="row section-with-header">
        <div class="col-md-12">
            <h2>
                <f:translate key="meilisearch.backend.search_statistics_module.search_phrases_header"/>
            </h2>

            <f:if condition="{search_phrases_statistics}">
                <f:then>
                    <table class="table table-condensed table-hover table-striped">
                        <thead>
                        <tr class="t3-row-header">
                            <th class="nowrap">&nbsp;</th>
                            <th>
                                <f:translate key="meilisearch.backend.search_statistics_module.item_phrase"/>
                            </th>
                            <th>
                                <f:translate key="meilisearch.backend.search_statistics_module.item_count"/>
                            </th>
                            <th>
                                <f:translate key="meilisearch.backend.search_statistics_module.results"/>
                            </th>
                            <th>
                                <f:translate key="meilisearch.backend.search_statistics_module.percentage"/>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <f:for each="{search_phrases_statistics}" as="item" iteration="i">
                            <tr>
                                <td class="nowrap"><strong>{i.cycle}.</strong></td>
                                <td>{item.keywords}</td>
                                <td>{item.count}</td>
                                <td>{item.hits -> f:format.number(decimals: 1)}</td>
                                <td>{item.percent -> f:format.number(decimals: 1)}%</td>
                            </tr>
                        </f:for>
                        </tbody>
                    </table>
                </f:then>
                <f:else>
                    <f:be.infobox state="2">
                        <f:translate key="meilisearch.backend.search_statistics_module.no_records_found"/>
                    </f:be.infobox>
                </f:else>
            </f:if>
        </div>
    </div>
</f:section>

<f:section name="IndexFields">
    <div class="panel-group" id="index-fields_accordion">
        <f:for each="{indexFieldsInfoByCorePaths}" as="indexFieldsInfoForCore" iteration="iterator">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <f:if condition="{indexFieldsInfoForCore.coreMetrics.numberOfDocuments}">
                            <f:then>
                                <a data-toggle="collapse" data-parent="#index-fields_accordion" href="#collapse-core{iterator.index}">{indexFieldsInfoForCore.corePath}</a>
                            </f:then>
                            <f:else>
                                <a>{indexFieldsInfoForCore.corePath} is empty!</a>
                            </f:else>
                        </f:if>
                    </h4>
                </div>
                <div id="collapse-core{iterator.index}" class="panel-collapse collapse {f:if(condition: '{iterator.isFirst}', then: 'in')}">
                    <div class="panel-body">
                        <f:render partial="Backend/ApacheMeilisearch/FieldTypesForSingleCore" arguments="{indexFieldsInfoForCore: indexFieldsInfoForCore}"/>
                    </div>
                </div>
            </div>
        </f:for>
    </div>
</f:section>


<f:section name="IndexInspector">
    <div class="panel-group" id="index-inspector_accordion">


        <f:for each="{indexInspectorDocumentsByLanguageAndType}" as="indexInspectorDocumentsByType" key="language" iteration="currentCore">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="#panel-group3document-core-{currentCore.index}" data-toggle="collapse">{indexInspectorDocumentsByType.core.corepath}</a>
                        <a href="#panel-group3document-core-{currentCore.index}" title="Collapse table" class="pull-right" data-toggle="collapse">
                            <core:icon identifier="actions-view-list-expand" size="small"/><f:comment><!-- @todo: make Icon toggable between actions-view-list-collapse/actions-view-list-expand --></f:comment>
                        </a>
                    </h3>
                </div>

                <div id="panel-group3document-core-{currentCore.index}" class="panel-collapse collapse {f:if(condition: '{iterator.isFirst}', then: 'in')}">
                    <div class="panel-body">
                        <f:for each="{indexInspectorDocumentsByType.documents}" as="documents" key="documentType">
                            <f:if condition="{documents}"> <f:comment><!-- Don't show emty panel groups if array with documents is empty. --></f:comment>
                                <f:render section="PanelGroupForDocumentType" arguments="{_all}"/>
                            </f:if>
                        </f:for>
                    </div>
                </div>
            </div>
        </f:for>
    </div>

    <f:section name="PanelGroupForDocumentType">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <a href="#panel-group4document-type-{currentCore.index}-{documentType}" data-toggle="collapse">Type: {documentType} ({f:count(subject: documents)})</a>
                    <a href="#panel-group4document-type-{currentCore.index}-{documentType}" title="Collapse table" class="pull-right" data-toggle="collapse">
                        <core:icon identifier="actions-view-list-expand" size="small"/><f:comment><!-- @todo: make Icon toggable between actions-view-list-collapse/actions-view-list-expand --></f:comment>
                    </a>
                </h3>
            </div>
            <div id="panel-group4document-type-{currentCore.index}-{documentType}" class="panel-collapse collapse {f:if(condition: '{f:count(subject: documentsByType)} < 2', then: 'in', else: '')}">
                <div class="panel-body">
                    <div class="panel-group">
                        <table class="table table-striped table-condensed">
                            <tr>
                                <th>Id</th>
                                <th>Title</th>
                                <th>Url</th>
                                <th>Created</th>
                                <th>Indexed</th>
                                <th>Actions</th>

                            </tr>
                            <f:for each="{documents}" as="document">
                                <tr>
                                    <td>{document.uid}</td>
                                    <td><f:format.crop maxCharacters="20">{document.title}</f:format.crop></td>
                                    <td><f:format.crop maxCharacters="40">{document.url}</f:format.crop></td>
                                    <td><f:format.date format="d.m.Y H:i:s">{document.created}</f:format.date></td>
                                    <td><f:format.date format="d.m.Y H:i:s">{document.indexed}</f:format.date></td>

                                    <td>
                                        <span class="btn btn-default">
                                            <f:link.action action="documentsDetails" arguments="{uid: document.uid, type: document.type, languageUid: language, pageId: pageId}" title="Show details">
                                                <core:icon identifier="actions-document-view" />
                                            </f:link.action>
                                        </span>
                                        <f:comment>
                                            <!-- The additionalPrams M:'...' can be removed whe TYPO3 8 support will be dropped. -->
                                        </f:comment>
                                        <meilisearch:backend.security.ifHasAccessToModule extension="Meilisearch" main="searchbackend" sub="indexqueue">
                                            <span class="btn btn-default">

                                                <f:link.action action="requeueDocument" arguments="{uid: document.uid, type: document.type}"
                                                               controller="Backend\Search\IndexQueueModule"
                                                               pluginName="searchbackend_MeilisearchIndexqueue"
                                                               additionalParams="{M:'searchbackend_MeilisearchIndexqueue',route: 'searchbackend_MeilisearchIndexqueue'}" title="ReQueue for all languages">
                                                    <core:icon identifier="actions-refresh" />
                                                </f:link.action>

                                            </span>
                                        </meilisearch:backend.security.ifHasAccessToModule>
                                    </td>
                                </tr>
                            </f:for>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </f:section>
</f:section>