{{ $currentTopic := .topic }}
{{ $topics := sort .module.CurrentSection.Pages ".Params.index" }}

{{ if eq .mode "sidebar" }}
    <aside class="toc px-4">
        <h5 class="mb-8 mt-2">Tutorials</h5>
        <ul class="p-0">
            {{ range $index, $topic := $topics }}
                <li
                    class="flex items-center list-none border-gray-200
                    {{ if eq $currentTopic . }}font-bold{{ end }}
                    {{ if lt (add $index 1) (len $topics) }}pb-4 mb-4 border-b border-gray-100{{ end }}
                    "
                >
                    <span class="w-full">
                        <a href="{{ .RelPermalink }}">{{ $topic.Title }}</a>
                    </span>
                </li>
            {{ end }}
        </ul>
    </aside>
{{ else }}
    <ul class="p-0 border-4 border-gray-100 rounded">
        {{ range $index, $topic := $topics }}
            <li
                class="flex items-center list-none py-3 px-4 border-gray-200
                {{ if eq $currentTopic . }}font-bold{{ end }}
                {{ if lt (add $index 1) (len $topics) }}border-b{{ end }}
                "
            >
                <span class="w-full">
                    <a href="{{ .RelPermalink }}">{{ $topic.Title }}</a>
                </span>
                <span class="text-sm text-gray-600 whitespace-nowrap mx-12">
                    <i class="fas fa-stopwatch text-center w-6 text-gray-500"></i>
                    {{ $topic.Params.estimated_time }} minutes
                </span>
                <span>
                    <a href="{{ .RelPermalink }}">
                        <i class="fas fa-chevron-circle-right text-blue-600 p-2"></i>
                    </a>
                </span>
            </li>
        {{ end }}
    </ul>
{{ end }}