{% extends "base.html" %}
{% block active_profile %}active{% endblock %}

{% block content %}
<section id="user-profile" data-user-id="{{user.pk}}">
    <div class="row">
        <div class="col-md-12">
            <h1 class="profile-name"><img src="{{ user.profile.profile_image_url }}" class="profile-image" /> {{user.first_name}}</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
	        <div class="panel panel-default">
			    <div class="panel-heading">Saldo</div>
				<div class="panel-body">
				<h2>{{user.profile.balance }} kr</h2>
				</div>
			</div>
	        <div class="panel panel-default">
				<div class="panel-heading">Kjøp totalt</div>
				<div class="panel-body">
				<h2>{{orders_totals.sum }} kr</h2>
				</div>
			</div>
	        <div class="panel panel-default">
				<div class="panel-heading">Topp 5 måneder</div>
				<div class="panel-body">
		        	{% for o in top_months %}
		        		<li>{{ o.month|date:"F Y"}}: <strong>{{ o.num }}</strong> kjøp på totalt <strong>{{ o.sum }} kr</strong></li>
		        	{% endfor %}
				</div>
			</div>
        </div>
        <div class="col-md-8">
	        <div class="panel panel-default">
				<div class="panel-heading">Kjøp over tid per produkt</div>
				<div class="panel-body">
					<div class="profile-stats-orderline"></div>
				</div>
			</div>
        </div>
    </div>
    {% comment %}<div class="row">
        <div class="col-md-5">
	        <div class="panel panel-default">
				  <div class="panel-heading">Ordre</div>
				  <div class="panel-body">
				  		<ul>
			        	{% for o in orders %}
			        		<li>{{ o.created|date:"c" }}: {{ o.reciept }}</li>
			        	{% endfor %}
			        	</ul>
				  </div>
			</div>
        </div>
        <div class="col-md-4">
	        <div class="panel panel-default">
				  <div class="panel-heading">Transaksjoner</div>
				  <div class="panel-body">
				  		<ul>
			        	{% for t in transactions %} 
			        		<li>{{ t.created|date:"c" }} {{ t.amount }}</li>
			        	{% endfor %}
			        	</ul>
				  </div>
			</div>
        </div>
    </div>
    {% endcomment %}
</section>
{% endblock %}