<div>
    <h2 piwik-enriched-headline
        class="card-title"
        help-url="https://matomo.org/faq/new-to-piwik/all-websites-dashboard/"
        feature-name="{{ 'General_AllWebsitesDashboard'|translate }}">
        {{ 'General_AllWebsitesDashboard'|translate }}
        <span class='smallTitle'
              title="{{ 'General_EvolutionSummaryGeneric'|translate:('General_NVisits'|translate:model.totalVisits):date:model.lastVisits:model.lastVisitsDate:(model.totalVisits|evolution:model.lastVisits)}}"
              ng-bind-html="'General_TotalVisitsPageviewsActionsRevenue' | translate:('<strong>'+model.totalVisits+'</strong>'):('<strong>'+model.totalPageviews+'</strong>'):('<strong>'+model.totalActions+'</strong>'):('<strong>' + model.totalRevenue + '</strong>')">
        </span>
    </h2>

    <table id="mt" class="dataTable card-table" cellspacing="0">
        <thead>
        <tr>
            <th id="names" class="label" ng-click="model.sortBy('label')" ng-class="{columnSorted: 'label' == model.sortColumn}">
                <span class="heading">{{ 'General_Website'|translate }}</span>
                <span ng-class="{multisites_asc: !model.reverse && 'label' == model.sortColumn, multisites_desc: model.reverse && 'label' == model.sortColumn}" class="arrow"></span>
            </th>
            <th id="visits" class="multisites-column" ng-click="model.sortBy('nb_visits')" ng-class="{columnSorted: 'nb_visits' == model.sortColumn}">
                <span ng-class="{multisites_asc: !model.reverse && 'nb_visits' == model.sortColumn, multisites_desc: model.reverse && 'nb_visits' == model.sortColumn}" class="arrow"></span>
                <span class="heading">{{ 'General_ColumnNbVisits'|translate }}</span>
            </th>
            <th id="pageviews" class="multisites-column" ng-click="model.sortBy('nb_pageviews')" ng-class="{columnSorted: 'nb_pageviews' == model.sortColumn}">
                <span ng-class="{multisites_asc: !model.reverse && 'nb_pageviews' == model.sortColumn, multisites_desc: model.reverse && 'nb_pageviews' == model.sortColumn}" class="arrow"></span>
                <span class="heading">{{ 'General_ColumnPageviews'|translate }}</span>
            </th>

            <th ng-if="displayRevenueColumn" id="revenue" class="multisites-column" ng-click="model.sortBy('revenue')" ng-class="{columnSorted: 'revenue' == model.sortColumn}">
                <span ng-class="{multisites_asc: !model.reverse && 'revenue' == model.sortColumn, multisites_desc: model.reverse && 'revenue' == model.sortColumn}" class="arrow"></span>
                <span class="heading">{{ 'General_ColumnRevenue'|translate }}</span>
            </th>

            <th id="evolution" colspan="{{ showSparklines ? 2 : 1 }}" ng-class="{columnSorted: evolutionSelector == model.sortColumn}">
                <span class="arrow" ng-class="{multisites_asc: !model.reverse && evolutionSelector == model.sortColumn, multisites_desc: model.reverse && evolutionSelector == model.sortColumn}"></span>
                <span class="evolution"
                      ng-click="model.sortBy(evolutionSelector)"> {{ 'MultiSites_Evolution'|translate }}</span>
                <select class="selector browser-default" id="evolution_selector" ng-model="evolutionSelector"
                        ng-change="model.sortBy(evolutionSelector)">
                    <option value="visits_evolution">{{ 'General_ColumnNbVisits'|translate }}</option>
                    <option value="pageviews_evolution">{{ 'General_ColumnPageviews'|translate }}</option>
                    <option ng-if="displayRevenueColumn" value="revenue_evolution">{{ 'General_ColumnRevenue'|translate }}</option>
                </select>
            </th>
        </tr>
        </thead>

        <tbody id="tb" ng-if="model.isLoading">
            <tr>
                <td colspan="7" class="allWebsitesLoading">
                    <div piwik-activity-indicator loading-message="model.loadingMessage" loading="model.isLoading"></div>
                </td>
            </tr>
        </tbody>

        <tbody id="tb" ng-if="!model.isLoading">

            <tr ng-if="model.errorLoadingSites">
                <td colspan="7">
                    <div class="notification system notification-error">
                        {{ 'General_ErrorRequest'|translate:(''):('') }}

                        <br /><br />
                        {{ 'General_NeedMoreHelp'|translate }}

                        <a rel="noreferrer noopener" target="_blank" href="https://matomo.org/faq/troubleshooting/faq_19489/">{{ 'General_Faq'|translate }}</a>
                        –
                        <a rel="noreferrer noopener" target="_blank" href="https://forum.matomo.org/">{{ 'Feedback_CommunityHelp'|translate }}</a>
                        <span ng-show="areAdsForProfessionalServicesEnabled"> – </span>
                        <a ng-show="areAdsForProfessionalServicesEnabled" rel="noreferrer noopener" target="_blank" href="https://matomo.org/support-plans/?pk_campaign=Help&pk_medium=AjaxError&pk_content=MultiSites&pk_source=Matomo_App">{{ 'Feedback_ProfessionalHelp'|translate }}</a>.
                    </div>
                </td>
            </tr>

            <tr website="website"
                evolution-metric="evolutionSelector"
                piwik-multisites-site
                date-sparkline="dateSparkline"
                show-sparklines="showSparklines"
                metric="model.sortColumn"
                display-revenue-column="displayRevenueColumn"
                ng-repeat="website in model.sites">
            </tr>
        </tbody>

        <tfoot>

        <tr>
            <td colspan="8" class="paging" ng-hide="model.numberOfPages() <= 1">
                <div class="row">
                    <div class="col s3 add_new_site">
                        <a ng-if="hasSuperUserAccess" href="index.php?module=SitesManager&action=index&showaddsite=1&period={{ period }}&date={{ date }}&idSite={{ idSite }}">
                            <span class="icon-add"></span> {{ 'SitesManager_AddSite'|translate }}
                        </a>
                    </div>
                    <div class="col s6">
                        <span id="prev" class="previous dataTablePrevious" ng-hide="model.currentPage == 0" ng-click="model.previousPage()">
                            <span style="cursor:pointer;">&#171; {{ 'General_Previous'|translate }}</span>
                        </span>
                        <span class="dataTablePages">
                            <span id="counter">
                                {{ 'General_Pagination'|translate:model.getPaginationLowerBound():model.getPaginationUpperBound():model.getNumberOfFilteredSites() }}
                            </span>
                        </span>
                        <span id="next" class="next dataTableNext" ng-hide="model.currentPage >= model.getNumberOfPages()" ng-click="model.nextPage()">
                            <span style="cursor:pointer;" class="pointer">{{ 'General_Next'|translate }} &#187;</span>
                        </span>
                    </div>
                    <div class="col s3">&nbsp;</div>
                </div>
            </td>
        </tr>
        <tr row_id="last">
            <td colspan="8" class="site_search">
                <div class="row">
                    <div class="input-field col s12">
                        <input type="text"
                               ng-model="searchTerm"
                               piwik-onenter="model.searchSite(searchTerm)"
                               placeholder="{{ 'Actions_SubmenuSitesearch' | translate }}">
                        <span title="{{ 'General_ClickToSearch' | translate }}"
                             ng-click="model.searchSite(searchTerm)"
                             class="icon-search search_ico"></span>
                    </div>
                </div>
            </td>
        </tr>

        </tfoot>
    </table>

</div>
