{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}

{{- block title() -}}Colors{{- end -}}

{{- block colorBlock(style, name, class="flex flex-col items-center") -}}
<div class="{{ class }}">
  <div class="w-24 h-20 rounded flex items-center justify-center text-2xl {{ style }}">{{ yield content }}</div>
  <div class="mt-2 text-sm">{{ name }}</div>
</div>
{{- end -}}

{{ block mainContent() }}
{{- scale := slice("-50", "-100", "-200", "-300", "-400", "-500", "-600", "-700", "-800", "-900", "-950") -}}
{{- colors := slice(
  slice("app", slice("-bg", "-fg")),
  slice("primary", slice("-light", "", "-dark")),
  slice("gray", scale),
  slice("blue", scale),
  slice("yellow", scale),
  slice("red", scale),
  slice("green", scale),
  slice("hl", slice("-yellow", "-yellow-dark"))
) -}}
<style nonce="{{ cspNonce }}">
{{ range _, color := colors }}
{{ range color[1] }}
.cookbook-bg-{{ color[0] }}{{ . }} {
  background-color: rgb(var(--color-{{ color[0] }}{{ . }}));
}
.cookbook-border-{{ color[0] }}{{ . }} {
  border: 2px solid rgb(var(--color-{{ color[0] }}{{ . }}));
}
.cookbook-text-{{ color[0] }}{{ . }} {
  color: rgb(var(--color-{{ color[0] }}{{ . }}));
}

{{ end }}
{{ end }}
</style>

<h1 class="title text-h2">Colors</h1>

<h2 class="title text-h3">Backgrounds</h2>
{{- range _, color := colors -}}
  <div class="flex gap-4 mb-8">
    {{- range color[1] -}}
      {{- yield colorBlock(style="cookbook-bg-" + color[0] + ., name=color[0] + .) -}}
    {{- end -}}
  </div>
{{- end -}}

<h2 class="title text-h3">Borders</h2>
{{- range _, color := colors -}}
  <div class="flex gap-4 mb-8">
    {{- range color[1] -}}
      {{- yield colorBlock(style="cookbook-border-" + color[0] + ., name=color[0] + .) -}}
    {{- end -}}
  </div>
{{- end -}}

<h2 class="title text-h3">Text</h2>
{{- range _, color := colors -}}
  <div class="flex gap-4 mb-8">
    {{- range color[1] -}}
      {{- yield colorBlock(
        style="cookbook-text-" + color[0] + ., name=color[0] + .,
        name=color[0] + .,
        class="flex flex-col items-center justify-center border rounded py-2"
      ) content -}}
        Aa
      {{- end -}}
    {{- end -}}
  </div>
{{- end -}}

{{ end }}