{% extends '@SyliusAdmin/layout.html.twig' %}
{% block title %}Articles | {{ sylius.channel.name }}{% endblock %}
{% block content %}
    <h1 class="page-title">{{ 'sylius.ui.product_management'|trans }}</h1>
    <div id="vue-product-grid">
        <product-create-modal
            v-if="isModalOpen"
            :csrf-token="'{{ csrf_token('create_product') }}'"
            :product="selectedProduct"
            :product-field="modalProductField"
            :taxons="modalTaxons"
            :available-labels="modalLabels"
            :is-edit-mode="isEditMode"
            :show-price-grid-mode="showPriceGridMode"
            @close="closeProductModal"
            @refresh-grid="refreshGrid"
            @update:product="selectedProduct = $event"
        ></product-create-modal>
        <product-taxon-modal
            v-if="isTaxonModalOpen"
            :is-taxon-grid-show="isTaxonGridShow"
            @close="closeTaxonModal"
        ></product-taxon-modal>
        <div class="button-group">
            <button type="button" class="btn btn-primary" @click="openModalForNewProduct"><i class="icon plus"></i> {{ 'sylius.ui.create_new_product'|trans }}</button>
            <button type="button" class="btn btn-primary" @click="openModalForPrice"><i class="icon euro"></i> {{ 'sylius.ui.manage_prices'|trans }}</button>
            <button type="button" class="btn btn-primary" @click="openModalForTaxons"><i class="icon list layout"></i> {{ 'sylius.ui.edit_catalog_categories'|trans }}</button>
        </div>
        <product-grid
            ref="productGrid"
            :available-labels="modalLabels"
            :csrf-token="'{{ csrf_token('create_product') }}'"
            @open-product-modal="openModalForProduct"
            @hydrate-modal-taxons="hydrateModalTaxons">
        </product-grid>
    </div>

{% endblock %}