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

<div class="order-detail-container">
   {% if messages %}
    <div class="row">
        <div class="col-xs-12 col-md-8 col-md-offset-2">
            <br/>
                <div class="alert alert-warning">
                    {% for message in messages %}
                    <span>{{ message }}</span>
                    {% endfor %}
                </div>
        </div>
    </div>
    {% endif %}
    {% if not error %}
    <div class="row">  
        <div class="col-xs-12 col-md-8 col-md-offset-2">
    		<div class="invoice-title">
    			<h2>{{page_header_text}}</h2><h3 class="pull-right">{% trans "Order #"%} {{order.id}}</h3>
    		</div>
    		<hr>
    		<div class="row">
				<div class="col-xs-12 col-md-6 pull-right order-confirm-date">
                    <address>
                        <strong>{% trans "Date"%}:</strong><br>
                        <span id="order-created_at">{{order.created_at|date:'Y-m-d H:i'}}</span><br><br>
                        <strong>{% trans "Status:"%}</strong><br>
                        <strong class="{% if order.status == 'Approved' %}text-success
                                       {%else%} text-danger
                                       {% endif %}">{{order.status}}</strong>
                        <br><br>
                    </address>

                </div>
    			<div class="col-xs-12 col-md-6">
    				<address>
                    <h3><b>{% trans "Billed To:"%}</b></h3>
    					{{user.name}}<br>
                        {{order.billing_address.street_address}},{{order.billing_address.postal_code}}<br>
                        {{order.billing_address.city}}, {{order.billing_address.country}}.
    				</address>
    			</div>
                
    		</div>
    		<div class="row">
    			<div class="col-xs-6">
    				<address>
    					<strong>{% trans "Payment Method:"%}</strong><br>
    					{{order.cc_brand}} ending **** {{order.last4}}<br>
    					{{user.email}}
    				</address>
    			</div>
    		</div>
    	</div>
    </div>
    
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h3><b>{% trans "Order summary"%}</b></h3>
            <hr>
            <div class="content">
                <p><b>{% trans "Cores"%}</b> <span class="pull-right">{{vm.cores}}</span></p>
                <hr>
                <p><b>{% trans "Memory"%}</b> <span class="pull-right">{{vm.memory}} GB</span></p>
                <hr>
                <p><b>{% trans "Disk space"%}</b> <span class="pull-right">{{vm.disk_size}} GB</span></p>
                <hr>
                                <h4>{% trans "Total"%}<p class="pull-right"><b>{{vm.price}} CHF</b></p></h4>
            </div>
            <br/>
            {% url 'hosting:payment' as payment_url %}
            {% if payment_url in request.META.HTTP_REFERER  %}
            <div class=" content pull-right">
                <a href="{% url 'hosting:virtual_machines'%}" ><button class="btn btn-info">{% trans "Finish Configuration"%}</button></a>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

 
<script type="text/javascript"> 

    window.onload = function () {
            var locale_date = moment.utc(document.getElementById("order-created_at").textContent,'YYYY-MM-DD HH:mm').toDate();
            locale_date =  moment(locale_date).format("YYYY-MM-DD h:mm:ss a");
            document.getElementById('order-created_at').innerHTML = locale_date;

    };

</script>
{%endblock%}