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;
      }
  body
    table(style="width:1160px;margin:0 auto;")
      tbody 
        tr 
          td 
            table(style='width: 100%;')
              tbody
                tr
                    td
                        img(src='../assets/images/logo/logo.png', alt='logo')
                        address(style='color: #52526C;opacity: 0.8; width: 40%; margin-top: 10px; font-style:normal;')
                            span(style="font-size: 18px; line-height: 1.5; font-weight: 500;") 1982 Harvest Lane
                                |  New York, NY12210
                                |  United State
                    td(style='color: #52526C;opacity: 0.8; text-align:end;')
                        span(style="display:block; line-height: 1.5; font-size:18px; font-weight:500;") Email : cuba@themesforest.com
                        span(style="display:block; line-height: 1.5; font-size:18px; font-weight:500;") Website: www.cubathemes.com
                        span(style="display:block; line-height: 1.5; font-size:18px; font-weight:500;") Contact No : (316) 555-0116
        tr 
            td 
                table(style="width:100%;")
                    tbody 
                        tr(style="display:flex;justify-content:space-between;border-top: 1px solid rgba(82, 82, 108, 0.3);border-bottom: 1px solid rgba(82, 82, 108, 0.3);padding: 25px 0;")
                            td(style="display:flex;align-items:center; gap: 6px;") 
                                span(style="color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 500;") Invoice No.
                                h4(style="margin:0;font-weight:400; font-size: 18px;") #VL25000365
                            td(style="display:flex;align-items:center; gap: 6px;") 
                                span(style="color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 500;") Date : 
                                h4(style="margin:0;font-weight:400; font-size: 18px;") 09/03/2023
                            td(style="display:flex;align-items:center; gap: 6px;") 
                                span(style="color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 500;") Payment Status :
                                h4(style="margin:0;font-weight:400; font-size: 18px;padding:6px 18px; background-color:rgba(84, 186, 74, 0.1);color:#54BA4A; border-radius: 5px;") Paid
                            td(style="display:flex;align-items:center; gap: 6px;") 
                                span(style="color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 500;") Total Amount :
                                h4(style="margin:0;font-weight:500; font-size: 18px;") $26,410.00
        tr 
          td 
            table(style='width: 100%;')
              tbody 
                tr(style="padding: 28px 0; display:block;") 
                  td(Style="width:63%;")
                    span(style="color: #52526C;opacity: 0.8; font-size: 16px; font-weight: 500;") BILLING ADDRESS
                    h4(style="font-weight:400; margin: 12px 0 6px 0; font-size: 18px;") Brooklyn Simmons
                    span(style="width: 54%; display:block; line-height: 1.5; color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 400;") 2118 Thornridge Cir. Syracuse, Connecticut 35624, United State
                    span(style="line-height:2.6; color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 400;") Phone : (239) 555-0108
                  td
                    span(style="color: #52526C;opacity: 0.8;font-size: 16px; font-weight: 500;") SHIPPING ADDRESS
                    h4(style="font-weight:400; margin: 12px 0 6px 0; font-size: 18px;") Cameron Williamson
                    span(style="width: 95%; display:block; line-height: 1.5; color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 400;") 2972 Westheimer Rd. Santa Ana, Illinois 85486 
                    span(style="line-height:2.6; color: #52526C;opacity: 0.8; font-size: 18px; font-weight: 400;") Phone : (219) 555-0114  
        tr 
          td 
            table(style='width: 100%;border-collapse: separate;border-spacing: 0;border: 1px solid rgba(82, 82, 108, 0.1)')
              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;text-align: left")
                    span(style="color: #fff; font-size: 18px;") Products
                  th(style="padding: 18px 15px;text-align: left")
                    span(style="color: #fff; font-size: 18px;") Quantity
                  th(style="padding: 18px 15px;text-align: left")
                    span(style="color: #fff; font-size: 18px;") Price
                  th(style="padding: 18px 15px;text-align: left")
                    span(style="color: #fff; font-size: 18px;") Unit
                  th(style="padding: 18px 15px;text-align: left")
                    span(style="color: #fff; font-size: 18px;") Vat %
                  th(style="padding: 18px 15px;text-align: left")
                    span(style="color: #fff; font-size: 18px;") Total
              tbody
                tr(style="background-color: rgba(245, 246, 249, 1);box-shadow: 0px 1px 0px 0px rgba(82, 82, 108, 0.15);") 
                  td(style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;")
                    span(style="width: 54px; height: 51px; background-color:#F5F6F9; display: flex; justify-content: center;align-items: center; border-radius: 5px;")
                        img(src="../assets/images/dashboard-8/product-categories/laptop.png", alt="laptop" style="height:29px;")
                    ul(style="padding: 0;margin: 0;list-style: none;")
                        li 
                            h4(style="font-weight:400; margin:4px 0px; font-size: 18px;") Apple Desktop
                            span(style="color: #52526C;opacity: 0.8; font-size: 14px;") #XDG-6437
                  td(style="padding: 18px 15px;")
                    span(style="font-size: 18px;") 2
                  td(style="padding: 18px 15px; width: 12%;") 
                    span(style="font-size: 18px;") $100
                  td(style="padding: 18px 15px; width: 12%;") 
                    span(style="font-size: 18px;") Hour(s)
                  td(style="padding: 18px 15px; width: 10%;") 
                    span(style="font-size: 18px;") 0
                  td(style="padding: 18px 15px;")
                    span(style="font-size: 18px;") $200
                tr(style="box-shadow: 0px 1px 0px 0px rgba(82, 82, 108, 0.15);")
                  td(style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;")
                    span(style="width: 54px; height: 51px;background-color:#F5F6F9; display: flex; justify-content: center;align-items: center; border-radius: 5px;")
                        img(src="../assets/images/dashboard-8/product-categories/watch.png", alt="laptop" style="height:29px;")
                    div 
                        h4(style="font-weight:400; margin:4px 0px; font-size: 18px;") Smart Watch
                        span(style="color: #52526C;opacity: 0.8; font-size: 14px;") #XDG-6437
                  td(style="padding: 18px 15px;")
                    span(style="font-size: 18px;") 1
                  td(style="padding: 18px 15px; width: 12%;") 
                    span(style="font-size: 18px;") $200
                  td(style="padding: 18px 15px; width: 12%;") 
                    span(style="font-size: 18px;") Hour(s)
                  td(style="padding: 18px 15px; width: 10%;") 
                    span(style="font-size: 18px;") 0
                  td(style="padding: 18px 15px;")
                    span(style="font-size: 18px;") $200
                tr(style="background-color: rgba(245, 246, 249, 1);box-shadow: 0px 1px 0px 0px rgba(82, 82, 108, 0.15);") 
                  td(style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;")
                    span(style="width: 54px; height: 51px; background-color:#F5F6F9; display: flex; justify-content: center;align-items: center; border-radius: 5px;")
                        img(src="../assets/images/dashboard-8/product-categories/phone.png", alt="laptop" style="height:29px;")
                    div 
                        h4(style="font-weight:400; margin:4px 0px; font-size: 18px;") Apple iphone 13 Pro
                        span(style="color: #52526C;opacity: 0.8; font-size: 14px;") #XDG-6437
                  td(style="padding: 18px 15px;")
                    span(style="font-size: 18px;") 1
                  td(style="padding: 18px 15px; width: 12%;") 
                    span(style="font-size: 18px;") $10,000
                  td(style="padding: 18px 15px; width: 12%;") 
                    span(style="font-size: 18px;") Hour(s)
                  td(style="padding: 18px 15px; width: 10%;") 
                    span(style="font-size: 18px;") 0
                  td(style="padding: 18px 15px;")
                    span(style="font-size: 18px;") $10,000
                tr
                  td(style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;")
                    span(style="width: 54px; height: 51px; background-color:#F5F6F9; display: flex; justify-content: center;align-items: center; border-radius: 5px;")
                        img(src="../assets/images/dashboard-8/product-categories/headphone.png", alt="laptop" style="height:29px;")
                    div 
                        h4(style="font-weight:400; margin:4px 0px; font-size: 18px;") Wireless Headphone
                        span(style="color: #52526C;opacity: 0.8; font-size: 14px;") #XDG-6437
                  td(style="padding: 18px 15px;")
                    span(style="font-size: 18px;") 2
                  td(style="padding: 18px 15px; width: 12%;") 
                    span(style="font-size: 18px;") $8,000
                  td(style="padding: 18px 15px; width: 12%;") 
                    span(style="font-size: 18px;") Hour(s)
                  td(style="padding: 18px 15px; width: 10%;") 
                    span(style="font-size: 18px;") 0
                  td(style="padding: 18px 15px;")
                    span(style="font-size: 18px;") $16,000
        tr  
            td 
                table(style="float: right;")
                    tfoot
                        tr 
                            td(style="padding: 5px 24px 5px 0; padding-top: 15px; text-align: end;") 
                                span(style="color: #52526C; font-size: 18px; font-weight: 400;") Subtotal  
                                span(style="margin-left: 8px; font-size: 18px;") :
                            td(style="padding: 5px 0;text-align: left;padding-top: 15px;")
                                span(style="font-size: 18px;") $26,400.00
                        tr
                            td(style="padding: 5px 24px 5px 0; text-align: end;") 
                                span(style="color: #52526C; font-size: 18px; font-weight: 400;") VAT (0%)  
                                span(style="margin-left: 8px; font-size: 18px;") :
                            td(style="padding: 5px 0;text-align: left;padding-top: 0;")
                                span(style="font-size: 18px;") $0.00
                        tr
                            td(style="padding: 5px 24px 5px 0; text-align: end;") 
                                span(style="color: #52526C; font-size: 18px; font-weight: 400;") Shipping Rate
                                span(style="margin-left: 8px; font-size: 18px;") :
                            td(style="padding: 5px 0;text-align: left;padding-top: 0;")
                                span(style="font-size: 18px;") $10.00
                        tr
                            td(style="padding: 12px 24px 22px 0;") 
                                span(style="font-weight: 600; font-size: 20px; color: rgba(0, 2, 72, 1);") Total Amount
                                span(style="margin-left: 8px;") :
                            td(style="padding: 12px 24px 22px 0;;text-align: right")
                                span(style="font-weight: 500; font-size: 20px; color: rgba(115, 102, 255, 1);") $26,410.00
        tr 
            td 
                span(style="display:block;background: rgba(82, 82, 108, 0.3);height: 1px;width: 100%;margin-bottom:24px;")
        tr
          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-2.html" download='') Download
                i.icon-arrow-right(style="font-size:13px;font-weight:bold; margin-left: 10px;")              
            