{{--
    «Состояние системы»: the state (system-state) and its refresh every $pollSeconds seconds from SystemStateFragment, a
    route that is no activity of the session; one request at a time, twenty seconds at most. A refusal (the session
    ended, the access is gone, a redirect to sign in or to set up the second factor) stops the refreshes; a failure of
    the server or the network only shows a note, and the next refresh tries again.
--}}
<div
    data-state-url="{{ $stateUrl }}"
    x-data="{
        timer: null,
        stopped: false,
        failed: false,
        url: null,
        init() {
            this.url = this.$el.dataset.stateUrl;
            this.next();
        },
        destroy() {
            this.stopped = true;
            clearTimeout(this.timer);
        },
        next() {
            if (! this.stopped) {
                this.timer = setTimeout(() => this.refresh(), {{ $pollSeconds * 1000 }});
            }
        },
        async refresh() {
            if (document.hidden) {
                return this.next();
            }

            const controller = new AbortController();
            const timeout = setTimeout(() => controller.abort(), 20000);

            try {
                const response = await fetch(this.url, {
                    headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    credentials: 'same-origin',
                    cache: 'no-store',
                    redirect: 'manual',
                    signal: controller.signal,
                });

                if (response.type === 'opaqueredirect' || [401, 403, 419].includes(response.status)) {
                    this.stopped = true;
                } else if (response.ok) {
                    this.$refs.state.innerHTML = await response.text();
                    this.failed = false;
                } else {
                    this.failed = true;
                }
            } catch (error) {
                this.failed = true;
            } finally {
                clearTimeout(timeout);
                this.next();
            }
        },
    }"
>
    <p x-cloak x-show="stopped" style="margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid #f59e0b; background: #fffbeb; color: #78350f;">{{ __('cabinet::health.stopped') }}</p>
    <p x-cloak x-show="failed && ! stopped" style="margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid #f59e0b; background: #fffbeb; color: #78350f;">{{ __('cabinet::health.refresh_failed') }}</p>
    <p style="margin-bottom: 1rem;">{{ __('cabinet::health.polling', ['seconds' => $pollSeconds]) }}</p>
    <div x-ref="state">
        @include('cabinet::platform.system-state', ['state' => $state])
    </div>
</div>