<!DOCTYPE html>
<html>

<body>
    <table class="mainTable">
        <tbody>
            <tr>
                <td id="truck" class="ellipsize">{{labelData.truck || '---'}}</td>
            </tr>
            <tr>
                <td>
                    <table v-for="labelData in labelsData" class="zoneTable">
                        <thead>
                            <tr v-if="!labelData.isMatch" id="black">
                                <td id="routeFk" class="ellipsize">{{labelData.routeFk}}</td>
                                <td id="zone" class="ellipsize">{{labelData.zone || '---'}}</td>
                                <td id="labels" class="ellipsize">{{labelData.labels}}</td>
                            </tr>
                            <tr v-else>
                                <td id="routeFk" class="ellipsize">{{labelData.routeFk}}</td>
                                <td id="zone" class="ellipsize">{{labelData.zone || '---'}}</td>
                                <td id="labels" class="ellipsize">{{labelData.labels || '--'}}</td>
                            </tr>
                        </thead>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <img :src="QR" id="QR" />
                    <div id="right">
                        <div id="additionalInfo" class="ellipsize"><b>Pallet: </b>{{id}}</div>
                        <div id="additionalInfo" class="ellipsize"><b>User: </b>
                            {{ (username ? username.name : '---')}}
                        </div>
                        <div id="additionalInfo" class="ellipsize"><b>Day: </b>{{labelData.dayName.toUpperCase() ||
                            '---'}}</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>