<!doctype html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Factura</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css"
        href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css" />
</head>

<body style="font-family:Arial; font-size:small;">
    <div class="container">
        <h5> <b>CATÁLOGO <%=catalogo%></b></h5>
        <div class="col-10 table-responsive">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th style="width:40%;">PRODUCTO</th>
                        <th style="width:20%;">ENVASE</th>
                        <th style="width:20%;">CÓDIGO DE BARRAS</th>
                    </tr>
                </thead>
                <tbody>
                    <%detalle.forEach(function(dto) {%>
                        <tr>
                            <td style="height: 100px;">
                                <%=dto.producto%>
                            </td>
                            <td>
                                <%=dto.envase%>
                            </td>

                           <td style="text-align:right;">
                                <div style="float: left; margin-left: 30px; margin-bottom: 15px;">
                                    <img alt='Barcode Generator'
                                        src='<%=dto.barra%>'
                                        height="50" width="150" />
                                </div>
                            </td>

                            <!-- <td style="text-align:right;">
                                <div style="float: left; margin-left: 30px; margin-bottom: 15px;">
                                    <img src="<%=dto.barra%>" height="40" width="150" />
                                </div>
                            </td> -->


                            <!-- <td style="text-align:right;">
                                <div style="float: left; margin-left: 30px; margin-bottom: 15px;">
                                    <img alt='Barcode Generator'
                                        src='https://barcode.tec-it.com/barcode.ashx?data=<%=dto.codigo%>&code=Code39&multiplebarcodes=true&translate-esc=false&unit=Fit&dpi=96&imagetype=Gif&rotation=0&color=%23000000&bgcolor=%23ffffff&codepage=Default&qunit=Mm&quiet=0'
                                        height="40" width="150" />
                                </div>
                            </td> -->

                            <!-- <td style="text-align:left;">
                                <div style="float: left; margin-left: 30px; margin-bottom: 15px;">
                                    <img alt='Barcode Generator'
                                        src='/barcode?data=<%=dto.codigo%>'
                                        height="40" width="150" />
                                </div>
                            </td> -->
                        </tr>
                        <%});%>
                </tbody>
            </table>
        </div>
    </div>

</body>

</html>