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(style="padding: 28px 0 5px; display: flex; justify-content: space-between;") 
                  td
                    h4(style="font-size:42px; font-weight: 600;color: #000248; margin:0;") INVOICE
                    ul(style="list-style: none; display: flex; gap:15px; padding: 0; margin: 20px 0;")
                        li 
                            span(style="color: #52526C; font-size: 18px; font-weight: 600; opacity: 0.8;") Invoice to :
                        li 
                            span(style="font-weight:600;font-size: 18px; color: #000248; display: block; margin-bottom: 8px;") Brooklyn Simmons
                            span(style="width: 75%; display:block; line-height: 1.5; color: #52526C; font-size: 18px; font-weight: 400;opacity: 0.8;") 2972 Westheimer Rd. Santa Ana, Illinois 85486 
                            span(style="line-height:1.9; color: #52526C; font-size: 18px; font-weight: 400;opacity: 0.8; display:block;") Phone : (219) 555-0114
                            span(style="line-height:1.7; color: #52526C; font-size: 18px; font-weight: 400;opacity: 0.8; display:block;") Email : yourmail@themesforest.com
                            span(style="line-height:1.7; color: #52526C; font-size: 18px; font-weight: 400;opacity: 0.8; display:block;") Website: www.websites.com
                  td
                    img(style="height:50px; margin-bottom: 14px;" src='../assets/images/logo/logo.png', alt='logo')
                    span(style="display:block; line-height: 1.5; color: #52526C; font-size: 18px; font-weight: 400;opacity: 0.8;") 2118 Thornridge Cir. Syracuse, Connecticut 35624, United State
                    span(style="display:block; line-height: 1.5; color: #52526C; font-size: 18px; font-weight: 400;opacity: 0.8;") Phone : (239) 555-0108
                    span(style="display:block; line-height: 1.5; color: #52526C; font-size: 18px; font-weight: 400;opacity: 0.8;") Email : cuba@themesforest.com
                    span(style="display:block; line-height: 1.5; color: #52526C; font-size: 18px; font-weight: 400;opacity: 0.8;") Website: www.cubathemes.com
        tr 
            td 
                table(style='width: 100%; border-spacing: 4px; margin-bottom: 20px;')
                    tbody
                        tr 
                            td(style="background: #F5F6F9;padding: 15px 25px;")
                                p(style="font-size:16px; font-weight:500; color:#52526C; opacity:0.8; margin:0;line-height: 2;") Date :
                                span(style="font-size: 18px; font-weight: 600;") 10 Mar, 2023
                            td(style="background: #F5F6F9;padding: 15px 25px;") 
                                p(style="font-size:16px; font-weight:500; color:#52526C; opacity:0.8; margin:0;line-height: 2;") Invoice No :
                                span(style="font-size: 18px; font-weight: 600;") #VL25000365
                            td(style="background: #F5F6F9;padding: 15px 25px;") 
                                p(style="font-size:16px; font-weight:500; color:#52526C; opacity:0.8; margin:0;line-height: 2;") Account No :
                                span(style="font-size: 18px; font-weight: 600;") 0981234098765
                            td(style="background: #F5F6F9;padding: 15px 25px;") 
                                p(style="font-size:16px; font-weight:500; color:#52526C; opacity:0.8; margin:0;line-height: 2;") Due Amount :
                                span(style="font-size: 18px; font-weight: 600;") $7860.00      
        tr 
          td 
            table(style='width: 100%; border-spacing:0;')
              thead 
                tr(style="background: #7366FF;") 
                  th(style="padding: 18px 15px;text-align: left; position: relative; border-top-left-radius: 10px;")
                    span(style="color: #fff; font-size: 18px; font-weight: 600;") Description
                  th(style="padding: 18px 15px;text-align: center")
                    span(style="color: #fff; font-size: 18px; font-weight: 600;") Unite Price
                  th(style="padding: 18px 15px;text-align: center")
                    span(style="color: #fff; font-size: 18px; font-weight: 600;") Quantity
                  th(style="padding: 18px 15px;text-align: center;position: relative; border-top-right-radius: 10px;")
                    span(style="color: #fff; font-size: 18px; font-weight: 600;") Subtotal
              tbody
                tr
                  td(style="padding: 30px;")
                    h4(style="font-weight:600; margin:4px 0px; font-size: 18px; color: #000248;") Proposal & Brochure Design
                    span(style="color: #52526C;opacity: 0.8; font-size: 16px;") Regular License
                  td(style="width: 12%; text-align: center;")
                    span(style="color: #52526C;opacity: 0.8;") $300.00
                  td(style="width: 12%; text-align: center;") 
                    span(style="color: #52526C;opacity: 0.8;") 1
                  td(style="width: 12%; text-align: center;") 
                    span(style="color: #000248; font-weight: 600;opacity: 0.9;") $300.00
                tr
                  td(style="padding: 0 30px 30px;")
                    h4(style="font-weight:600; margin:4px 0px; font-size: 18px; color: #000248;") Web design and development
                    span(style="color: #52526C;opacity: 0.8; font-size: 16px;") Regular License
                  td(style="width: 12%; text-align: center;")
                    span(style="color: #52526C;opacity: 0.8;") $400.00
                  td(style="width: 12%; text-align: center;") 
                    span(style="color: #52526C;opacity: 0.8;") 2
                  td(style="width: 12%; text-align: center;") 
                    span(style="color: #000248; font-weight: 600;opacity: 0.9;") $800.00
                tr
                  td(style="padding: 0 30px 30px;")
                    h4(style="font-weight:600; margin:4px 0px; font-size: 18px; color: #000248;") Logo & Brand  design
                    span(style="color: #52526C;opacity: 0.8; font-size: 16px;") Regular License
                  td(style="width: 12%; text-align: center;")
                    span(style="color: #52526C;opacity: 0.8;") $240.00
                  td(style="width: 12%; text-align: center;") 
                    span(style="color: #52526C;opacity: 0.8;") 2
                  td(style="width: 12%; text-align: center;") 
                    span(style="color: #000248; font-weight: 600;opacity: 0.9;") $4800.00
                tr
                  td(style="padding: 0 30px 30px;")
                    h4(style="font-weight:600; margin:4px 0px; font-size: 18px; color: #000248;") Stationary Design
                    span(style="color: #52526C;opacity: 0.8; font-size: 16px;") Regular License
                  td(style="width: 12%; text-align: center;")
                    span(style="color: #52526C;opacity: 0.8;") $100.00
                  td(style="width: 12%; text-align: center;") 
                    span(style="color: #52526C;opacity: 0.8;") 1
                  td(style="width: 12%; text-align: center;") 
                    span(style="color: #000248; font-weight: 600;opacity: 0.9;") $100.00
        tr
          td(style="height:3px; width: 100%; background: linear-gradient(90deg, #7366FF 20.61%, #54BA4A 103.6%); display:block;")
        tr 
            td
                table(style="width:100%;")
                    tbody
                        tr(style="display:flex; justify-content: space-between; margin:16px 0 24px 0; align-items: end;")
                            td(style="display: flex; gap: 10px;")
                                span(style="color: #000248; font-size: 16px; font-weight: 500; font-weight: 600;") Payment Teams : 
                                span(style=" display:block; line-height: 1.5; color: #52526C; font-size: 16px; font-weight: 400; width: 55%;") This denotes a payment credit for a full month's supply.
                            td
                                ul(style="padding: 0; margin: 0; list-style: none;")
                                    li(style="display:flex; padding-bottom: 16px;")  
                                        span(style="display: block; width: 95px; color: #52526C;") Subtotal           
                                        span(style="display: block; width:25px;") :
                                        span(style="display: block;  width: 95px; color: #000248; opacity: 0.9; font-weight:600;") $6100.00
                                    li(style="display:flex; padding-bottom: 16px;") 
                                        span(style="display: block; width: 95px; color: #52526C;") Tax
                                        span(style="display: block; width:25px;")  :
                                        span(style="display: block; width: 95px;color: #000248; opacity: 0.9; font-weight:600;") $50.00
                                    li(style="display:flex; padding-bottom: 20px;") 
                                        span(style="display: block; width: 95px; color: #52526C;") Discount     
                                        span(style="display: block; width:25px;")      :
                                        span(style="display: block; width: 95px;color: #000248; opacity: 0.9; font-weight:600;") $30.00
                                    li(style="display:flex; align-items: center;") 
                                        span(style="display: block; width: 95px; color: #52526C;") Total Due
                                        span(style="display: block; color: #000248; opacity: 0.9; font-weight:600; padding: 12px 25px; border-radius: 5px; background: #F5F6F9; font-size: 18px;") $6120.00
        tr(style="width: 100%; display: flex; justify-content: space-between;")
          td 
              img(src="../assets/images/email-template/invoice-3/sign.png" alt="sign")
              span(style="color: #000248;display: block;font-size: 18px;font-weight: 600;") Laurine T. Ebbert
              span(style="color: #52526C; display: block; font-size: 14px; padding-top: 5px;") ( Designer )
          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-4.html" download='') Download
                i.icon-arrow-right(style="font-size:13px;font-weight:bold; margin-left: 10px;")                
            