include includes/timeline_page.pug
include includes/next_page_button.pug

- const numberFormat = new Intl.NumberFormat().format

doctype html
html
	head
		meta(charset="utf-8")
		meta(name="viewport" content="width=device-width, initial-scale=1")
		title
			= `${user.data.full_name} (@${user.data.username}) | Bibliogram`
		link(rel="stylesheet" type="text/css" href="/static/css/main.css")
		script(src="/static/js/pagination.js" type="module")
	body
		.main-divider
			header.profile-overview
				.profile-sticky
					img(src=user.proxyProfilePicture width="150px" height="150px" alt=`${user.data.full_name}'s profile picture.`).pfp
					//-
						Instagram only uses the above URL, but an HD version is also available.
						The alt text is pathetic, I know. I don't have much to work with.
					h1.full-name= user.data.full_name
					h2.username= `@${user.data.username}`
					p.bio= user.data.biography
					div.profile-counter #[span(data-numberformat=user.posts).count #{numberFormat(user.posts)}] posts
					div.profile-counter #[span(data-numberformat=user.following).count #{numberFormat(user.following)}] following
					div.profile-counter #[span(data-numberformat=user.followedBy).count #{numberFormat(user.followedBy)}] followed by
					div.links
						a(rel="alternate" type="application/rss+xml" href=`/u/${user.data.username}/rss.xml`) RSS
						a(rel="noreferrer noopener" href=`https://www.instagram.com/${user.data.username}`) instagram.com

			- const hasPosts = !user.data.is_private && user.timeline.pages.length && user.timeline.pages[0].length
			main(class=hasPosts ? "" : "no-posts")#timeline.timeline
				if !user.data.is_private
					if hasPosts
						each page, pageIndex in user.timeline.pages
							+timeline_page(page, pageIndex)
						+next_page_button(user, url)

					else
						div
							div.page-number
								span.number No posts.

				else
					div
						div.page-number
							span.number Profile is private.