<div class="tagManagerManageList tagManagerVariableList">
    <div piwik-content-block
         feature="Tag Manager"
         content-title="{{ 'TagManager_ManageX'|translate:('TagManager_Variables'|translate) }}"
         class="tagManagerCustomVariablesList">
    <p>{{ 'TagManager_VariableUsageBenefits'|translate }}</p>

    <table piwik-content-table>
        <thead>
            <tr>
                <th class="name">{{ 'General_Name'|translate }}</th>
                <th class="type">{{ 'TagManager_Type'|translate }}</th>
                <th class="lookupTable">{{ 'TagManager_LookupTable'|translate }}</th>
                <th class="lastUpdated">{{ 'TagManager_LastUpdated'|translate }}</th>
                <th class="action"
                    ng-show="variableList.hasWriteAccess">{{ 'General_Actions'|translate }}</th>
            </tr>
        </thead>
        <tbody>
        <tr ng-show="variableList.model.isLoading || variableList.model.isUpdating">
            <td colspan="7">
                <span class="loadingPiwik"><img src="plugins/Morpheus/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}</span>
            </td>
        </tr>
        <tr ng-show="!variableList.model.isLoading && (variableList.model.variables|length) == 0">
            <td colspan="7">
                {{ 'TagManager_NoVariablesFound'|translate }}
                <a ng-click="variableList.createVariable()"
                   class="createContainerVariableNow"
                   ng-show="variableList.hasWriteAccess"
                >{{ 'TagManager_CreateNewVariableNow'|translate }}</a>
            </td>
        </tr>
        <tr ng-repeat="variable in variableList.model.variables|orderBy:'name':false"
            id="variable{{ variable.idvariable }}"
            class="variables">
            <td class="name">{{ variable.name }}</td>
            <td class="type" title="{{ variable.typeMetadata.description }}">{{ variable.typeMetadata.name }}</td>
            <td class="lookupTable"><span class="icon-ok" ng-show="variable.lookup_table|length"></span></td>
            <td class="lastUpdated" title="{{ 'TagManager_CreatedOnX'|translate:variable.created_date_pretty }}"><span>{{ variable.updated_date_pretty }}</span></td>
            <td class="action"
                ng-show="variableList.hasWriteAccess">
                <a ng-click="variableList.editVariable(variable.idvariable, variable.type)"
                   class="table-action icon-edit" title="{{ 'TagManager_EditVariable'|translate }}"></a>
                <a ng-click="variableList.deleteVariable(variable)" class="table-action icon-delete"
                   title="{{ 'TagManager_DeleteX'|translate:('TagManager_Variable'|translate) }}"
                ></a>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="tableActionBar"
         ng-show="variableList.hasWriteAccess">
        <a class="createNewVariable" value="" ng-click="variableList.createVariable()"
        ><span class="icon-add"></span> {{ 'TagManager_CreateNewVariable'|translate }}</a>
    </div>
    </div>

    <h2 title="{{ 'TagManager_PreConfiguredInfoTitle'|translate }}">{{ 'TagManager_PreconfiguredVariables'|translate }} <span class="icon-help preconfiguredVariablesHelp"></span></h2>
    <div>
        <ul class="collection with-header" ng-repeat="variableCategory in variableList.containerVariables">
            <li class="collection-header"><h4>{{ variableCategory.name }}</h4></li>
            <li class="collection-item" ng-repeat="variableTemplate in variableCategory.types"
                ng-show="variableTemplate.is_pre_configured">
                <span class="title">{{ variableTemplate.name }} <span class="variableId">{{ '{' + '{' + variableTemplate.id + '}' +'}' }}</span></span>
                <span class="secondary-content" ng-show="!!variableTemplate.description"><i class="icon-help" title="{{variableTemplate.description}}"></i></span>
            </li>
        </ul>

    </div>

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

    <div class="ui-confirm" id="confirmDeleteVariableNotPossible">
        <h2>{{ 'TagManager_VariableCannotBeDeleted'|translate }}</h2>
        <p>
            {{ 'TagManager_VariableBeingUsedBy'|translate }}
        </p>

        <ul class="collection">
            <li class="collection-item" ng-repeat="reference in variableList.variableReferences">
                {{ reference.referenceTypeName }}: {{ reference.referenceName }}
            </li>
        </ul>

        <p>
            {{ 'TagManager_VariableBeingUsedNeedsRemove'|translate }}
        </p>

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

</div>