<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;"/>
    <title>Avery Template 22806</title>
    [% if Model.BarcodeFormat == "QRCode" -%]
    <script src="[[Model.BaseUrl]]/SystemResources/Scripts/Libraries/qrcodejs/1.0.0/qrcode.min.js"></script>
    [% endif -%]
    <style>
        [% if Model.BarcodeFormat == "Code39" -%]
        @font-face {
            font-family: LibreBarcode39;
            src: url([[Model.BaseUrl]]/SystemResources/Styles/Fonts/LibreBarcode/LibreBarcode39-Regular.ttf);
        }
        [% endif -%]
        body {
            width: 8.5in;
            margin: 0;
        }

        .page {
            width: 8.5in;
            height: 11in;
            padding: 0.68in 0 0 0.68in;
        }

        .row {
            height: 2.15in;
        }

        .label {
            width: 2.05in;
            height: 2.05in;
            float: left;
            overflow: hidden;
            margin: 2.9pt 0.05in;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .space {
            float: left;
            width: 0.685in;
            height: 2in;
        }

        .empty-row {
            height: 0.639in;
        }

        .description {
            font-size: 12px;
            color: rgb(45, 50, 199);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            min-height: 28px;
        }

        .images-and-part-numbers {
            display: flex;
            flex-basis: 50%;
            gap: 4px;
        }

        .images {
            max-width: 35%;
            display: flex;
            flex-direction: column;
            flex-basis: 35%;
            min-width: 35%;
            gap: 4px;
        }

        .images img {
            max-width: 100%;
            max-height: 68.88px;
        }

        .badges {
            display: flex;
            gap: 4px;
        }

        .badges img {
            max-width: 50%;
        }

        .part-numbers {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .part-number,
        .my-part-number,
        .mfg-part-number {
            float: left;
            font-size: 10px;
            text-align: start;
            overflow: hidden;
            word-break: break-all;
        }

        .barcode-wrapper {
            min-height: 0;
            display: flex;
            justify-content: center;
            flex-basis: 50%;
            flex-grow: 1;
        }

        .barcode-wrapper > img {
            max-height: 100%;
        }
    
    </style>
</head>

<body>
[% for page in Model.Pages -%]
<div class="page">
    <div class="row">
        <div class="label">[[page.Label1]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label2]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label3]]</div>
    </div>
    <div class="empty-row"></div>
    <div class="row">
        <div class="label">[[page.Label4]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label5]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label6]]</div>
    </div>
    <div class="empty-row"></div>
    <div class="row">
        <div class="label">[[page.Label7]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label8]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label9]]</div>
    </div>
    <div class="empty-row"></div>
    <div class="row">
        <div class="label">[[page.Label10]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label11]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label12]]</div>
    </div>
    <div class="empty-row"></div>
</div>
[% endfor -%]

[% if Model.BarcodeFormat == "QRCode" -%]
<script>
        const start = Date.now();
        var qrElements = document.getElementsByClassName("qr-code-target");
        for (var x = 0; x < qrElements.length; x++) {
            var element = qrElements[x];
            new QRCode(element, element.dataset?.barcodeValue);
        }
        console.log(`${Date.now() - start}`);
    </script>
[% endif -%]
</body>
</html>