{{ define "page" }}
{{ $root := .Root }}
{{ $path := .Path}}
{{ $query := .Query}}
{{ $filepath := index (split .Path "tree/") (sub (len (split .Path "tree/")) 1) }}

<!-- Tree View -->
<div class="px-4 divide-y-2 max-w-full bg-white shadow-sm rounded-sm">
    <ol role="list" class="flex items-center space-x-4 py-2 text-md font-medium text-gray-900">
        <li>
            <a href="/{{.Root}}/tree{{with .Query}}?{{.}}{{end}}" class="ml-4">{{ .Name }}</a>
        </li>

        {{ if ne $filepath $path}}
        {{ range (split (dir $filepath) "/") }}
        {{ if ne . "." }}
        <li>
        <div class="flex items-center">
            <svg class="size-5 shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
            </svg>
            <a href="/{{$root}}/tree/{{index (split $filepath .) 0}}{{.}}{{with $query}}?{{.}}{{end}}" class="ml-4">
                {{ . }}
            </a>
        </div>
        </li>
        {{ end }}
        {{ end }}
        <li>
            <div class="flex items-center">
                <svg class="size-5 shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                </svg>
                <p class="cursor-default ml-4">
                    {{ base $filepath }}
                </p>
            </div>
        </li>
        {{ end }}
    </ol>
    <table class="table-fixed w-full">
        <!-- <thead class="">
            <tr>
                <td>caddy-git-server > folder > file</td>
            </tr>
        </thead> -->
        <tbody class="divide-y text-sm font-medium text-gray-500 text-nowrap">
            {{ range .PageData.Dirs }}
            <tr>
                {{ if eq .Name ".." }}
                <td class="py-2 pr-3 pl-4 text-gray-900 w-2/3 sm:w-1/4">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 inline mr-2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.99 7.5 8.24 3.75m0 0L4.49 7.5m3.75-3.75v16.499h11.25" />
                    </svg>
                    <a href="{{ dir $path }}{{with $query}}?{{.}}{{end}}">{{.Name}}</a>
                </td>
                <td class="py-2 px-3"></td>
                <td class="py-2 px-3 w-1/3 sm:w-1/6"></td>
                {{ else }}
                <td class="py-2 pr-3 pl-4 text-gray-900 text-nowrap">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 inline mr-2">
                        <path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" />
                    </svg>
                    <a href="/{{$root}}/tree/{{.Path}}{{with $query}}?{{.}}{{end}}">{{.Name}}/</a>
                </td>
                <td class="py-2 px-3 invisible sm:visible truncate">{{ index (split .Commit.Message "\n") 0 }}</td>
                <td class="py-2 px-3 text-right">{{ .Commit.Date }}</td>
                {{ end }}
            </tr>
            {{ end }}

            {{ range .PageData.Files }}
            <tr>
                <td class="py-2 pr-3 pl-4 text-gray-900">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 inline mr-2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                    </svg>
                    <a href="/{{$root}}/blob/{{.Path}}{{with $query}}?{{.}}{{end}}">{{.Name}}</a>
                </td>
                <td class="py-2 px-3 invisible sm:visible truncate">{{ index (split .Commit.Message "\n") 0 }}</td>
                <td class="py-2 px-3 text-right">{{ .Commit.Date }}</td>
            </tr>
            {{ end }}
        </tbody>
    </table>


</div>

<!-- README -->
{{ if ne .PageData.ReadmeType "" }}
<div class="mt-4 max-w-full  bg-white shadow-sm  rounded-sm">
    <p class="pt-2 pb-1 mx-4 px-4 text-lg border-b-2">
        {{ if eq .PageData.ReadmeType "markdown" }}
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 inline mr-2">
            <path d="M11.25 4.533A9.707 9.707 0 0 0 6 3a9.735 9.735 0 0 0-3.25.555.75.75 0 0 0-.5.707v14.25a.75.75 0 0 0 1 .707A8.237 8.237 0 0 1 6 18.75c1.995 0 3.823.707 5.25 1.886V4.533ZM12.75 20.636A8.214 8.214 0 0 1 18 18.75c.966 0 1.89.166 2.75.47a.75.75 0 0 0 1-.708V4.262a.75.75 0 0 0-.5-.707A9.735 9.735 0 0 0 18 3a9.707 9.707 0 0 0-5.25 1.533v16.103Z" />
        </svg>
        README.md
        <link rel="stylesheet" href="/assets/markdown.css">
        <div class="markdown py-4 px-8 overflow-x-auto">{{ markdown .PageData.Readme }}</div>
        {{ else }}
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 inline mr-2">
            <path fill-rule="evenodd" d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z" clip-rule="evenodd" />
            <path d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
        </svg>
        README.txt
        <pre class="text-sm py-4 px-8 overflow-x-auto">{{ string .PageData.Readme }}</pre>
        {{ end }}
    </p>
</div>
{{ end }}

{{ end }}