{% set product = hookable_metadata.context.resource %}

{% if product.isSimple %}
    <div class="tab-pane {% if hookable_metadata.configuration.active|default(false) %}show active{% endif %}" id="product-channel-pricing" role="tabpanel" tabindex="0">
        {% set variant_form = hookable_metadata.context.form.variant %}

        {% set is_channel_pricing_invalid = variant_form.channelPricings.vars.errors is not empty %}

        {% if is_channel_pricing_invalid %}
            <div class="alert alert-danger" role="alert">
                <div class="d-flex">
                    <div>
                        {{ ux_icon('tabler:exclamation-circle') }}
                    </div>
                    <div {{ sylius_test_html_attribute('missing-channel-price') }}>
                        {% set first_error = variant_form.channelPricings.vars.errors|first %}
                        {{ first_error.messageTemplate|trans({}, 'validators') }}
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="card mb-3">
            {% if is_channel_pricing_invalid %}
                <div class="card-status-top bg-danger"></div>
            {% endif %}
            <div class="card-header">
                <div class="card-title">
                    {{ 'sylius.ui.channel_pricings'|trans }}
                </div>
            </div>
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist">
                    {% for channel_code, channel_pricing in variant_form.channelPricings %}
                        {% set channel_error_count = variant_form.channelPricings.vars.channels_errors_count[channel_code] %}
                        <li class="nav-item">
                            <a
                                class="nav-link {% if loop.index0 == 0 %}active{% endif %}"
                                data-bs-toggle="tab"
                                href="#{{ channel_code }}"
                                role="tab"
                                {{ sylius_test_html_attribute('channel-tab', channel_code) }}
                            >
                                {{ channel_pricing.vars.label }}
                                {% if channel_error_count > 0 %}
                                    <span class="text-white badge rounded-pill bg-danger ms-1">{{ channel_error_count }}</span>
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    {% for channel_code, channel_pricing in variant_form.channelPricings %}
                        <div class="tab-pane fade {% if loop.index0 == 0 %}show{% endif %} active" id="{{ channel_code }}" role="tabpanel">
                            {% if channel_code not in product.channels|map(channel => channel.code) %}
                                <div class="alert alert-info">
                                    {{ 'sylius.ui.product.product_not_active_in_channel'|trans }}
                                </div>
                            {% endif %}

                            {% hook 'channel_pricing' with { channel_code, channel_pricing } %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endif %}