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

{% set title="My Tickets" %}

{% block content %}
<div class="col col-lg-12">
    <ul class="breadcrumb">
    	<li><a href="index">Home</a> <span class="divider">/</span></li>
    	<li><a href="account">My Account</a> <span class="divider">/</span></li>
    	<li class="active">My Tickets</li>
    </ul>
	<h3><i class="icon-tags"></i> My Tickets</h3>
	<hr>
	<div id="ticket-list" style="font-size: 13px;">
		<div class="progress progress-striped active">
			<div class="bar" style="width: 100%;"></div>
		</div>
	</div>
</div>
<script>
$(document).ready(function() {
	var order_start = 0;
		
	wn.call({
		method: "support.doctype.support_ticket.support_ticket.get_tickets",
		args: {
			start: order_start
		},
		callback: function(r) {
			$("#ticket-list .progress").remove();
			var $list = $("#ticket-list");
			
			if(!(r.message && r.message.length)) {
				$list.html("<div class='alert'>No Tickets Yet</div>");
				return;
			}
			
			$.each(r.message, function(i, ticket) {
				
				// parent
				var $ticket = $(repl('<div class="row">\
					<div class="col col-lg-2"><span class="label">%(status)s</span></div>\
					<div class="col col-lg-3"><a href="ticket?name=%(name)s">%(name)s</a></div>\
					<div class="col col-lg-7">%(subject)s</div>\
				</div>', ticket)).appendTo($list);
				
				$("<hr>").appendTo($list);
			});
		}
	})
})
</script>
{% endblock %}