<div id='entityEditContainer' feature="true"
     ng-show="manageGoals.showGoalList"
     piwik-content-block content-title="{{ 'Goals_ManageGoals'|translate|e('html_attr') }}"
     class="managegoals">

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

    <div class="contentHelp">
        {{ 'Goals_LearnMoreAboutGoalTrackingDocumentation'|translate("<a target='_blank' rel='noreferrer noopener' href='https://matomo.org/docs/tracking-goals-web-analytics/'>","</a>")|raw }}

        {% if not ecommerceEnabled %}
            <br /><br/>
            {% set websiteManageText %}
                <a href='{{ linkTo({'module':'SitesManager','action':'index' }) }}'>{{ 'SitesManager_WebsitesManagement'|translate }}</a>
            {% endset %}
            {% set ecommerceReportText %}
                <a href="https://matomo.org/docs/ecommerce-analytics/" rel="noreferrer noopener" target="_blank">{{ 'Goals_EcommerceReports'|translate }}</a>
            {% endset %}
            {{ 'Goals_Optional'|translate }} {{ 'Goals_Ecommerce'|translate }}: {{ 'Goals_YouCanEnableEcommerceReports'|translate(ecommerceReportText,websiteManageText)|raw }}
        {% endif %}
    </div>

    <table piwik-content-table>
        <thead>
        <tr>
            <th class="first">Id</th>
            <th>{{ 'Goals_GoalName'|translate }}</th>
            <th>{{ 'General_Description'|translate }}</th>
            <th>{{ 'Goals_GoalIsTriggeredWhen'|translate }}</th>
            <th>{{ 'General_ColumnRevenue'|translate }}</th>
            {{ postEvent("Template.beforeGoalListActionsHead") }}
            {% if userCanEditGoals %}
                <th>{{ 'General_Edit'|translate }}</th>
                <th>{{ 'General_Delete'|translate }}</th>
            {% endif %}
        </tr>
        </thead>
        {% if goals is empty %}
            <tr>
                <td colspan='8'>
                    <br/>
                    {{ 'Goals_ThereIsNoGoalToManage'|translate(siteName)|rawSafeDecoded }}.
                    <br/><br/>
                </td>
            </tr>
        {% else %}
            {% for goal in goals %}
                <tr id="{{ goal.idgoal }}">
                    <td class="first">{{ goal.idgoal }}</td>
                    <td>{{ goal.name }}</td>
                    <td>{{ goal.description }}</td>
                    <td>
                        <span class='matchAttribute'>{{ goal.match_attribute }}</span>
                        {% if goal.match_attribute == 'visit_duration' %}
                            {{ 'General_OperationGreaterThan'|translate|lcfirst }} {{ 'Intl_NMinutes'|translate(goal.pattern) }}
                        {% else %}
                        {% if goal.pattern_type is defined %}
                            <br/>
                            {{ 'Goals_Pattern'|translate }} {{ goal.pattern_type }}: {{ goal.pattern }}
                        {% endif %}
                        {% endif %}
                    </td>
                    <td class="center">
                        {% if goal.revenue==0 %}-{% else %}{{ goal.revenue|money(idSite)|raw }}{% endif %}
                    </td>
                    {{ postEvent("Template.beforeGoalListActionsBody", goal) }}
                    {% if userCanEditGoals %}
                        <td style="padding-top:2px">
                            <button ng-click="manageGoals.editGoal({{ goal.idgoal }})" class="table-action" title="{{ 'General_Edit'|translate }}">
                                <span class="icon-edit"></span>
                            </button>
                        </td>
                        <td style="padding-top:2px">
                            <button ng-click="manageGoals.deleteGoal({{ goal.idgoal }})" class="table-action" title="{{ 'General_Delete'|translate }}">
                                <span class="icon-delete"></span>
                            </button>
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        {% endif %}
    </table>

    {% if userCanEditGoals and onlyShowAddNewGoal is not defined %}
        <div class="tableActionBar">
            <button id="add-goal" ng-click="manageGoals.createGoal()">
                <span class="icon-add"></span>
                {{ 'Goals_AddNewGoal'|translate }}
            </button>
        </div>
    {% endif %}

</div>

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

<script type="text/javascript">
    var goalTypeToTranslation = {
        "manually": "{{ 'Goals_ManuallyTriggeredUsingJavascriptFunction'|translate }}",
        "file": "{{ 'Goals_Download'|translate }}",
        "url": "{{ 'Goals_VisitUrl'|translate }}",
        "title": "{{ 'Goals_VisitPageTitle'|translate }}",
        "external_website": "{{ 'Goals_ClickOutlink'|translate }}",
        "event_action": "{{ 'Goals_SendEvent'|translate }} ({{ 'Events_EventAction'|translate }})",
        "event_category": "{{ 'Goals_SendEvent'|translate }} ({{ 'Events_EventCategory'|translate }})",
        "event_name": "{{ 'Goals_SendEvent'|translate }} ({{ 'Events_EventName'|translate }})",
        "visit_duration": "{{ 'Goals_VisitDuration'|translate|ucfirst }}"
    };

    $(document).ready(function () {
        // translation of the goal "match attribute" to human readable description
        $('.matchAttribute').each(function () {
            var matchAttribute = $(this).text();
            var translation = goalTypeToTranslation[matchAttribute];
            $(this).text(translation);
        });
    });
</script>