{% layout 'layout' %}
{% block title %}Invoice{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Extras</a></li>
<li class="active"><a href="extras-invoice.html">Invoice</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-transparent">
            <div class="panel-body">
                <div class="clearfix">
                    <div class="pull-left">
                        <img src="{{'img/login-logo.png' | asset_url | img_loc }}" class="mt-md mb-md" alt="Avenger">
                        <address class="mt-md mb-md">
                            <strong>Avenger, Inc.</strong><br>
                            705 Folsom Ave, Suite 400<br>
                            San Francisco, CA 94107<br>
                        </address>
                    </div>
                    <div class="pull-right">
                        <h1 class="text-primary text-right" style="font-weight: normal;">
                            INVOICE
                            <small style="display: block;">#10007819</small>
                        </h1>
                    </div>
                </div>
                <hr>
                <div class="row mb-xl">
                    <!-- <div class="col-md-12">
                        <h1 class="text-primary text-center" style="font-weight: normal;">INVOICE</h1>
                    </div> -->
                    <div class="col-md-12">
                        <div class="pull-left">
                            <h3 class="text-muted">To</h3>
                            <address>
                                <strong>Customer Company, Inc.</strong><br>
                                795 Folsom Ave, Suite 600<br>
                                San Francisco, CA 94107<br>
                            </address>
                        </div>
                        <div class="pull-right">
                            <h3 class="text-muted">Info</h3>
                            <ul class="text-left list-unstyled">
                                <li><strong>Date:</strong> 20/04/2015</li>
                                <li><strong>Due:</strong> 19/05/2015</li>
                                <li><strong>Late Fee:</strong> 0.5%</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row mb-xl">
                    <div class="col-md-12">
                        <div class="panel">
                            <div class="panel-body no-padding">
                                <div class="table-responsive">
                                    <table class="table table-hover m-n">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Item</th>
                                                <th>Description</th>
                                                <th class="text-right">Quantity</th>
                                                <th class="text-right">Unit Cost</th>
                                                <th class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Dolor</td>
                                                <td>Mel no dictas commune</td>
                                                <td class="text-right">1</td>
                                                <td class="text-right">$30.00</td>
                                                <td class="text-right">$30.00</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Quaestio</td>
                                                <td>Animal alterum in ius partem delectus ut</td>
                                                <td class="text-right">3</td>
                                                <td class="text-right">$75.00</td>
                                                <td class="text-right">$225.00</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Offendit Interpretaris</td>
                                                <td>Eos an laoreet reprehendunt</td>
                                                <td class="text-right">1</td>
                                                <td class="text-right">$12.50</td>
                                                <td class="text-right">$12.50</td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>Noluisse</td>
                                                <td>Malorum assentior eos cu</td>
                                                <td class="text-right">1</td>
                                                <td class="text-right">$20.00</td>
                                                <td class="text-right">$20.00</td>
                                            </tr>
                                            <tr>
                                                <td>5</td>
                                                <td>Wisi Blandit</td>
                                                <td>Vix an omnis elitr</td>
                                                <td class="text-right">4</td>
                                                <td class="text-right">$150.00</td>
                                                <td class="text-right">$600.00</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="row" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">
                            <div class="col-md-3 col-md-offset-9">
                                <p class="text-right"><strong>SUB TOTAL: $887.50</strong></p>
                                <p class="text-right">DISCOUNT: 12.5%</p>
                                <p class="text-right">VAT: 15%</p>
                                <hr>
                                <h3 class="text-right text-danger" style="font-weight: bold;">USD 893.05</h3>
                            </div>
                        </div>
                    </div>
                </div>
                    
                <div class="row">
                    <div class="col-md-12">
                        <div class="pull-right">
                            <a href="javascript:window.print()" class="btn btn-inverse"><i class="fa fa-print"></i></a>
                            <a href="#" class="btn btn-primary">Submit</a>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

</div>
{% endblock %}
