{% extends 'base.html' %}
{% load expense_total%}
{% load typogrify_tags %}

{% block pagetitle %}Luxagraf: Expenses{% endblock %}

{% block metadescription %}Think is costs a lot to drive around North America in a vintage Dodge Travco? Well, judge for yourself, here's how much is costs us.{% endblock %}
				
{% block primary %}		
    <main role="main">
    <article class="post--article">
            <header class="post--header">
                <h1 class="p-name entry-title post--title">Travco Trip Costs</h1>
                <time class="dt-updated post--date" datetime="{%now 'c'%}">Last updated: {%now "F"%} <span>{%now "j, Y"%}</span></time>
            </header>
        <div id="article" class="post--body post--body--single expense-wrapper">
            <p>We're extremely fortunate to be able to do this. We afford it because we saved for a long time and I continue to work on the road. At the same time, people are usually surprised at how little it costs to live  this way. When we were planning this trip the people who posted their finances were invaluably helpful for calculating how much we needed to make this work so in the spirit of (hopefully, maybe) inspiring someone else to get out there, here is a rough breakdown of costs.</p>
            <h2>Upfront Costs</h2>
<table class="expense upfront"> 
	<caption>Initial Investments</caption>
    <thead>
        <tr> 
            <td>Category</td> 
			<td>Amount</td> 
		</tr> 
	</thead>
	<tbody>

    
    <tr class="row odd"> 
            <td>1969 Dodge Travco Motorhome</td> 
            <td class="cat-value">$7250.00 </td> 
		</tr> 
    <tr class="row even"> 
            <td>Travco restoration</td> 
            <td class="cat-value">$300.00 </td> 
		</tr> 

    <tr class="row odd"> 
            <td>Inverter</td> 
            <td class="cat-value"></td> 
		</tr> 

    <tr class="row even"> 
            <td>Solar setup</td> 
            <td class="cat-value">$81.74 </td> 
		</tr> 

    <tr class="row odd"> 
            <td>DMV (taxes, title, plates -- $25 annual for tags)</td> 
            <td class="cat-value">$141.00</td> 
		</tr> 

    <tr class="row even"> 
            <td>Insurance (1 year)</td> 
            <td class="cat-value">$125.00 (annual)</td> 
		</tr> 

    <tr class="row odd"> 
            <td>Good Sam Membership</td> 
            <td class="cat-value">$25.00 (annual)</td> 
		</tr> 
    <tr class="row even"> 
            <td>Something</td> 
            <td class="cat-value"></td> 
		</tr> 
        <tr class="total"> 
            <td>Total</td> 
            <td>$???</td> 
		</tr> 
	</tbody>
    <tfoot> 
		<tr> 
            <td colspan="2"><small>*Some expense</small></td> 
		</tr> 
	</tfoot> 
	</table>
    <p class="end">Here's how much we've spent each month we've spent on the road since we left in June 2016.</p>

    <h2>Monthly Expenses</h2>
{% regroup object_list by date.month as expenses_by_month %}{% for expenses in expenses_by_month %}
<table class="expense"> 
	<caption>{{ expenses.list.0.date|date:"F Y" }}</caption>
    <thead>
        <tr> 
            <td>Category</td> 
			<td>Amount</td> 
		</tr> 
	</thead>
	<tbody>
{% regroup expenses.list|dictsort:"category" by category as category_list %}
    {% for cat in categories %}
    <tr class="row {%cycle 'odd' 'even' %}"> 
            <td>{{cat.1}} </td> 
            <td class="cat-value">{% for clist in category_list %}{%if clist.grouper == cat.0%}${{clist.list|cat_total}} {%endif %}{%endfor%}</td> 
		</tr> 
{% endfor %}
        <tr class="total"> 
            <td>Total</td> 
            <td>${{category_list|expense_total}}</td> 
		</tr> 
	</tbody>
    <tfoot> 
		<tr> 
            <td colspan="2">{% for clist in category_list %}{% for item in clist.list %}{% if item.notes %}<small>*{{item.notes|safe}}</small>{%endif %}{%endfor%}{%endfor%}</td> 
		</tr> 
	</tfoot> 
	</table>
{% endfor %}
        </div>
        </article>
    </main>
{%endblock%}

{% block js %}
<script type="text/javascript">
window.onload = function() {
    //delay loading 
    zchk = document.getElementsByClassName("cat-value");
    for(var i=0; i<zchk.length; i++) {
        if (zchk[i].innerHTML == "") {
            zchk[i].innerHTML = "&ndash;";
        };
    }
}
</script>
{%endblock%}