<div class="tagManagerManageList tagManagerTagList">
    <div piwik-content-block
         feature="Tag Manager"
         content-title="{{ 'TagManager_ManageX'|translate:('TagManager_Tags'|translate) }}">
    <p>{{ 'TagManager_TagUsageBenefits'|translate }}</p>

    <table piwik-content-table>
        <thead>
            <tr>
                <th class="name">{{ 'General_Name'|translate }}</th>
                <th class="type">{{ 'TagManager_Type'|translate }}</th>
                <th class="triggers">{{ 'TagManager_Triggers'|translate }}</th>
                <th class="lastUpdated">{{ 'TagManager_LastUpdated'|translate }}</th>
                <th class="action"
                    ng-show="tagList.hasWriteAccess">{{ 'General_Actions'|translate }}</th>
            </tr>
        </thead>
        <tbody>
        <tr ng-show="tagList.model.isLoading || tagList.model.isUpdating">
            <td colspan="5">
                <span class="loadingPiwik"><img src="plugins/Morpheus/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}</span>
            </td>
        </tr>
        <tr ng-show="!tagList.model.isLoading && (tagList.model.tags|length) == 0">
            <td colspan="5">
                {{ 'TagManager_NoTagsFound'|translate }}
                <a ng-click="tagList.createTag()"
                   class="createContainerTagNow"
                   ng-show="tagList.hasWriteAccess">{{ 'TagManager_CreateNewTagNow'|translate }}</a>
            </td>
        </tr>
        <tr ng-repeat="tag in tagList.model.tags|orderBy:'name':false"
            id="tag{{ tag.idtag }}"
            class="tags">
            <td class="name">{{ tag.name }}</td>
            <td class="type" title="{{ tag.typeMetadata.description }}">{{ tag.typeMetadata.name }}</td>
            <td class="triggers">
                <span ng-repeat="(fireTriggerIndex, fireTriggerId) in tag.fire_trigger_ids track by fireTriggerIndex">
                    <a ng-click="tagList.editTrigger(fireTriggerId)"
                       style="display: inline-block;vertical-align: top !important;"
                       ng-show="tagList.hasWriteAccess" class="chip">{{ tagList.triggers[fireTriggerId] }}</a>
                    <span ng-show="!tagList.hasWriteAccess" class="chip">{{ tagList.triggers[fireTriggerId] }}</span>
                </span>
                <span ng-show="tag.block_trigger_ids|length">{{ 'TagManager_Except'|translate }}:
                <span ng-repeat="blockTriggerId in tag.block_trigger_ids">
                    <a ng-click="tagList.editTrigger(blockTriggerId)"
                       ng-show="tagList.hasWriteAccess"
                       class="chip">{{ tagList.triggers[blockTriggerId] }}</a>
                    <span ng-show="!tagList.hasWriteAccess" class="chip">{{ tagList.triggers[blockTriggerId] }}</span>
                </span></span>

            </td>
            <td class="lastUpdated" title="{{ 'TagManager_CreatedOnX'|translate:tag.created_date_pretty }}"><span>{{ tag.updated_date_pretty }}</span></td>
            <td class="action"
                ng-show="tagList.hasWriteAccess">
                <a ng-click="tagList.editTag(tag.idtag, tag.type)"
                   class="table-action icon-edit" title="{{ 'TagManager_EditTag'|translate }}"></a>
                <a ng-click="tagList.deleteTag(tag)" class="table-action icon-delete"
                   title="{{ 'TagManager_DeleteX'|translate:('TagManager_Tag'|translate) }}"
                ></a>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="tableActionBar" ng-show="tagList.hasWriteAccess">
        <a class="createNewTag" value="" ng-click="tagList.createTag()"
        ><span class="icon-add"></span> {{ 'TagManager_CreateNewTag'|translate }}</a>
    </div>
    </div>

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

</div>