{{#extend "layout" title="Light Blue HTML5 Dashboard - Invoice"}}
{{#content "sidebar"}}
{{> sidebar active="invoice"}}
{{/content}}
{{#content "content" mode="replace"}}
<ol class="breadcrumb hidden-print">
    <li class="breadcrumb-item">YOU ARE HERE</li>
    <li class="breadcrumb-item active">Invoice</li>
</ol>
<div class="row">
    <div class="col-lg-11">
        <section class="widget widget-invoice">
            <header>
                <div class="row">
                    <div class="col-md-6 col-print-6">
                        <img src="../demo/img/logo/invoice-logo.png" alt="Logo" class="invoice-logo" />
                    </div>
                    <div class="col-md-6 col-print-6">
                        <h4 class="text-right">
                            #<span class="fw-semi-bold">9.45613</span> / <small>17 May 2014</small>
                        </h4>
                        <div class="text-muted fs-larger text-right">
                            Some Invoice number description or whatever
                        </div>
                    </div>
                </div>
            </header>
            <div class="widget-body">
                <div class="row mb-lg">
                    <section class="col-md-6 col-print-6">
                        <h5 class="text-muted no-margin">Company Information</h5>
                        <h3 class="company-name mt-3">
                            Wrapbootstrap LLC
                        </h3>
                        <address>
                            <strong>2 Infinite Loop</strong><br>
                            Minsk, Belarus 220004<br>
                            088.253.5345<br>
                            <abbr title="Work email">e-mail:</abbr> <a href="mailto:#">email@example.com</a><br>
                            <abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br>
                            <abbr title="Work Fax">fax:</abbr> (012) 678-132-901
                        </address>
                    </section>
                    <section class="col-md-6 col-print-6 text-right">
                        <h5 class="text-muted no-margin">Client Information</h5>
                        <h3 class="client-name mt-3">
                            Veronica Niasvizhskaja
                        </h3>
                        <address>
                            <strong>Consultant</strong> at
                            <a href="#">Allspana</a><br>
                            <abbr title="Work email">e-mail:</abbr> <a href="mailto:#">maryna@allspana.by</a><br>
                            <abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br>
                            <abbr title="Work Fax">fax:</abbr> (012) 678-132-901
                            <p class="no-margin"><strong>Note:</strong></p>
                            <p class="text-muted">Some nights I stay up cashing in my bad luck.
                                Some nights I call it a draw</p>
                        </address>
                    </section>
                </div>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Item</th>
                            <th class="d-none d-md-table-cell">Description</th>
                            <th>
                                <span class="d-md-block d-none">
                                    Quantity
                                </span>
                                <span class="d-md-none">QTY</span>
                            </th>
                            <th class="d-none d-md-table-cell">Price per Unit</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Brand-new 27' monitor</td>
                            <td class="d-none d-md-table-cell">2,560x1,440-pixel (WQHD) resolution supported!</td>
                            <td>2</td>
                            <td class="d-none d-md-table-cell">700</td>
                            <td>1,400.00</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Domain: okendoken.com</td>
                            <td class="d-none d-md-table-cell">6-month registration</td>
                            <td>1</td>
                            <td class="d-none d-md-table-cell">10.99</td>
                            <td>21.88</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Atlas Shrugged</td>
                            <td class="d-none d-md-table-cell">Novel by Ayn Rand, first published in 1957 in the US</td>
                            <td>5</td>
                            <td class="d-none d-md-table-cell">35</td>
                            <td>175.00</td>
                        </tr>
                        <tr>
                            <th scope="row">4</th>
                            <td>New Song by Dr. Pre</td>
                            <td class="d-none d-md-table-cell">Lyrics: praesent blandit augue non sapien ornare
                                imperdiet</td>
                            <td>1</td>
                            <td class="d-none d-md-table-cell">2</td>
                            <td>2.00</td>
                        </tr>
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-md-8 col-print-6">
                        <p>
                            <strong>Note:</strong>
                            Thank you for your business. Keep in mind, sometimes bad things happen. But it's just
                            sometimes.
                        </p>
                    </div>
                    <div class="col-md-4 col-print-6">
                        <div class="row text-right">
                            <div class="col-4 col-md-6"></div> <!-- instead of offset -->
                            <div class="col-4 col-md-3">
                                <p>Subtotal</p>
                                <p>Tax(10%)</p>
                                <p class="no-margin"><strong>Total</strong></p>
                            </div>
                            <div class="col-4 col-md-3">
                                <p>1,598.88</p>
                                <p>159.89</p>
                                <p class="no-margin"><strong>1,758.77</strong></p>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="text-right mt-lg mb-xs">
                    Marketing Consultant
                </p>
                <p class="text-right">
                    <span class="fw-semi-bold">Bob Smith</span>
                </p>
                <div class="btn-toolbar mt-lg hidden-print justify-content-end">
                    <button id="print" class="btn btn-inverse mb-2 mr-3">
                        <i class="fa fa-print"></i>
                        &nbsp;&nbsp;
                        Print
                    </button>
                    <button class="btn btn-success mb-2">
                        Proceed with Payment
                        &nbsp;
                        <span class="circle bg-white">
                            <i class="fa fa-arrow-right text-success"></i>
                        </span>
                    </button>
                </div>
            </div>
        </section>
    </div>
</div>
{{/content}}
{{#content "scripts"}}
<script src="../js/extra/invoice.js"></script>
{{/content}}
{{/extend}}