<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;"/>
    <title>Avery Template 94224</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.7in 0 0 0.96in;
        }

        .row {
            height: 1.105in;
        }

        .label {
            width: 3in;
            height: 1in;
            margin-top: 2.5pt;
            margin-right: 0.1875in;
            margin-left: 0.1875in;
            float: left;
            text-align: left;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .space {
            float: left;
            width: 0.8in;
            height: 1in;
        }

        .empty-row {
            height: 0.2855in;
            width: 6.75in;
        }

        .images-and-text {
            display: flex;
            width: 3in;
            flex-wrap: nowrap;
            gap: 4px;
            [% if Model.BarcodeFormat == "Code39" -%] 
            max-height: 55px;
            [% else %]
            height: 1in; 
            [% endif -%]
        }

        .images {
            float: left;
            width: 20%;
            height: 100%;
            align-self: flex-start;
        }

        .images > img {
            [% if Model.BarcodeFormat == "Code39" -%] max-height: .5in; [% else -%] height: 75%; [% endif -%]
            max-width: 100%;
            object-fit: scale-down;
            display: block;
        }

        .badges {
            height: 25%;
            display: flex;
            gap: 4px;
            justify-content: space-evenly;
        }

        .badges > img {
            float: left;
            max-width: 50%;
            max-height: 100%;
            object-fit: contain;
        }

        .text-data {
            float: left;
            [% if Model.BarcodeFormat == "QRCode" -%] width: 45%; [% else -%] width: 80%; [% endif -%]
            height: 100%;
            font-size: 11px;
        }

        .description {
            color: rgb(45, 50, 199);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-wrap: break-word;
        }

        .description,
        .part-number,
        .my-part-number,
        .mfg-part-number {
            overflow: hidden;
            word-break: break-all;
        }

        .qr-code-target {
            [% if Model.BarcodeFormat == "QRCode" -%] width: 35%; [% else -%] width: 30%; [% endif -%]
            width: ;
            display: flex;
            align-items: start;
        }
        
        .qr-code-target canvas {
            max-height: 56px;
            max-width: 56px;
        }

        .qr-code-target > img {
            width: 100%;
            vertical-align: middle;
            height: 1in;
            width: 1in;
        }
    </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>
    <div class="empty-row"></div>
    <div class="row">
        <div class="label">[[page.Label3]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label4]]</div>
    </div>
    <div class="empty-row"></div>
    <div class="row">
        <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>
    <div class="empty-row"></div>
    <div class="row">
        <div class="label">[[page.Label9]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label10]]</div>
    </div>
    <div class="empty-row"></div>
    <div class="row">
        <div class="label">[[page.Label11]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label12]]</div>
    </div>
    <div class="empty-row"></div>
    <div class="row">
        <div class="label">[[page.Label13]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label14]]</div>
    </div>
    <div class="empty-row"></div>
    <div class="row">
        <div class="label">[[page.Label15]]</div>
        <div class="space"></div>
        <div class="label">[[page.Label16]]</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>