{% extends '@SyliusAdmin/layout.html.twig' %}
{% block title %}Clients | {{ sylius.channel.name }}{% endblock %}
{% block content %}
    <h1 class="page-title">{{ 'sylius.ui.customer_management'|trans }}</h1>
    <div id="vue-customer-grid">
        <customer-create-modal
            v-if="isModalOpen"
            :csrf-token="'{{ csrf_token('create_product') }}'"
            :groups-list="hydrateGroupsList"
            :countries-list="hydrateCountriesList"
            @refresh-grid="refreshGrid"
            @close="closeCustomerModal"
        ></customer-create-modal>
        <customer-group-modal
            v-if="isModalGroupOpen"
            @close="closeModalGroupGrid"
        ></customer-group-modal>
        <div class="button-group mb-5">
            <button type="button" class="btn btn-primary" @click="openModalCustomerForm"><i class="icon plus"></i> {{ 'sylius.ui.create_new_customer'|trans }}</button>
            <button type="button" class="btn btn-primary" @click="openModalGroupGrid"><i class="icon group"></i> {{ 'sylius.ui.manage_groups'|trans }}</button>
        </div>
        <customer-grid
            ref="customerGrid"
            @hydrate-modal-group-list="hydrateModal">
        >
        </customer-grid>
    </div>

{% endblock %}