{% extends '_layouts/cp' %}

{% set title = 'Experiments'|t('ab-test') %}

{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}

{% do view.registerTranslations('app', [
    'Name',
]) %}

{% do view.registerTranslations('ab-test', [
    'Start Date',
    'End Date',
    'No. of variants',
    'No experiments exist yet.',
]) %}

{% block actionButton %}
    <a href="{{ url('ab-test/experiments/new') }}" class="btn submit add icon">{{ 'New experiment'|t('ab-test') }}</a>
{% endblock %}

{% set crumbs = [
    { label: 'A/B Test'|t('ab-test'), url: url('ab-test') }
] %}

{% block content %}
    <div id="abtest-experiments-vue-admin-table"></div>
{% endblock %}

{% set tableData = [] %}
{% for experiment in experiments %}

    {% set itemCount = 0 %}
    {% for section in experiment.getSections() %}
        {% set itemCount = itemCount + section.getDrafts()|length %}
    {% endfor %}

    {% set tableData = tableData|merge([{
        id: experiment.id,
        title: experiment.name|t('site'),
        url: experiment.cpEditUrl,
        startDate: experiment.startDate ? experiment.startDate|datetime('short') : null,
        endDate: experiment.endDate ? experiment.endDate|datetime('short') : null,
        itemCount: itemCount
    }]) %}
{% endfor %}

{% js %}
    var columns = [
        { name: '__slot:title', title: Craft.t('app', 'Name') },
        { name: 'startDate', title: Craft.t('ab-test', 'Start Date') },
        { name: 'endDate', title: Craft.t('ab-test', 'End Date') },
        { name: 'itemCount', title: Craft.t('ab-test', 'No. of variants') },
    ];

    new Craft.VueAdminTable({
        columns: columns,
        container: '#abtest-experiments-vue-admin-table',
        deleteAction: 'ab-test/experiments/delete',
        emptyMessage: Craft.t('ab-test', 'No experiments exist yet.'),
        tableData: {{ tableData|json_encode|raw }},
    });
{% endjs %}