{{- $name := .Get "name" -}}
{{- $sort := .Get "sort" -}}
{{- $order := default "asc" (.Get "order") -}}
{{- $showAnchor := (and (default true .Page.Params.geekblogAnchor) (default true .Page.Site.Params.geekblogAnchor)) -}}

{{- if .Site.Data.properties }}
  <dl class="gblog-props">
    {{- with (index .Site.Data.properties (split $name ".")) }}
      {{- $properties := .properties }}
      {{- with $sort }}
        {{- $properties = (sort $properties . $order) }}
      {{- end }}
      {{- range $properties }}
        <dt class="flex flex-wrap align-center gblog-props__meta"{{ if $showAnchor }} id="{{ anchorize .name }}"{{ end }}>
          <span class="gblog-props__title">{{ .name }}</span>
          {{- if .required }}
            <span class="gblog-props__tag warning">required</span>
          {{- else }}
            <span class="gblog-props__tag tip">optional</span>
          {{- end }}
          {{- with .type }}
            <span class="gblog-props__tag note">{{ . }}</span>
          {{- end }}

          {{- with .tags }}
            {{- range . }}
              <span class="gblog-props__tag">{{ . }}</span>
            {{- end }}
          {{- end }}
          {{- if $showAnchor }}
          <a data-clipboard-text="{{ .Page.Permalink }}#{{ anchorize .name | safeHTML }}" class="gblog-post__anchor clip flex align-center" title="{{ i18n "title_anchor_prefix" }} {{ .name | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .name | safeHTML }}" href="#{{ anchorize .name | safeHTML }}">
            <svg class="gblog-icon gblog_link"><use xlink:href="#gblog_link"></use></svg>
          </a>
          {{- end }}
        </dt>
        <dd>
          <div class="gblog-props__description">
            {{- with .description }}
              {{ . | $.Page.RenderString }}
            {{- end }}
          </div>
          <div class="gblog-props__default">
            {{- with default "none" (.defaultValue | string) }}
              <span>Default:</span>
              <span>{{ . }}</span>
            {{- end }}
          </div>
        </dd>
      {{- end }}
    {{- end }}
  </dl>
{{- end }}