---
import { getLanguageFromURL } from "@i18n/utils";
import * as utils from "@utils/index";
import ArticleItem from "@components/ArticleItem";
import EmptyList from "@components/EmptyList.astro";
import UIString from "@components/UIString.astro";
import TranslatedLink from "@components/TranslatedLink.astro";
import { getRecentArticleList, getSiteSettings } from "../queries";

const pageLang = getLanguageFromURL(Astro.url.pathname);
const siteSettings = await getSiteSettings();
const articles = await getRecentArticleList(siteSettings?.recent_articles_limit || 5);
const filteredArticles = utils.filterArticlesByPageLang(articles, pageLang);
const isEmpty = articles.length === 0;
---

<section>
	<div>
		<h2>
			<UIString key={"recentArticles.heading"} />
		</h2>
		<TranslatedLink to="/articles/">
			<UIString key={"recentArticles.all"} />
		</TranslatedLink>
	</div>
	<div itemscope itemtype="http://schema.org/Blog">
		{
			!isEmpty && !!filteredArticles ? (
				filteredArticles.map(
					(a) =>
						a && (
							<ArticleItem
								slug={a.slug}
								title={a.title}
								languages_code={a.languages_code}
								pub_date={a.pub_date}
								pageLang={pageLang}
							/>
						)
				)
			) : (
				<EmptyList />
			)
		}
	</div>
</section>

<style lang="scss">
	section {
		& > div:nth-child(1) {
			display: flex;
			align-items: center;
			column-gap: 15px;
			row-gap: 5px;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 1px solid var(--border-color);
			padding-bottom: 10px;
			& h2 {
				margin: 0;
			}
		}
		& > div:nth-child(2) {
			margin-top: 10px;
			max-width: calc(var(--content-width) + (var(--content-padding) * 2));
		}
	}
</style>