{{- /*
  Here's where all of the inline partials are defined.
  If the partial is short enough, it should be put here.
*/ -}}

{{- /*
  This is a partial that creates an icon from the icon templates and links them from the created file.
  Why not embed the text into the resulting document, you ask?
  I just want to save a few kilobytes of the total site weight. :)

  It accepts a dictionary with the specified keys:

  - id - The name of the resource in a specific set.
  - output - The output location of the resource relative to the base URL.
    It can accept a formatted string (e.g., "icons/brand/%s.svg") where 'id' will be used.
  - template - The template file to be used.
    It should be relative to the asset directory.
*/ -}}
{{- define "partials/components/icon.html" }}
  {{- $icon := . }}
  {{- $res := resources.ExecuteAsTemplate (printf $icon.output $icon.id) $icon.id (resources.Get $icon.template) }}
  <svg class="icon">
    <use href="{{ $res.Permalink }}#{{ $icon.id }}"></use>
  </svg>
{{- end }}


{{- /*
  A partial that aliases the Heroicon template from the icon partial.
  It only needs a string of the ID from one of the icons.
*/ -}}
{{- define "partials/components/heroicon.html" }}
  {{- partial "components/icon.html" (dict "id" . "output" "icons/generic/%s.svg" "template" "templates/heroicon.svg") }}
{{ end }}


{{- /*
  The theme button in its own bed.
  Take note this component already has conditional rendering so a conditional is unnecessary.
*/ -}}
{{- define "partials/components/theme-button.html" }}
  {{- if gt (len (index $.Site.Data "more-contentful").themes) 1 }}
  <div class="site__theme-btn" aria-label="Theme toggle">
      {{ partial "components/heroicon.html" "color-swatch" }}
      <div class="site__theme-dropdown">
        {{- range $filename, $scheme := (index $.Site.Data "more-contentful").themes }}
        {{- $name := cond (eq $filename "_index") (printf "%s (default)" .scheme) .scheme }}
        <div class="site__theme-item" {{ if ne $filename "_index" }}data-theme="{{ .scheme }}"{{ end }}>{{ $name }}</div>
        {{- end }}
      </div>
    </div>
  </div>
  <script defer>
    const themeDropdown = document.querySelector('.site__theme-btn');
    themeDropdown.addEventListener('click', (event) => {
      const { target } = event;
      if (target.classList.contains("site__theme-item")) {
        if (target.dataset.theme) {
          theme = target.dataset.theme;
          window.localStorage.setItem("theme", theme);
          document.documentElement.dataset.theme = theme;
        } else {
          window.localStorage.removeItem("theme");
          delete document.documentElement.dataset.theme;
        }
      }
    });
  </script>
  {{- end }}
{{- end }}


{{- /*
  The component where it will display the metadata of the post.
  This is used on list templates but feel free to change that.
*/ -}}
{{- define "partials/components/post-meta.html" }}
<div class="list post__meta">
  {{- if ne (.PublishDate.Format "2006") "0001" -}}
  <time datetime="{{ .PublishDate }}">
    {{ partial "components/heroicon.html" "calendar" }}
    <span style="margin-left: 0.5em;">{{ .PublishDate.Format "2006-01-02" }}</span>
  </time>
  {{- end }}

  {{- if and .GitInfo (ne (.PublishDate.Format "2006-01-02") (.Lastmod.Format "2006-01-02")) }}
  <time datetime="{{ .Lastmod }}">
    {{ partial "components/heroicon.html" "refresh" }}
    <span style="margin-left: 0.5em;">{{ .Lastmod.Format "2006-01-02" }}</span>
  </time>
  {{- end }}

  {{- /* The authors are appended with 'et al' if there's more than one author in the map. */ -}}
  {{ with .Params.author }}
  {{- $names := slice }}
  {{- range . }}{{ $names = $names | append .name }}{{ end }}
  {{- $author := index (first 1 $names) 0 }}
  <span data-authors="{{ jsonify $names }}">
    {{ partial "components/heroicon.html" "pencil" }}
    <span style="margin-left: 0.5em;">
      {{ $author }}{{ if ge (len .) 2 }}, et al.{{ end }}
    </span>
  </span>
  {{ end }}

</div>
{{- end }}