<!DOCTYPE html>
<html lang="en">

{{ template "head.tpl.html" . }}

<body class="relative bg-background text-foreground p-4 pt-10 flex flex-col min-h-screen {{ if .User }} max-w-screen-xl {{ else }} max-w-screen-lg {{end}} mx-auto justify-center">

{{ template "alerts.tpl.html" . }}

{{ template "menu-main.tpl.html" . }}

<main class="mt-10 grow flex justify-center w-full" id="projects-page">
    <div class="flex flex-col grow mt-10 max-available">
        <h1 class="h1" style="margin-bottom: 0.5rem">Your Projects</h1>

        <p class="block text-sm text-foreground mb-8">
            This is an overview of all your projects, ordered by recent activity. Color intensity indicates the overall activity on that project, that is, project that had been worked on more have stronger colors. Click a project to view project-specific statistics. Please note that this view is cached and thus might not be perfectly up-to-date.
        </p>

        {{ if len .Projects }}
        <ul class="inline-grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-4 text-foreground">
            {{ range $i, $project := .Projects }}
            <li class="projects-item relative">
                <div class="color-fading" style="{{ $.BackgroundIntensity $i | cssSafe }}"></div>
                <a href="summary?interval=any&project={{ $project.Project }}" title="Project '{{ $project.Project }}' ({{ $project.Count }} heartbeats)">
                    <span class="text-lg font-semibold truncate">{{ $project.Project }}
                        {{ if $.LangIcon $project.TopLanguage }}
                        <span class="align-middle leading-none"><span class="iconify inline text-foreground text-lg ml-1" data-icon="{{ $.LangIcon $project.TopLanguage | urlSafe }}"></span></span>
                        {{ else if $project.TopLanguage }}
                        <span class="text-sm">({{ $project.TopLanguage }})</span>
                        {{ end }}
                        </span>
                    <small>{{ $project.First.T | datetime }} – {{ $project.Last.T | datetime }}</small>
                </a>
            </li>
            {{ end }}
        </ul>
        {{ else }}
        <p class="text-sm text-foreground">No project data available, yet... Go start coding! 🤓</p>
        {{ end }}

        <div class="mt-16 flex justify-center">
            <a class="bg-focused hover:bg-card text-small text-foreground py-2 px-4 rounded-l-full mr-px text-center text-sm {{ if le .PageParams.Page 1 }}disabled{{ end }}" style="width: 90px" href="projects?page={{ add .PageParams.Page -1 }}">Previous</a>
            <a class="bg-focused hover:bg-card text-small text-foreground py-2 px-4 rounded-r-full ml-px text-center text-sm {{ if lt (len .Projects) .PageParams.PageSize }}disabled{{ end }}" style="width: 90px" href="projects?page={{ add .PageParams.Page 1 }}">Next</a>
        </div>
    </div>
</main>

{{ template "footer.tpl.html" . }}

{{ template "foot.tpl.html" . }}
</body>

</html>
