{{ define "main" }}
<script>
  NekoType = "black";
</script>
<h1 id="nl">
  <script src="https://webneko.net/n20171213.js"></script>
  <a href="https://webneko.net">Neko</a>
</h1>
<div class="grid grid-cols-1 md:grid-cols-5 gap-2 sm py-2">
  <div class="col-span-2">
    <div class="bg-gray-300 dark:bg-darker rounded drop-shadow-md p-2">
      <div class="flex flex-col justify-center">
        <div class="">{{ partial "profilePhoto" . }}</div>
        <div class="p-2 text-center">
          {{ partial "social" . }} {{ partial "footer" . }}
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-3 relative">
    {{ range .Site.Params.showInAccordion }}
    <div class="px-2">
      <h2 class="my-0 accordion {{- if .expand }} active {{- end }}">
        {{ $current := index $.Site.Params .item }}
        <p
          class="hover:bg-gray-300 rounded dark:hover:bg-darker m-0 p-2"
          onclick="expandAccordion(this)"
          style="cursor: pointer"
        >
          <i class="{{ $current.icon }}"></i>
          {{ $current.title -}}
        </p>
      </h2>

      <div
        class="panel overflow-hidden px-2 ml-2"
        {{if $current.panelid}}
        id="{{ $current.panelid }}"
        {{ end }}
      >
        <div class="">{{ partial (print "accordion/" .item) $ }}</div>
      </div>
    </div>
    {{ end }}

    <script src="{{ `js/accordion.js` | relURL }}"></script>
  </div>
</div>
{{ end }}