{{ define "page" }}
{{ $rootURL := .Root }}

<div class="px-4 sm:px-6 lg:px-8">
  <div class="mt-6 flow-root">
    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="flex flex-col sm:flex-row flex-wrap justify-between py-2 sm:px-6 lg:px-8 max-h-fit">

        <div class="basis-32 flex-auto grow-2 shadow-sm ring-1 ring-black/5 sm:rounded-lg divide-y divide-gray-300 mb-auto overflow-hidden">

          <table class="min-w-full divide-y divide-gray-300">
            <!-- <thead class="bg-gray-50">
              <tr class="">
                <th class="py-4 text-sm font-semibold text-gray-900">Information</th>
                <th></th>
              </tr>
            </thead> -->
            <tbody class="divide-y divide-gray-200 bg-white">

              <tr>
                <td class="py-4 pl-4 text-sm font-semibold whitespace-nowrap text-gray-900 sm:pl-6">Git Ref</td>
                <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-500">{{.RefString}}</td>
              </tr>

              <tr>
                <td class="py-4 pl-4 text-sm font-semibold whitespace-nowrap text-gray-900 sm:pl-6">Committer</td>
                <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-500">{{.PageData.Committer}}</td>
              </tr>

              <tr>
                <td class="py-4 pl-4 text-sm font-semibold whitespace-nowrap text-gray-900 sm:pl-6">Updated</td>
                <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-500">{{.PageData.Updated}}</td>
              </tr>

              <tr>
                <td class="py-4 pl-4 text-sm font-semibold whitespace-nowrap text-gray-900 sm:pl-6">Message</td>
                <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-500">{{.PageData.Message}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="basis-8 flex-auto grow-1 sm:ml-6 shadow-sm ring-1 ring-black/5 sm:rounded-lg mb-auto overflow-hidden">
          <div class="flex flex-col divide-y divide-gray-300">
            <div class="bg-gray-50">
              <p class="py-4 text-center text-sm font-semibold text-gray-900">Branches</p>
            </div>
            <div class="bg-white divide-y divide-gray-200 h-40 overflow-y-auto">
              {{ range .Branches }}
              <div>
                <a href="/{{$rootURL}}?branch={{.Name}}">
                  <p class="py-4 px-auto sm:pl-4 text-sm font-semibold whitespace-nowrap text-gray-500 hover:text-gray-700 hover:bg-gray-100">
                    {{.Name}}
                  </p>
                </a>
              </div>
              {{ end }}
            </div>
          </div>
        </div>

        {{ if .Tags }}
        <div class="basis-8 flex-initial grow-1 sm:ml-6 shadow-sm ring-1 ring-black/5 sm:rounded-lg mb-auto overflow-hidden">
          <div class="flex flex-col divide-y divide-gray-300">
            <div class="bg-gray-50">
              <p class="py-4 text-center text-sm font-semibold text-gray-900">Tags</p>
            </div>
            <div class="bg-white divide-y divide-gray-200 h-40 overflow-y-auto">
              {{ range .Tags }}
              <div>
                <a href="/{{$rootURL}}?tag={{.Name}}">
                  <p class="py-4 px-3 sm:pl-6 text-sm font-semibold whitespace-nowrap text-gray-500 hover:text-gray-700 hover:bg-gray-100">
                    {{.Name}}
                  </p>
                </a>
              </div>
              {{ end }}
            </div>
          </div>
        </div>
        {{ end }}

        {{ if ne .PageData.ReadmeType "none" }}
        <div class="basis-full shadow-sm ring-1 ring-black/5 sm:rounded-lg bg-white p-4 sm:px-6 mt-6">
        {{ if eq .PageData.ReadmeType "markdown" }}
        <link rel="stylesheet" href="/assets/markdown.css">
        <div class="markdown">
          {{ markdown .PageData.Readme }}
        </div>
        {{ else }}
        <pre>{{ string .PageData.Readme }}</pre>
        {{ end }}
        </div>
        {{ end }}

      </div>
    </div>
  </div>
</div>
{{ end }}