<div class="manageGdpr">
    <div piwik-content-block content-title="{{ 'PrivacyManager_GdprTools'|translate }}">
        <div class="intro">
        <p>
            {{ 'PrivacyManager_GdprToolsPageIntro1'|translate }}
            <br /><br />
            {{ 'PrivacyManager_GdprToolsPageIntro2'|translate }}
            <br />
        </p>
        <ol>
            <li>{{ 'PrivacyManager_GdprToolsPageIntroAccessRight'|translate }}</li>
            <li>{{ 'PrivacyManager_GdprToolsPageIntroEraseRight'|translate }}</li>
        </ol>
        <p><br /><span ng-bind-html="'PrivacyManager_GdprToolsOverviewHint'|translate:('<a href=\'' + manageGdpr.linkTo('gdprOverview') + '\'>'):('</a>')"></span></p>
        </div>
        <h3>{{ 'PrivacyManager_SearchForDataSubject'|translate }}</h3>

        <div class="form-group row">
            <div class="col s12 input-field">
                <div>
                    <label for="gdprsite" class="siteSelectorLabel">{{ 'PrivacyManager_SelectWebsite'|translate }}</label>
                    <div piwik-siteselector
                         class="sites_autocomplete"
                         ng-model="manageGdpr.site"
                         id="gdprsite"
                         show-all-sites-item="true"
                         switch-site-on-select="false"
                         show-selected-site="true"></div>
                </div>
            </div>
        </div>

        <div class="form-group row segmentFilterGroup">
            <div class="col s12">
                <div>
                    <label style="margin: 8px 0;display: inline-block;">{{ 'PrivacyManager_FindDataSubjectsBy'|translate }}</label>
                    <div piwik-segment-generator
                         visit-segments-only="1"
                         idsite="manageGdpr.site.id"
                         ng-model="manageGdpr.segment_filter"></div>
                </div>
            </div>
        </div>

        <div piwik-save-button
             class="findDataSubjects"
             onconfirm="manageGdpr.findDataSubjects()"
             data-disabled="!manageGdpr.segment_filter"
             value="Find matching data subjects"
             saving="manageGdpr.isLoading">
        </div>
    </div>

    <div ng-show="!manageGdpr.dataSubjects.length && manageGdpr.hasSearched">
        <h2>{{ 'PrivacyManager_NoDataSubjectsFound'|translate }}</h2>
    </div>
    <div ng-show="manageGdpr.dataSubjects.length">

        <h2>{{ 'PrivacyManager_MatchingDataSubjects'|translate }}</h2>
        <p>{{ 'PrivacyManager_VisitsMatchedCriteria'|translate }}
            {{ 'PrivacyManager_ExportingNote'|translate }}
            <br />            <br />
            {{ 'PrivacyManager_DeletionFromMatomoOnly'|translate }}
            <br /><br />
            {{ 'PrivacyManager_ResultIncludesAllVisits'|translate }}
        </p>
        <table piwik-content-table>
            <thead>
            <tr>
                <th class="checkInclude">
                    <div piwik-field uicontrol="checkbox" name="activateAll"
                         ng-model="manageGdpr.toggleAll"
                         ng-change="manageGdpr.toggleActivateAll()"
                         full-width="true">
                    </div>
                </th>
                <th>{{ 'General_Website'|translate }}</th>
                <th>{{ 'General_VisitId'|translate }}</th>
                <th>{{ 'General_VisitorID'|translate }}</th>
                <th>{{ 'General_VisitorIP'|translate }}</th>
                <th>{{ 'General_UserId'|translate }}</th>
                <th>{{ 'General_Details'|translate }}</th>
                <th ng-show="manageGdpr.profileEnabled">{{ 'General_Action'|translate }}</th>
            </tr>
            </thead>
            <tbody>
                <tr ng-show="(manageGdpr.dataSubjects|length) > 400">
                    <td colspan="8">{{ 'PrivacyManager_ResultTruncated'|translate:('400') }}</td>
                </tr>
                <tr ng-repeat="(index, dataSubject) in manageGdpr.dataSubjects" title="Last action: {{ dataSubject.lastActionDateTime }}">
                    <td class="checkInclude">
                        <div piwik-field uicontrol="checkbox" name="subject{{dataSubject.idVisit}}"
                             ng-model="manageGdpr.dataSubjects[index].dataSubjectActive"
                             full-width="true">
                        </div>
                    </td>
                    <td class="site" title="(ID {{dataSubject.idSite}})">{{ dataSubject.siteName }}</td>
                    <td class="visitId">{{ dataSubject.idVisit }}</td>
                    <td class="visitorId"><a ng-click="manageGdpr.addFilter('visitorId', dataSubject.visitorId)" title="{{ 'PrivacyManager_AddVisitorIdToSearch'|translate }}">{{ dataSubject.visitorId }}</a></td>
                    <td class="visitorIp"><a ng-click="manageGdpr.addFilter('visitIp', dataSubject.visitIp)" title="{{ 'PrivacyManager_AddVisitorIPToSearch'|translate }}">{{ dataSubject.visitIp }}</a></td>
                    <td class="userId"><a ng-click="manageGdpr.addFilter('userId', dataSubject.userId)" title="{{ 'PrivacyManager_AddUserIdToSearch'|translate }}">{{ dataSubject.userId }}</a></td>
                    <td>
                        <span title="{{ dataSubject.deviceType }} {{ dataSubject.deviceModel }}"><img height="16" ng-src="{{ dataSubject.deviceTypeIcon }}"></span>
                        <span title="{{ dataSubject.operatingSystem }}"><img height="16" ng-src="{{ dataSubject.operatingSystemIcon }}"></span>
                        <span title="{{ dataSubject.browser }} {{ dataSubject.browserFamilyDescription }}"><img height="16" ng-src="{{ dataSubject.browserIcon }}"></span>
                        <span title="{{ dataSubject.country }} {{ dataSubject.region }}"><img height="16" ng-src="{{ dataSubject.countryFlag }}"></span>
                    </td>
                    <td ng-show="manageGdpr.profileEnabled"><a class="visitorLogTooltip" title="View visitor profile" ng-click="manageGdpr.showProfile(dataSubject.visitorId, dataSubject.idSite)">
                    <img src="plugins/Live/images/visitorProfileLaunch.png"> <span>{{ 'Live_ViewVisitorProfile'|translate }}</span>
                </a></td>
                </tr>
            </tbody>
        </table>

        <div piwik-save-button
             class="exportDataSubjects"
             onconfirm="manageGdpr.exportDataSubject()"
             data-disabled="!manageGdpr.hasActiveDataSubjects()"
             value="{{ 'PrivacyManager_ExportSelectedVisits'|translate }}">
        </div>
        <div piwik-save-button
             class="deleteDataSubjects"
             onconfirm="manageGdpr.deleteDataSubject()"
             data-disabled="!manageGdpr.hasActiveDataSubjects() || manageGdpr.isDeleting"
             value="{{ 'PrivacyManager_DeleteSelectedVisits'|translate }}">
        </div>
    </div>

    <div class="ui-confirm" id="confirmDeleteDataSubject">
        <h2>{{ 'PrivacyManager_DeleteVisitsConfirm'|translate }}</h2>
        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
    </div>
</div>