{{- /* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Commercial */ -}}
{{- /* SPDX-FileCopyrightText: 2025-2026 Christian Galo */ -}}

{{/* Page anatomy: the disabled control (docs/design-system.md §3 "Disabled
     controls", §6; spec form-conventions "Disabled controls carry their
     reason in the DOM"; design D10, ACC-8). Pipeline: server.DisabledControl.
     One idiom, one presentation choice per surface: by default the reason
     rides in a visually-hidden span beside the button, referenced by
     aria-describedby, and shown to a sighted pointer/keyboard user as a
     tooltip on a focusable wrapper (operator surface, maintainer decision
     2026-08-23); the Visible variant renders the same reason as ordinary
     <small> text instead (member surface density), still referenced by
     aria-describedby, so a screen reader announces it either way. No page
     hand-rolls a `<span title="...">` around a disabled button. Both
     variants wrap the button in span.disabled-control, which carries the
     not-allowed cursor (app.css): a disabled button gets no pointer
     events of its own and cannot show a cursor by itself (design D6). */}}
{{ define "disabledControl" }}
{{ if .Visible }}
<span class="disabled-control d-inline-block"><button type="button" class="{{ .Classes }}" disabled aria-describedby="{{ .ID }}">{{ .Label }}</button></span>
<small id="{{ .ID }}" class="text-muted d-block mt-1">{{ .Reason }}</small>
{{ else }}
<span class="disabled-control d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="{{ .Reason }}"><button type="button" class="{{ .Classes }}" disabled aria-describedby="{{ .ID }}">{{ .Label }}</button></span>
<span id="{{ .ID }}" class="visually-hidden">{{ .Reason }}</span>
{{ end }}
{{ end }}