{{-- What the registry is serving for the domain, next to what was saved.
     Fetched after the page loads, so a slow registry never holds the page up.
     $url: the delegation endpoint for this domain. --}}
<div class="ns-delegation" data-url="{{ $url }}" style="margin-top:12px;padding:10px 12px;border-radius:6px;background:rgba(127,127,127,.08);font-size:12.5px;line-height:1.5;">
    <span class="ns-delegation-text">{{ __('messages.delegation.checking') }}</span>
    <a href="#" class="ns-delegation-again" style="margin-left:6px;display:none;">{{ __('messages.delegation.check_again') }}</a>
</div>
@once
<script>
(function () {
    function run(box, fresh) {
        var text = box.querySelector('.ns-delegation-text'), again = box.querySelector('.ns-delegation-again');
        text.textContent = @json(__('messages.delegation.checking')); again.style.display = 'none';
        fetch(box.dataset.url + (fresh ? '?fresh=1' : ''), {headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest'}, credentials: 'same-origin'})
            .then(function (r) { return r.json(); })
            .then(function (d) { text.textContent = d.message; box.style.background = d.tone === 'ok' ? 'rgba(22,163,74,.10)' : (d.tone === 'warn' ? 'rgba(217,119,6,.12)' : 'rgba(127,127,127,.08)'); again.style.display = 'inline'; })
            .catch(function () { text.textContent = @json(__('messages.delegation.unavailable')); again.style.display = 'inline'; });
    }
    document.querySelectorAll('.ns-delegation').forEach(function (box) {
        box.querySelector('.ns-delegation-again').addEventListener('click', function (e) { e.preventDefault(); run(box, true); });
        run(box, false);
    });
})();
</script>
@endonce