frappe.pages['characters'].on_page_load = function(wrapper) {
	var page = frappe.ui.make_app_page({
		parent: wrapper,
		title: 'My Characters',
		single_column: true
	});

	frappe.db.get_list('Character', {
        fields: ['name', 'type', 'profile_picture', 'type.frame_image', 'type.background_image'],
        filters: {
            owner: frappe.session.user
        }
    }).then(docs => {
		console.log(docs);
        render_cards(docs, wrapper);
    });
}

function render_cards(docs, wrapper) {
    const container = $('<div class="row m-2"></div>');

    docs.forEach(doc => {
        const card = $(`
            <div class="col-md-4 mb-3">
                <div class="card p-3">
                    <h5>${doc.name}</h5>
                    <p>${doc.type}</p>
					<div class="image-stack">
						<img src="${doc.background_image}" class="layer bg">
						<img src="${doc.profile_picture}" class="layer fg">
						<img src="${doc.frame_image}" class="layer frame">
					</div>
                </div>
            </div>
        `);

        container.append(card);
    });

    $(wrapper).find('.layout-main-section').html(container);
}