<!DOCTYPE html>
<html>
    <body>
        <table v-for="labelData in labelsData" style="break-before: page">
            <tbody>
                <tr>
                    <td rowspan="6"><span id="vertical" class="ellipsize">{{getVertical(labelData)}}</span></td>
                    <td id="ticketFk">
                        {{labelData.clientFk ? `${labelData.ticketFk} « ${labelData.clientFk}` : labelData.ticketFk}}
                    </td>
                    <td colspan="2" id="shipped">{{dashIfEmpty(labelData.shipped)}}</td>
                </tr>
                <tr>
                    <td rowspan="3"><img :src="labelData.qrData" class="qr"/></td>
                    <td id="outline" class="ellipsize">{{dashIfEmpty(labelData.workerCode)}}</td>
                </tr>
                <tr>
                    <td id="outline" class="ellipsize">{{labelCount || labelData.labelCount || 0}}</td>
                </tr>
                <tr>
                    <td id="outline" class="ellipsize">{{labelData.code == 'V' ? (labelData.size || 0) + 'cm' : (labelData.volume || 0) + 'm³'}}</td>
                </tr>
                <tr>
                    <td><div id="agencyDescripton" class="ellipsize">{{dashIfEmpty(getAgencyDescription(labelData))}}</div></td>
                    <td id="bold">{{labelData.lineCount || 0}}</td>
                </tr>
                <tr>
                    <td id="nickname" class="ellipsize">{{dashIfEmpty(labelData?.nickName.toUpperCase()) }}</td>
                    <td id="bold">{{labelData.shippedHour || labelData.zoneHour}}</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>