<div class="developers-dashboard-widget flex h-full flex-col overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800" ...attributes>
    <div class="developers-widget-header">
        <div class="min-w-0">
            <div class="developers-widget-title">{{t "developers.component.widget.dashboard.endpoint-health.title"}}</div>
            <div class="developers-widget-subtitle">{{t "developers.component.widget.dashboard.endpoint-health.subtitle"}}</div>
        </div>
        <button type="button" class="developers-widget-icon-button" {{on "click" this.refresh}} title={{t "developers.common.reload"}}>
            <FaIcon @icon="rotate" class={{if this.load.isRunning "animate-spin"}} />
        </button>
    </div>
    <div class="developers-widget-scroll-body">
        {{#if this.load.isRunning}}
            <div class="developers-empty-state"><Spinner /></div>
        {{else if this.error}}
            <div class="developers-empty-state text-rose-500">{{this.error}}</div>
        {{else if this.items.length}}
            {{#each this.items as |item|}}
                <div class="developers-list-row">
                    <div class="min-w-0">
                        <div class="developers-list-title">{{item.url}}</div>
                        <div class="developers-list-subtitle">{{item.status}} / {{item.mode}} / {{item.deliveries}} deliveries</div>
                    </div>
                    <div class="developers-list-metric {{this.statusClass item}}">{{item.success_rate}}%</div>
                </div>
            {{/each}}
        {{else}}
            <div class="developers-empty-state">{{t "developers.component.widget.dashboard.empty"}}</div>
        {{/if}}
    </div>
</div>
