@page
@model ProjectsModel
@{
	ViewData["Title"] = "Projects";
	Layout = "_Layout";
}

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div class="container repo-container">
	@{
		foreach (Config.ConfigObject.GitRepoObject repo in Config.GetConfig().GitRepos)
		{
			try
			{
				GitCacheItemBase<IRepository> cache_repository = GitManager.GetService(repo.ServiceProvider).GetCache().GetRepository(repo.Repository);
				<cache expires-on=@cache_repository.ExpiresOn invalidate-events="config_update">
					@{
						IRepository repository = cache_repository.GetValue();

						// TODO: [ProjectPage] Handle no Commit properly
						Boolean hasCommit = repository.TryGetCommit(0, out ICommit? commit);

						String[] lastCommitMessage = hasCommit
						? commit!.Description.Split("\n").Where(s => !String.IsNullOrEmpty(s)).ToArray()
						: Array.Empty<String>();

						String Description = String.Join('\n', repo.Description);
					}
					<div class="repo">
						<div class="repo-title">
							<span class="eps-lineclamp-1">@repository.Owner.Name/</span>
							<span class="eps-lineclamp-1">@repository.Name</span>
						</div>
						<div class="repo-description eps-lineclamp-2">
							@Description
						</div>
						<div class="popout">
							<span class="popout-title">@Description</span>
						</div>
						<div class="commit">
							@if (hasCommit)
							{
								<img class="commit-author" src="@commit!.AuthorAvatarUrl" />
							}
							else
							{
								<img class="commit-author" src="<default-image>" />
							}
							<div class="commit-info">
								<div class="commit-title eps-lineclamp-1">
									@if (lastCommitMessage.Length > 0)
									{
										@lastCommitMessage[0]
									}
								</div>
								<div class="commit-description eps-lineclamp-1">
									@if (lastCommitMessage.Length > 1)
									{
										@lastCommitMessage[1]
									}
								</div>
							</div>
							<div class="popout popout-commit">
								@if (lastCommitMessage.Length > 0)
								{
									<span class="popout-title">@lastCommitMessage[0]</span>
									<br />
									<div class="popout-content">
										@if (lastCommitMessage.Length > 1)
										{
											@String.Join('\n', lastCommitMessage.Skip(1))
										}
									</div>
								}
							</div>
						</div>
						<div class="repo-footer">
							<a class="repo-link" href="@repo.Repository.OriginalString">
								<span>visit repo >></span>
							</a>
							<img class="repo-icon" src="/content/img/logos/@repo.ServiceProvider/light.png" />
						</div>
					</div>
				</cache>
				// End repo
			}
			catch (Exception ex)
			{
				Model.Logger.LogError(ex, $"Failed to Render Repository '{repo.Repository}'");
			}
		}
	}
	<script>
		function processMarkdown(element) {
			var content = element.getElementsByClassName('popout-content')[0]
			content.innerHTML = marked.parse(content.innerHTML);
		}
		Array.from(document.getElementsByClassName('popout-commit')).forEach(processMarkdown);
	</script>
</div>