{% macro hint_body(info) %}
  <p class="text-sm text-slate-800">{{ info.text }}</p>
  {% if info.docs %}
  <p class="mt-2 text-sm">
    <a href="{{ info.docs }}" class="font-medium text-sky-800 underline decoration-sky-300 underline-offset-2 hover:text-sky-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-800 focus-visible:ring-offset-2">Docs on cicerone.dev</a>
  </p>
  {% endif %}
{% endmacro %}

{% macro hint_control(path, label, field=false) %}
  {% set info = hints.get(path) if hints is defined else none %}
  {% if info %}
  <details {% if field %}data-field-hint{% endif %} data-config-hint class="relative">
    <summary
      class="inline-flex h-8 w-8 shrink-0 cursor-pointer list-none items-center justify-center rounded-full border border-slate-300 bg-white text-xs font-medium text-slate-700 hover:border-slate-500 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-800 focus-visible:ring-offset-2 [&::-webkit-details-marker]:hidden"
      data-config-hint-button="{{ path }}"
      aria-label="About {{ label }}"
    >?</summary>
    <div class="mt-2 max-w-sm rounded-md border border-slate-200 bg-white p-3">
      {{ hint_body(info) }}
    </div>
  </details>
  {% endif %}
{% endmacro %}

{% macro scalar(value) %}
  {% if value == "[redacted]" %}
  <span class="inline-flex rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-950">[redacted]</span>
  {% elif value == "true" %}
  <span class="inline-flex rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-900">true</span>
  {% elif value == "false" %}
  <span class="inline-flex rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-800">false</span>
  {% elif value == "—" %}
  <span class="text-slate-600">—</span>
  {% else %}
  <span class="font-mono text-sm text-slate-800 break-all">{{ value }}</span>
  {% endif %}
{% endmacro %}

{% macro field_row(key, child, prefix="") %}
  {% set path = prefix ~ key %}
  <div class="grid grid-cols-1 gap-1 py-2.5 sm:grid-cols-[minmax(9rem,16rem)_1fr] sm:items-start sm:gap-4">
    <dt class="flex items-center gap-1.5">
      <span class="font-mono text-xs text-slate-600">{{ key }}</span>
      {{ hint_control(path, key, true) }}
    </dt>
    <dd class="min-w-0">{{ render_value(child, true, prefix ~ key ~ ".") }}</dd>
  </div>
{% endmacro %}

{% macro render_value(value, nested=false, prefix="") %}
  {% if value is mapping %}
    {% if nested %}
    <div class="rounded-md border border-slate-200 bg-slate-50 px-3">
      <dl class="divide-y divide-slate-200">
        {% for key, child in value.items() %}
        {{ field_row(key, child, prefix) }}
        {% endfor %}
      </dl>
    </div>
    {% else %}
    <dl class="divide-y divide-slate-100">
      {% for key, child in value.items() %}
      {{ field_row(key, child, prefix) }}
      {% endfor %}
    </dl>
    {% endif %}
  {% elif value is iterable and value is not string %}
    {% if value and value[0] is mapping %}
    <ul class="space-y-2">
      {% for item in value %}
      <li>{{ render_value(item, true, prefix) }}</li>
      {% endfor %}
    </ul>
    {% else %}
    <ul class="flex flex-wrap gap-1.5">
      {% for item in value %}
      <li class="inline-flex rounded-full bg-slate-100 px-2 py-0.5 font-mono text-xs text-slate-800">{{ item }}</li>
      {% endfor %}
    </ul>
    {% endif %}
  {% else %}
  {{ scalar(value) }}
  {% endif %}
{% endmacro %}