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

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

    <div ng-repeat="scope in manageCustomVars.scopes">
        <h2 class="secondary">{{ 'CustomVariables_ScopeX'|translate:(scope|ucfirst) }}</h2>
        <table class="dataTable entityTable">
            <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}">
                <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>

    <h2 class="secondary" ng-show="!manageCustomVars.model.isLoading">{{ 'CustomVariables_CreateNewSlot'|translate }}</h2>

    <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 />
        <br />
        <code>./console customvariables:set-max-custom-variables {{ manageCustomVars.model.numSlotsAvailable + 1 }}</code>
    </p>


</div>