<div class="ui segment">
    <div class="ui small header">
        {{ 'sylius.ui.shipping'|trans }}
    </div>
    {% if variant.shippingCategory is same as(null) and variant.width is same as(null) and variant.height is same as(null) and variant.depth is same as(null) and variant.weight is same as(null) %}
        <div class="ui teal message">
            <p>{{ 'sylius.ui.no_shipping_data'|trans }}</p>
        </div>
    {% else %}
        <table class="ui very basic celled table">
            <tbody>
            <tr>
                <td class="five wide gray text"><strong>{{ 'sylius.ui.shipping_category'|trans }}</strong></td>
                <td>{{ variant.shippingCategory }}</td>
            </tr>
            <tr>
                <td class="five wide gray text"><strong>{{ 'sylius.ui.width'|trans }}</strong></td>
                <td>{{ variant.width }}</td>
            </tr>
            <tr>
                <td class="five wide gray text"><strong>{{ 'sylius.ui.height'|trans }}</strong></td>
                <td>{{ variant.height }}</td>
            </tr>
            <tr>
                <td class="five wide gray text"><strong>{{ 'sylius.ui.depth'|trans }}</strong></td>
                <td>{{ variant.depth }}</td>
            </tr>
            <tr>
                <td class="five wide gray text"><strong>{{ 'sylius.ui.weight'|trans }}</strong></td>
                <td>{{ variant.weight }}</td>
            </tr>
            </tbody>
        </table>
    {% endif %}
</div>
