{% import "_includes/forms" as forms %}

<div id="account-explorer" class="account-explorer">

    <h2 class="first">{{ "Google Analytics View"|t('analytics') }}</h2>

    {{ forms.selectField({
        label: "Account"|t('analytics'),
        class: 'account',
        name: name~'[account]',
        options: accountExplorerOptions.accounts
    }) }}

    {{ forms.selectField({
        label: "Property"|t('analytics'),
        class: 'property',
        name: name~'[property]',
        options: accountExplorerOptions.properties
    }) }}

    {{ forms.selectField({
        label: "View"|t('analytics'),
        class: 'view',
        name: name~'[view]',
        options: accountExplorerOptions.views
    }) }}

    <div class="buttons">
        <div class="btn small refresh-views">{{ 'Refresh'|t('analytics') }}</div> <div class="spinner hidden"></div>
    </div>
</div>

{% js %}
    var accountExplorer = new Analytics.AccountExplorer('#account-explorer');
{% endjs %}