<div id='entityEditContainer' class="managegoals" style="display:none;">
    <table class="dataTable entityTable">
        <thead>
        <tr>
            <th class="first">Id</th>
            <th>{{ 'Goals_GoalName'|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='7'>
                    <br/>
                    {{ 'Goals_ThereIsNoGoalToManage'|translate(siteName)|raw }}.
                    <br/><br/>
                </td>
            </tr>
        {% else %}
            {% for goal in goals %}
                <tr>
                    <td class="first">{{ goal.idgoal }}</td>
                    <td>{{ goal.name }}</td>
                    <td><span class='matchAttribute'>{{ goal.match_attribute }}</span>
                        {% if goal.pattern_type is defined %}
                            <br/>
                            {{ 'Goals_Pattern'|translate }} {{ goal.pattern_type }}: {{ goal.pattern }}
                        {% endif %}
                    </td>
                    <td class="text-center">
                        {% if goal.revenue==0 %}-{% else %}{{ goal.revenue|money(idSite)|raw }}{% endif %}
                    </td>

                    {{ postEvent("Template.beforeGoalListActionsBody", goal) }}

                    {% if userCanEditGoals %}
                        <td class="text-center">
                            <button id="{{ goal.idgoal }}" class="edit-goal btn btn-flat btn-lg" title="{{ 'General_Edit'|translate }}">
                                <span class="icon-edit"></span>
                            </button>
                        </td>
                        <td class="text-center">
                            <button id="{{ goal.idgoal }}" class="delete-goal btn btn-flat btn-lg" title="{{ 'General_Delete'|translate }}">
                                <span class="icon-delete"></span>
                            </button>
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        {% endif %}
    </table>

    {% if userCanEditGoals and onlyShowAddNewGoal is not defined %}
        <p>
            <button id="add-goal" class="btn btn-lg btn-flat">
                <span class="icon-add"></span>
                {{ 'Goals_AddNewGoal'|translate }}
            </button>
        </p>
    {% 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 }})"
    };

    $(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>
