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

{% set title="My Addresses" %}

{% 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">My Addresses</li>
    </ul>
	<h3><i class="icon-map-marker icon-fixed-width"></i> My Addresses</h3>
	<hr>
	<p><a class="btn btn-default" href="address"><i class="icon-plus"> New Address</i></a></p>
	<hr>
	<div id="address-list">
		<div class="progress progress-striped active">
			<div class="progress-bar progress-bar-info" style="width: 100%;"></div>
		</div>
	</div>
</div>

<script>
;(function() {
	$(document).ready(function() {
		fetch_addresses();
	});
	
	var fetch_addresses = function() {
		wn.call({
			method: "website.helpers.cart.get_addresses",
			callback: function(r) {
				$("#address-list .progress").remove();
				var $list = $("#address-list");
			
				if(!(r.message && r.message.length)) {
					$list.html("<div class='alert'>No Addresses Found</div>");
					return;
				}
			
				$.each(r.message, function(i, address) {
					address.url_name = encodeURIComponent(address.name);
					$(repl('<div> \
						<p><a href="address?name=%(url_name)s">%(name)s</a></p> \
						<p>%(display)s</p> \
						<hr> \
					</div>', address)).appendTo($list);
				});
			}
		});
	};
})();
</script>
{% endblock %}