<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Factura</title>
    <style>
      table { width: 90%; margin: auto; } table td, table th { font-size: 12px; } h4 {
      margin-bottom: 0px; } .text-center { text-align: center; } .text-right { text-align: right; }
      .wd33 { width: 33.33%; } .tbl-cliente { border: 1px solid #CCC; border-radius: 10px; padding:
      5px; } .wd10 { width: 10%; } .wd15 { width: 15% } .wd40 { width: 40% } .wd55 { width: 55%; }
      .tbl-detalle { border-collapse: collapse; } .tbl-detalle thead th { padding: 5px;
      background-color: #2f4b9a; color: #FFF; } .tbl-detalle tbody td { padding: 7.5px; }
      .tbl-detalle tfoot td { border-bottom: 1px solid #CCC; padding: 5px; }
    </style>
  </head>
  <body>
    <table class="tbl-header" style="margin-top: 20px;">
      <tbody>
        <tr>
          <td class="wd33">

            <img style="width: 34px;" src="data:image/png;base64,{{imgSrc}}" alt="IMG-LOGO" />
          </td>
          <td class="text-center wd33">
            <h4 style="letter-spacing: 1px;">
              <b>{{configuracion.name}}</b>
            </h4>
            <p>
              {{configuracion.address}}
              <br />
              Teléfono:
              {{configuracion.phone}}
              <br />
              Correo:
              {{configuracion.email}}
            </p>
          </td>
          <td class="text-right wd33">
            <p>
              No. Orden
              <strong>00{{pago.idorder}}</strong><br />
              Fecha:
              {{pago.dateCreated}}
              <br />

              {{pago.paymentMethod.title}}
              <br />

              Estado:
              {{pago.status}}
              <br />

              {{#if pago.reference}}
                Referencia cobro:
                {{pago.reference}}
                <br />
              {{/if}}
            </p>
          </td>
        </tr>
      </tbody>
    </table>
    <br />
    <table class="tbl-cliente">
      <tbody>
        <tr>
          <td class="wd10">
            Identificación:
          </td>
          <td class="wd40">{{pago.user.prefix}} {{pago.user.dni}}</td>
          <td class="wd10">Teléfono:</td>
          <td class="wd40">
            {{pago.user.phone}}
          </td>
        </tr>
        <tr>
          <td>
            Nombre:
          </td>
          <td>{{pago.user?.firstName}} {{pago.user?.lastName}} </td>
        </tr>
      </tbody>
    </table>
    <br />
    <table class="tbl-detalle">
      <thead>
        <tr>
          <th class="wd55">Descripción</th>
          <th class="wd15 text-right">Precio</th>
          <th class="wd15 text-center">Cantidad</th>
          <th class="wd15 text-right">Importe</th>
        </tr>
      </thead>
      <tbody>
        {{#each pago.detail}}
          <tr>
            <td>
              {{title}}
            </td>
            <td class="text-right">
              {{total}}$
            </td>
            <td class="text-center">
              {{quantity}}
            </td>
            <td class="text-right">
              {{totalDetail}}$
            </td>
          </tr>
        {{/each}}
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" class="text-right">Total:</td>
          <td class="text-right">
            {{pago.total}}$
          </td>
        </tr>
      </tfoot>
    </table>

    <div>
      <p class="text-center" style="font-size: 14px;">
        Si tienes preguntas sobre este pago,
        <br />
        póngase en contacto con nombre, teléfono y Email
        <h4 class="text-center">¡Gracias por tu compra!</h4>
      </p>
    </div>
  </body>
</html>

{{!  pago, configuracion, imgSrc: base64Logo }}