@page "/tutorials/{**slug}"
@using System.Text
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using OliverBooth.Common.Data
@using OliverBooth.Common.Data.Web
@using OliverBooth.Common.Services
@model Index
@inject ITutorialService TutorialService
@{
    ViewData["Title"] = "Tutorials";
    ITutorialFolder? currentFolder = Model.CurrentFolder;
}

<main class="container">
    @if (currentFolder is not null)
    {
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a asp-page="/Tutorials/Index" asp-route-slug="">Tutorials</a>
                </li>
                @{
                    int? parentId = currentFolder.Id;
                    while (parentId is not null)
                    {
                        ITutorialFolder thisFolder = TutorialService.GetFolder(parentId.Value)!;
                        <li class="breadcrumb-item active" aria-current="page">@thisFolder.Title</li>
                        parentId = thisFolder.Parent;
                    }
                }
            </ol>
        </nav>
    }

    <h1 class="display-4">@(currentFolder?.Title ?? "Tutorials")</h1>
    @foreach (ITutorialFolder[] folders in TutorialService.GetFolders(currentFolder, Visibility.Published).Chunk(2))
    {
        <div class="card-group row" style="margin-top: 20px;">
            @foreach (ITutorialFolder folder in folders)
            {
                if (folder.Visibility != Visibility.Published)
                {
                    continue;
                }

                <div class="col-xs-1 col-md-6 col-lg-6 d-flex align-items-stretch">
                    <div class="project-card">
                        <div class="project-image">
                            <a asp-page="Index" asp-route-slug="@folder.Slug">
                                <img src="@folder.PreviewImageUrl" class="card-img-top" alt="@folder.Title">
                            </a>
                            <a asp-page="Index" asp-route-slug="@folder.Slug">
                                <p class="project-title">@folder.Title</p>
                            </a>
                        </div>
                    </div>
                </div>
            }
        </div>
    }

    @if (currentFolder is not null)
    {
        foreach (ITutorialArticle[] articles in TutorialService.GetArticles(currentFolder, Visibility.Published).Chunk(2))
        {
            <div class="card-group row" style="margin-top: 20px;">
                @foreach (ITutorialArticle article in articles)
                {
                    var slugBuilder = new StringBuilder();
                    ITutorialFolder? folder = TutorialService.GetFolder(article.Folder);
                    if (folder is not null)
                    {
                        slugBuilder.Append(folder.Slug);
                        slugBuilder.Append('/');
                    }

                    while (folder?.Parent is { } parentId)
                    {
                        folder = TutorialService.GetFolder(parentId);
                        if (folder is not null)
                        {
                            slugBuilder.Append(folder.Slug);
                            slugBuilder.Append('/');
                        }
                    }

                    string slug = slugBuilder + article.Slug;

                    <div class="col-xs-1 col-md-6 col-lg-6 d-flex align-items-stretch">
                        <div class="project-card">
                            <div class="project-image">
                                <a asp-page="Article" asp-route-slug="@slug">
                                    <img src="@article.PreviewImageUrl" class="card-img-top" alt="@article.Title">
                                </a>
                                <a asp-page="Article" asp-route-slug="@slug">
                                    <p class="project-title">@article.Title</p>
                                </a>
                            </div>
                        </div>
                    </div>
                }
            </div>
        }
    }
</main>