
doctype html
html(lang='en')
  head
    meta(http-equiv='Content-Type', content='text/html; charset=UTF-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    meta(name='description', content='Cuba admin is super flexible, powerful, clean & modern responsive bootstrap 5 admin template with unlimited possibilities.')
    meta(name='keywords', content='admin template, Cuba admin template, dashboard template, flat admin template, responsive admin template, web app')
    meta(name='author', content='pixelstrap')
    link(rel='icon', href='../assets/images/favicon.png', type='image/x-icon')
    link(rel='shortcut icon', href='../assets/images/favicon.png', type='image/x-icon')
    title Cuba - Premium Admin Template
    // Themify icon
    link(rel='stylesheet', type='text/css', href='../assets/css/vendors/themify.css')
    // Google font
    link(href='https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900', rel='stylesheet')
    link(href='https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&display=swap', rel='stylesheet' )
    style(type='text/css').
      body{
        font-family: Rubik, sans-serif;
        display: block;
        color: #000248;
      }
      .table-wrapper {
        width: 1160px;
        margin: 0 auto;
      }
      h2 {
        margin: 0;
        font-weight: 500;
        font-size: 40px;
      }
      h6 {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
      }
      span {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 400;
      }
      .banner-image {
        margin: 13px 0 10px;
      }
      .order-details td span {
        margin-bottom: -4px;
        display: block;
      }
      .order-details th:first-child, .order-details td:first-child {
        min-width: 490px;
      }
      .order-details th:nth-child(2), .order-details td:nth-child(2) {
        width: 20%;
      }
      @media (max-width: 1199px) {
        .table-wrapper {
          width: 930px;
        }
        .address {
          width: 21% !important;
        }
      }
  body
    table.table-wrapper
      tbody 
        tr 
          td 
            table(style='width: 100%;').logo-wrappper
              tbody
                tr
                  td
                    img(src='../assets/images/logo/logo.png', alt='logo')
                    span(style="color: #52526C;opacity: 0.8;display:block;margin-top: 10px;") 202-555-0258
                  td.address(style='text-align: right; color: #52526C;opacity: 0.8; width: 16%;')
                    span 1982 Harvest Lane
                        |  New York, NY12210
                        |  United State
        tr 
          td 
            img.banner-image(src='../assets/images/email-template/invoice-1/1.png', alt='background')
        tr 
          td 
            table.bill-content(style='width: 100%;')
              tbody 
                tr 
                  td(style="width: 36%")
                    span(style="color: #52526C;opacity: 0.8;") Billed To
                    h6(style="width: 46%") Cuba Matchett Vandelay Group LTD 
                  td(style="width: 21%;")
                    span(style="color: #52526C;opacity: 0.8;") Invoice Date
                    h6 09/03/2023
                  td
                    span(style="color: #52526C;opacity: 0.8;") Invoice Number
                    h6 #VL25000365
                  td(style="text-align: right;")
                    span(style="color: #52526C;opacity: 0.8;") Amount Dus (USD)
                    h2 $10,908.00
                tr 
                  td(style="width: 36%")
                    h6(style="width: 63%;padding-top: 20px;") 2118 Thornridge Cir. Syracuse, Connecticut 35624, United State
        tr 
          td 
            table.order-details(style='width: 100%;border-collapse: separate;border-spacing: 0 10px;')
              thead 
                tr(style="background: #7366FF;border-radius: 8px;overflow: hidden;box-shadow: 0px 10.9412px 10.9412px rgba(82, 77, 141, 0.04), 0px 9.51387px 7.6111px rgba(82, 77, 141, 0.06), 0px 5.05275px 4.0422px rgba(82, 77, 141, 0.0484671);border-radius: 5.47059px;") 
                  th(style="padding: 18px 15px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;text-align: left")
                    span(style="color: #fff;") Description
                  th(style="padding: 18px 15px;text-align: left")
                    span(style="color: #fff;") Rate
                  th(style="padding: 18px 15px;text-align: left")
                    span(style="color: #fff;") Qty
                  th(style="padding: 18px 15px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;text-align: right")
                    span(style="color: #fff;") Line Total
              tbody 
                tr(style="box-shadow: 0px 10.9412px 10.9412px rgba(82, 77, 141, 0.04), 0px 9.51387px 7.6111px rgba(82, 77, 141, 0.06), 0px 5.05275px 4.0422px rgba(82, 77, 141, 0.0484671);border-radius: 5.47059px;") 
                  td(style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;")
                    span(style="min-width: 7px;height: 7px;border: 4px solid #7366FF;background: #fff;border-radius: 100%;display: inline-block;")
                    span Project
                  td(style="padding: 18px 15px;")
                    span $4,000.00
                  td(style="padding: 18px 15px;") 
                    span 1
                  td(style="padding: 18px 15px;text-align: right")
                    span $4,000.00
                tr(style="box-shadow: 0px 10.9412px 10.9412px rgba(82, 77, 141, 0.04), 0px 9.51387px 7.6111px rgba(82, 77, 141, 0.06), 0px 5.05275px 4.0422px rgba(82, 77, 141, 0.0484671);border-radius: 5.47059px;") 
                  td(style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;")
                    span(style="min-width: 7px;height: 7px;border: 4px solid #FF3364;background: #fff;border-radius: 100%;display: inline-block;")
                    span Creative Design
                  td(style="padding: 18px 15px;") 
                    span $8,000.00
                  td(style="padding: 18px 15px;") 
                    span 2
                  td(style="padding: 18px 15px;text-align: right") 
                    span $16,000.00
                tr(style="box-shadow: 0px 10.9412px 10.9412px rgba(82, 77, 141, 0.04), 0px 9.51387px 7.6111px rgba(82, 77, 141, 0.06), 0px 5.05275px 4.0422px rgba(82, 77, 141, 0.0484671);border-radius: 5.47059px;") 
                  td(style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;")
                    span(style="min-width: 7px;height: 7px;border: 4px solid #FFAE46;background: #fff;border-radius: 100%;display: inline-block;")
                    span Web Development
                  td(style="padding: 18px 15px;") 
                    span $2,000.00
                  td(style="padding: 18px 15px;") 
                    span 2
                  td(style="padding: 18px 15px;text-align: right") 
                    span $4,000.00
                tr(style="box-shadow: 0px 10.9412px 10.9412px rgba(82, 77, 141, 0.04), 0px 9.51387px 7.6111px rgba(82, 77, 141, 0.06), 0px 5.05275px 4.0422px rgba(82, 77, 141, 0.0484671);border-radius: 5.47059px;") 
                  td(style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;")
                    span(style="min-width: 7px;height: 7px;border: 4px solid #54BA4A;background: #fff;border-radius: 100%;display: inline-block;")
                    span Graphics Design
                  td(style="padding: 18px 15px;") 
                    span $2,000.00
                  td(style="padding: 18px 15px;") 
                    span 1
                  td(style="padding: 18px 15px;text-align: right") 
                    span $2,000.00
                tr 
                  td 
                  td 
                  td(style="padding: 5px 0; padding-top: 15px;") 
                    span(style="color: #52526C;") Subtotal
                  td(style="padding: 5px 0;text-align: right;padding-top: 15px;")
                    span $26,000.00
                tr 
                  td 
                  td 
                  td(style="padding: 5px 0;padding-top: 0;") 
                    span(style="color: #52526C;") Tax(5%)
                  td(style="padding: 5px 0;text-align: right;padding-top: 0;")
                    span $1,000.00
                tr 
                  td 
                  td 
                  td(style="padding: 10px 0;") 
                    span(style="font-weight: 600;") Amount Due (USD)
                  td(style="padding: 10px 0;text-align: right")
                    span(style="font-weight: 600;") $27,000.00
      tr(style="width: 100%; display: flex; justify-content: space-between; margin-top: 12px;")
        td 
          img(src="../assets/images/email-template/invoice-1/sign.png" alt="sign")
          span(style="display:block;background: rgba(82, 82, 108, 0.3);height: 1px;width: 200px;margin-bottom:10px;")
          span(style="color: rgba(82, 82, 108, 0.8);") Authorized Sign
        td 
          span(style="display: flex; justify-content: end; gap: 15px;")
            a(style="background: rgba(115, 102, 255, 1); color:rgba(255, 255, 255, 1);border-radius: 10px;padding: 18px 27px;font-size: 16px;font-weight: 600;outline: 0;border: 0; text-decoration: none;" href="#!" onclick="window.print();") Print Invoice
              i.icon-arrow-right(style="font-size:13px;font-weight:bold; margin-left: 10px;")
            a(style="background: rgba(115, 102, 255, 0.1);color: rgba(115, 102, 255, 1);border-radius: 10px;padding: 18px 27px;font-size: 16px;font-weight: 600;outline: 0;border: 0; text-decoration: none;" href="../template/invoice-1.html" download='') Download
              i.icon-arrow-right(style="font-size:13px;font-weight:bold; margin-left: 10px;")