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; align-items: center;") 
                    td
                        img(src='../assets/images/logo/logo.png', alt='logo')
                    td
                        ul(style="list-style: none; display: flex; align-items: center; background: linear-gradient(291deg, #7366FF 21.2%, #6051FE 83.92%); padding: 31px 80px; border-bottom-left-radius: 100px; gap:28px;")
                            li 
                                svg.stroke-icon(style="height:14px; width: 14px; fill:#fff; margin-right: 10px;")
                                    use(href="../assets/svg/icon-sprite.svg#call")
                                span(style="color: #FFFFFF; font-weight: 500; font-size: 16px;") (239) 555-0108
                            li(style="border-left: 1px solid rgba(255, 255, 255, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.3); padding: 0 22px;")
                                svg.stroke-icon(style="height:16px; width: 16px; fill:#fff; margin-right: 10px;") 
                                    use(href="../assets/svg/icon-sprite.svg#email-box")
                                span(style="color: #FFFFFF; font-weight: 500; font-size: 16px;") cuba@themesforest.com
                            li 
                                svg.stroke-icon(style="height:16px; width: 16px; fill:#fff; margin-right: 10px;") 
                                    use(href="../assets/svg/icon-sprite.svg#web")
                                span(style="color: #FFFFFF; font-weight: 500; font-size: 16px;") Website: www.cubathemes.com
                tr(style="display: flex; justify-content: space-between;")
                    td 
                        span(style="font-size: 18px; display:block; font-weight: 600; color:rgba(115, 102, 255, 1); margin-bottom: 14px;") Invoice to :
                        span(style="font-size: 18px; display:block; font-weight: 600; color:rgba(0, 2, 72, 1); margin-bottom: 8px;") Brooklyn Simmons
                        span(style="font-size: 18px; display:block; color: #52526C; opacity: 0.8; margin-bottom: 8px; width: 72%; line-height: 1.4;") 2972 Westheimer Rd. Santa Ana, Illinois 85486 
                        span(style="font-size: 18px; display:block; color: #52526C; opacity: 0.8; margin-bottom: 8px;") Phone : (219) 555-0114
                        span(style="font-size: 18px; display:block; color: #52526C; opacity: 0.8; margin-bottom: 8px;") Email : yourmail@themesforest.com
                        span(style="font-size: 18px; display:block; color: #52526C; opacity: 0.8; margin-bottom: 8px;") Website: www.websites.com
                    td
                        h4(style="font-size:42px; font-weight: 600;color: #000248; margin:0 0 12px 0;") INVOICE
                        span(style="font-size: 18px;color: #7366FF; display: block; font-weight: 600; margin-bottom: 20px;") عملیات بانکی
                        span(style="color: #000248; display: block; margin-bottom: 12px; font-weight: 600;") Leslie Alexander
                        span(style="display: block; color: #52526C; font-size: 18px; margin-bottom: 12px;") Bank Account : 0981234098765
                        span(style="display: block; color: #52526C; font-size: 18px; margin-bottom: 12px;") Code : LEF098756

        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: center; position: relative; border-top-left-radius: 10px;")
                    span(style="color: #fff; font-size: 18px; font-weight: 600;") No.
                  th(style="padding: 18px 16px;text-align: left;")
                    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="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;") 
                    span(style="color: #52526C;opacity: 0.8; font-weight: 600;") 1
                  td(style="padding: 16px; border-bottom: 1px solid rgba(82, 82, 108, 0.2);")
                    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;border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;")
                    span(style="color: #52526C;font-weight: 600;") $300.00
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);") 
                    span(style="color: #52526C;font-weight: 600;") 1
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;") 
                    span(style="color: #000248; font-weight: 600;opacity: 0.9;") $300.00
                tr
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;") 
                    span(style="color: #52526C;opacity: 0.8;font-weight: 600;") 2
                  td(style="padding: 16px;border-bottom: 1px solid rgba(82, 82, 108, 0.2);")
                    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;border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;")
                    span(style="color: #52526C;font-weight: 600;") $400.00
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);") 
                    span(style="color: #52526C;font-weight: 600;") 2
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;") 
                    span(style="color: #000248; font-weight: 600;opacity: 0.9;") $800.00
                tr
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;") 
                    span(style="color: #52526C;opacity: 0.8;font-weight: 600;") 3
                  td(style="padding: 16px;border-bottom: 1px solid rgba(82, 82, 108, 0.2);")
                    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;border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;")
                    span(style="color: #52526C;font-weight: 600;") $240.00
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);") 
                    span(style="color: #52526C;font-weight: 600;") 2
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;") 
                    span(style="color: #000248; font-weight: 600;opacity: 0.9;") $4800.00
                tr
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;") 
                    span(style="color: #52526C;opacity: 0.8;font-weight: 600;") 4
                  td(style="padding: 16px;border-bottom: 1px solid rgba(82, 82, 108, 0.2);")
                    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;border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;")
                    span(style="color: #52526C;font-weight: 600;") $100.00
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);") 
                    span(style="color: #52526C;font-weight: 600;") 1
                  td(style="width: 12%; text-align: center; border-bottom: 1px solid rgba(82, 82, 108, 0.2);background: #F5F6F9;") 
                    span(style="color: #000248; font-weight: 600;opacity: 0.9;") $100.00
                tr 
                    td 
                    td 
                    td 
                    td(style="text-align: center; padding:35px 0 18px;") 
                        span(style="color: #52526C;opacity: 0.8;font-weight: 600;") Subtotal            
                    td(style=" text-align: center;background: #F5F6F9; display: block; padding:35px 0 18px;") 
                        span(style="color: #000248; font-weight: 600;opacity: 0.9;") $6100.00
                tr 
                    td 
                    td 
                    td 
                    td(style="width: 12%; text-align: center;") 
                        span(style="color: #52526C;opacity: 0.8;font-weight: 600;") VAT / Tax 15%           
                    td(style=" text-align: center;background: #F5F6F9; display:block; padding-bottom: 18px;") 
                        span(style="color: #000248; font-weight: 600;opacity: 0.9;") $50.00
                tr 
                    td
                    td
                    td 
                    td(style="width: 12%; text-align: center;") 
                        span(style="color: #52526C;opacity: 0.8;font-weight: 600;") Discount         
                    td(style="text-align: center;background: #F5F6F9; display: block; padding-bottom: 18px;") 
                        span(style="color: #000248; font-weight: 600;opacity: 0.9;") $30.00
                tr 
                    td 
                    td 
                    td
                    td(style="width: 12%; text-align: center;") 
                        span(style="color: #52526C;opacity: 0.8;font-weight: 600;") Total Due     
                    td(style="text-align: center;background: #F5F6F9;") 
                        span(style="color: #ffffff; font-weight: 600;opacity: 0.9;background: #52526C; padding: 12px 37px; margin-top: 0px; display: block;") $6120.00
        tr(style="width: 100%; display: flex; justify-content: space-between; margin-top: 36px;")
            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-5.html" download='') Download
                  i.icon-arrow-right(style="font-size:13px;font-weight:bold; margin-left: 10px;")   