{% extends "app/website/templates/html/page.html" %}

{% block content -%}
<div class="col-md-12">
    <ul class="breadcrumb">
    	<li><a href="index">Home</a></li>
    	<li><a href="account">My Account</a></li>
    	<li class="active"><i class="{{ icon }} icon-fixed-width"></i> {{ title }}</li>
    </ul>
	<div class="list-group transaction-list">
		<div class="progress progress-striped active">
			<div class="progress-bar progress-bar-info" style="width: 100%;"></div>
		</div>
	</div>
	<div class="text-center">
		<button class="btn btn-default btn-show-more hide">More</button>
	</div>
</div>
{%- endblock %}

{% block javascript -%}
$(document).ready(function() {
	window.start = 0;
	window.$list = $(".transaction-list");
	window.$show_more = $(".btn-show-more").on("click", function() { get_transactions(this); })
	
	get_transactions();
});

var get_transactions = function(btn) {
	wn.call({
		method: "{{ method }}",
		args: { start: start },
		btn: btn,
		callback: function(r) {
			$list.find(".progress").remove();
			$show_more.toggleClass("hide", !(r.message && r.message.length===20));
		
			if(!(r.message && r.message.length)) {
				console.log("empty");
				if(!$list.html().trim()) {
					$list.html("<div class='alert alert-warning'>\
						{{ empty_list_message }}</div>");
				}
				return;
			}
		
			start += r.message.length;
		
			$.each(r.message, function(i, doc) {
				render(doc);
			});
		}
	})
};

// var render = function(doc) { };

{% endblock %}