{% if preview.errors %}
    <div class="ops-note ops-note--error"><span class="ui-icon">error</span><div><strong>Realizacja nie jest gotowa.</strong><ul>{% for error in preview.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></div>
{% else %}
    <div class="ops-note ops-note--info"><span class="ui-icon">check_circle</span><p><strong>Walidacja zakończona.</strong> Wszystkie wymagane dane są dostępne.</p></div>
{% endif %}
{% if preview.warnings %}
    <div class="ops-note ops-note--warm"><span class="ui-icon">warning</span><div><strong>Ostrzeżenia</strong><ul>{% for warning in preview.warnings %}<li>{{ warning }}</li>{% endfor %}</ul></div></div>
{% endif %}
<div class="fulfillment-validation-grid">
    {% for row in preview.items %}
        <article class="fulfillment-validation-item {{ row.valid ? 'is-valid' : 'is-invalid' }}">
            <strong>{{ row.salesOrderItem.name }}</strong>
            <span>{{ row.quantity }} szt. · pozostało {{ row.remainingQuantity }}</span>
            <span>SKU: {{ row.providerSku ?: 'brak' }}</span>
            <span>POD ART front: {{ row.artwork.front.resolved ? 'OK' : 'brak' }}</span>
            <span class="fulfillment-validation-item__mockup">Mockup: {{ row.mockup.ready ? 'OK' : row.mockup.status }}</span>
        </article>
    {% endfor %}
</div>