<div piwik-content-block
     content-title="{{ 'CoreAdminHome_TrackingFailures'|translate }}"
     class="matomoTrackingFailures">
    <p>
        {{ 'CoreAdminHome_TrackingFailuresIntroduction'|translate:2 }}
        <br /><br />
        <input class="btn deleteAllFailures"
               ng-show="!trackingFailures.isLoading && trackingFailures.failures.length > 0"
               type="button" ng-click="trackingFailures.deleteAll();"
               value="{{'CoreAdminHome_DeleteAllFailures'|translate}}">
    </p>

    <div piwik-activity-indicator loading="trackingFailures.isLoading"></div>

    <table piwik-content-table>
        <thead>
        <tr>
            <th ng-click="trackingFailures.changeSortOrder('idsite')">{{ 'General_Measurable'|translate }}</th>
            <th ng-click="trackingFailures.changeSortOrder('problem')">{{ 'CoreAdminHome_Problem'|translate }}</th>
            <th ng-click="trackingFailures.changeSortOrder('solution')">{{ 'CoreAdminHome_Solution'|translate }}</th>
            <th ng-click="trackingFailures.changeSortOrder('date_first_occurred')">{{ 'General_Date'|translate }}</th>
            <th ng-click="trackingFailures.changeSortOrder('url')">{{ 'Actions_ColumnPageURL'|translate }}</th>
            <th ng-click="trackingFailures.changeSortOrder('request_url')">{{ 'CoreAdminHome_TrackingURL'|translate }}</th>
            <th class="action">{{ 'General_Action'|translate }}</th>
        </tr>
        </thead>
        <tbody>
        <tr><td colspan="7" ng-show="!trackingFailures.isLoading && trackingFailures.failures.length == 0">{{'CoreAdminHome_NoKnownFailures'|translate}} <span class="icon-ok"></span></td></tr>
            <tr ng-repeat="failure in trackingFailures.failures | orderBy:trackingFailures.sortColumn:trackingFailures.sortReverse">
                <td>{{ failure.site_name }} ({{'General_Id'|translate}} {{ failure.idsite }})</td>
                <td>{{ failure.problem }}</td>
                <td>{{ failure.solution }} <a ng-show="failure.solution_url" rel="noopener noreferrer" ng-href="{{ failure.solution_url }}">{{'CoreAdminHome_LearnMore'|translate }}</a></td>
                <td class="datetime">{{ failure.pretty_date_first_occurred }}</td>
                <td>{{ failure.url }}</td>
                <td><span ng-show="!failure.showFullRequestUrl" title="{{'CoreHome_ClickToSeeFullInformation'|translate}}"
                          ng-click="failure.showFullRequestUrl = true">{{ failure.request_url|limitTo:100 }}...</span>
                    <span ng-show="failure.showFullRequestUrl">{{ failure.request_url }}</span></td>
                <td><span class="table-action icon-delete"
                          title="{{'General_Delete'|translate}}"
                          ng-click="trackingFailures.deleteFailure(failure.idsite, failure.idfailure)"></span></td>
            </tr>
        </tbody>
    </table>

    <div class="ui-confirm" id="confirmDeleteAllTrackingFailures">
        <h2>{{ 'CoreAdminHome_ConfirmDeleteAllTrackingFailures'|translate }}</h2>

        <input type="button" value="{{ 'General_Yes'|translate }}" role="yes"/>
        <input type="button" value="{{ 'General_No'|translate }}" role="no" />
    </div>

    <div class="ui-confirm" id="confirmDeleteThisTrackingFailure">
        <h2>{{ 'CoreAdminHome_ConfirmDeleteThisTrackingFailure'|translate }}</h2>

        <input type="button" value="{{ 'General_Yes'|translate }}" role="yes"/>
        <input type="button" value="{{ 'General_No'|translate }}" role="no" />
    </div>

</div>