{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 %}
{% block content %} 

<style type="text/css">
.invoice-title h2, .invoice-title h3 {
    display: inline-block;
}

.table > tbody > tr > .no-line {
    border-top: none;
}

.table > thead > tr > .no-line {
    border-bottom: none;
}

.table > tbody > tr > .thick-line {
    border-top: 2px solid;
}


</style>

<div class="container  payment-container">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
    		<div class="invoice-title">
    			<h2>Invoice</h2><h3 class="pull-right">Order # {{order.id}}</h3>
    		</div>
    		<hr>
    		<div class="row">
    			<div class="col-xs-6">
    				<address>
                    <h3><b>Billed To:</b></h3>
    					John Smith<br>
    					1234 Main<br>
    					Apt. 4B<br>
    					Springfield, ST 54321
    				</address>
    			</div>
                <div class="col-xs-6 text-right">
                    <address>
                        <strong>Order Date:</strong><br>
                        {{order.created_at}}<br><br>
                    </address>
                </div>
    		</div>
    		<div class="row">
    			<div class="col-xs-6">
    				<address>
    					<strong>Payment Method:</strong><br>
    					{{brand}} ending **** {{last4}}<br>
    					{{user.email}}
    				</address>
    			</div>
    		</div>
    	</div>
    </div>
    
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h3><b>Order summary</b></h3>
            <hr>
            <div class="content">
                <p><b>Type</b> <span class="pull-right">{{request.session.vm_specs.hosting_company_name}}</span></p>
                <hr>
                <p><b>Cores</b> <span class="pull-right">{{request.session.vm_specs.cores}}</span></p>
                <hr>
                <p><b>Memory</b> <span class="pull-right">{{request.session.vm_specs.memory}} GiB</span></p>
                <hr>
                <p><b>Disk space</b> <span class="pull-right">{{request.session.vm_specs.disk_size}} GiB</span></p>
                <hr>
                <h4>Total<p class="pull-right"><b>{{request.session.vm_specs.final_price}} CHF</b></p></h4>
            </div>
        </div>
    </div>
</div>
{%endblock%}