{% import "macros/svg.html" as svg %}
{% extends "page.html" %}

{% block content %}
<div class="home-container"><div class="home">
	{% if config.extra.home.title %}
	<h1>{{ config.extra.home.title }}</h1>
	{% else %}
	<h1>{{ config.title }}</h1>
	{% endif %}
	{% if config.extra.home.subtitle %}
		<p>{{ config.extra.home.subtitle }}<span id="subtitle-rand"></span></p>
	{% elif config.description %}
		<p>{{ config.description }}<span id="subtitle-rand"></span></p>
	{% endif %}
	{% if config.extra.home.social_icons %}
		{{ svg::draw_icons(icons=config.extra.home.social_icons) }}
	{% endif %}
</div></div>
{% if config.extra.home.random_api and config.extra.home.random_api_param %}
<script>
async function fetchSubtitle() {
	let element = document.getElementById("subtitle-rand")
	try {
	let res = await fetch("{{ config.extra.home.random_api | safe }}");
		let doc = await res.json();
		element.innerHTML = `${doc.{{ config.extra.home.random_api_param }}}`;
	} catch (e) {
		console.log(e);
		element.textContent = ", seemingly incapable of configuring nginx";
	}
}

fetchSubtitle();
</script>
{% elif config.extra.home.subtitle_suffixes %}
<script> //random subtitle logic
const suffixes = [
	{% for s in config.extra.home.subtitle_suffixes %}
	"{{ s }}",
	{% endfor %}
]
var current = suffixes[Math.floor(Math.random() * suffixes.length)];
var span = document.getElementById("subtitle-rand");
span.textContent = current;
</script>
{% endif %}
{% endblock content %}