{{navigation}}
<main>
    <header>
        <div class="title">Billing History</div>
        <div class="profile initials">JT</div>
    </header>
    <div class="sized">
        {{navBilling}}
        <div class="title">Purchase History</div>
        <div class="area table">
            <div class="thead grid rows">
                <div>Date</div>
                <div>Description</div>
                <div>Total</div>
                <div>Receipt</div>
            </div>
            <div id="Rows"></div>
        </div>
    </div>
</main>

<div id="RowTemplate" class="template">
    <div class="grid rows">
        <div>{{date}}</div>
        <div>{{description}}</div>
        <div>${{total}}</div>
        <div><a href="/receipts/{{id}}" target="_blank">{{receipt}}</a></div>
    </div>
</div>

<style>
    .rows {
        grid-template-columns: 250px auto 150px 150px;
        line-height: 55px;
        height: 55px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: var(--border);
    }
</style>

<script>
    var page = {
        init: () => {
            service.get("history", {}, page.data);
            page.events();
        },
        events: () => {

        },
        data: (e) => {
            if (e.error) zrok.loggedOut();
            else {
                if (e.data && e.data.length>0) {
                    var template = $("#RowTemplate");
                    for (var i=0; i<e.data.length; i++) {
                        var element = template.clone();
                        element.removeClass("template");
                        var item = e.data[i];
                        for (var prop in item) {
                            element.html(element.html().split("{{"+prop+"}}").join(item[prop]));
                        }
                        $("#Rows").append(element);
                    }
                }
            }
        }
    }
</script>