<div class="manageCustomVars">
    <div piwik-content-intro>
        <h2 piwik-enriched-headline
             help-url="https://matomo.org/docs/custom-variables/">
            {{ 'CustomVariables_CustomVariables'|translate }}
        </h2>

        <p>
            <span ng-bind-html="'CustomVariables_ManageDescription'|translate:manageCustomVars.siteName"></span>
        </p>
    </div>

    <div class="alert alert-info" ng-show="!manageCustomVars.model.isLoading && manageCustomVars.model.hasCustomVariablesInGeneral && !manageCustomVars.model.hasAtLeastOneUsage">
        {{ 'CustomVariables_SlotsReportIsGeneratedOverTime'|translate }}
    </div>

    <div ng-repeat="scope in manageCustomVars.scopes">
        <div piwik-content-block content-title="{{ 'CustomVariables_ScopeX'|translate:(scope.name) }}">
            <table piwik-content-table>
                <thead>
                <tr>
                    <th>{{'CustomVariables_Index'|translate }}</th>
                    <th>{{'CustomVariables_Usages'|translate }}</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td colspan="3" ng-show="manageCustomVars.model.isLoading">{{ 'General_Loading'|translate }}</td>
                </tr>
                <tr ng-repeat="customVariables in manageCustomVars.model.customVariables|filter:{scope: scope.value}">
                    <td class="index">{{ customVariables.index }}</td>
                    <td>
                    <span ng-show="(customVariables.usages|length) === 0"
                          class="unused">{{'CustomVariables_Unused'|translate }}</span>
                    <span ng-show="customVariables.usages|length" ng-repeat="cvar in customVariables.usages|orderBy:'-nb_actions'">
                        <span title="{{ 'CustomVariables_UsageDetails'|translate:(cvar.nb_visits ? cvar.nb_visits : 0):(cvar.nb_actions ? cvar.nb_actions : 0) }}">{{ cvar.name }}</span><span ng-show="!$last">, </span>
                    </span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div ng-show="!manageCustomVars.model.isLoading"
         piwik-content-block
         id="CustomVariablesCreateNewSlot"
         content-title="{{ 'CustomVariables_CreateNewSlot'|translate }}">

        <p ng-show="!manageCustomVars.model.isLoading">
            {{ 'CustomVariables_CreatingCustomVariableTakesTime'|translate }}
            <br /><br />
            <span ng-bind-html="'CustomVariables_CurrentAvailableCustomVariables'|translate:('<strong>'+manageCustomVars.model.numSlotsAvailable+'</strong>')"></span>
            <br />
            <br />
            {{ 'CustomVariables_ToCreateCustomVarExecute'|translate }}
            <br />
            <pre piwik-select-on-focus><code>./console customvariables:set-max-custom-variables {{ manageCustomVars.model.numSlotsAvailable + 1 }}</code></pre>
        </p>

    </div>

</div>
