use assetserver::Asset;
use maud::{Markup, html};

use crate::{
	components::{
		base::{BasePage, PageMetadata},
		fa::FAIcon,
		mangle::{MangledBetaEmail, MangledGoogleEmail},
		md::Markdown,
		misc::FarLink,
	},
	routes::assets::{Image_Cover, Image_Icon},
};

pub async fn index() -> Markup {
	let meta = PageMetadata {
		title: "Betalupi: About".into(),
		author: Some("Mark".into()),
		description: Some("Description".into()),
		image: Some(Image_Icon::URL.into()),
	};

	html! {
		(BasePage(
			meta,
			html!(
				h2 id="about" { "About" }

				div {
					img
						src=(Image_Cover::URL)
						style="float:left;margin:10px 10px 10px 10px;display:block;width:25%;"
						{}

					div style="margin:2ex 1ex 2ex 1ex;display:inline-block;overflow:hidden;width:60%;" {
						"Welcome, you've reached Mark's main page. Here you'll find"
						" links to various projects I've worked on."

						ul {
							li { (MangledBetaEmail {}) }
							li { (MangledGoogleEmail {}) }

							li {
								(
									FarLink(
										"https://github.com/rm-dr",
										html!(
											(FAIcon::Github)
											"rm-dr"
										)
									)
								)
							}

							li {
								(
									FarLink(
										"https://git.betalupi.com",
										html!(
											(FAIcon::Git)
											"git.betalupi.com"
										)
									)
								)
							}
						}
					}
					br style="clear:both;" {}
				}

				"Also see "
				a href="/whats-a-betalupi" { "what's a \"betalupi?\"" }


				(Markdown(concat!(
					"## Pages\n",
					" - [Handouts](/handouts): Math circle lessons I've written\n",
					" - [Links](/links): Interesting parts of the internet"
				)))

				hr style="margin-top: 6rem; margin-bottom: 6rem" {}

				h2 { "Projects" }
				ul {
					li {
						p {
							b { "RedoxOS" }
							", a general-purpose, microkernel-based operating system written in Rust. "

							em { span style="color: var(--grey);" {"[enthusiast]"} }
						}

						ul {
							li {
								span style="color: var(--grey);" {"Status: "}
								span style="color: var(--yellow);" {"Passive"}
							}


							li {
								span style="color: var(--grey);" {"Website: "}
								(
									FarLink(
										"https://www.redox-os.org",
										html!(
											(FAIcon::Link)
											"redox-os.org"
										)
									)
								)
							}
						}
					}

					li {
						p {
							b { "Tectonic" }
							", the LaTeX engine that is pleasant to use. Experimental, but fully functional. "

							em { span style="color: var(--grey);" {"[co-maintainer]"} }
						}

						ul {
							li {
								span style="color: var(--grey);" {"Status: "}
								span style="color: var(--yellow);" {"Passive. "}
								(FarLink("https://github.com/typst/typst", "Typst"))
								" is better."
							}


							li {
								span style="color: var(--grey);" {"Main Repo: "}
								(
									FarLink(
										"https://github.com/tectonic-typesetting/tectonic",
										html!( (FAIcon::Github) "Tectonic" )
									)
								)
							}

							li {
								span style="color: var(--grey);" {"Bundle Tools: "}
								(
									FarLink(
										"https://github.com/tectonic-typesetting/tectonic-texlive-bundles",
										html!( (FAIcon::Github) "tectonic-texlive-bundles" )
									)
								)
							}
						}
					}


					li {
						p {
							b { "Daisy" }
							", a pretty TUI scientific calculator. "

							em { span style="color: var(--grey);" {"[author]"} }
						}

						ul {
							li {
								span style="color: var(--grey);" {"Status: "}
								span style="color: var(--orange);" {"Done. "}
								"Used this to learn Rust. "
								(FarLink("https://numbat.dev", "Numbat"))
								" is better."
							}

							li {
								span style="color: var(--grey);" {"Repository: "}
								(
									FarLink(
										"https://github.com/rm-dr/daisy",
										html!( (FAIcon::Github) "rm-dr/daisy" )
									)
								)
							}

							li {
								span style="color: var(--grey);" {"Website: "}
								(
									FarLink(
										"https://daisy.betalupi.com",
										html!(
											(FAIcon::Link)
											"daisy.betalupi.com"
										)
									)
								)
								" (WASM demo)"
							}
						}
					}

					li {
						p {
							b { "Lamb" }
							", a lambda calculus engine. "

							em { span style="color: var(--grey);" {"[author]"} }
						}

						ul {
							li {
								span style="color: var(--grey);" {"Status: "}
								span style="color: var(--orange);" {"Done. "}
								"Fun little project."
							}

							li {
								span style="color: var(--grey);" {"Repository: "}
								(
									FarLink(
										"https://github.com/rm-dr/lamb",
										html!( (FAIcon::Github) "rm-dr/lamb" )
									)
								)
							}

							li {
								span style="color: var(--grey);" {"PyPi: "}
								(
									FarLink(
										"https://pypi.org/project/lamb-engine",
										html!(
											(FAIcon::Python)
											"lamb-engine"
										)
									)
								)
							}
						}
					}


				}





			)
		))
	}
}
