48 lines
2.7 KiB
PHP
48 lines
2.7 KiB
PHP
<x-modal :title="__('addons.ring.setup_title')" icon="doorbell">
|
|
<div class="p-5 flex flex-col gap-4">
|
|
<p class="text-[12.5px] text-ink-2 leading-relaxed">{{ __('addons.ring.setup_intro') }}</p>
|
|
|
|
<ol class="flex flex-col gap-3">
|
|
<li class="flex gap-3">
|
|
<span class="grid place-items-center w-6 h-6 rounded-full bg-inset text-ink-2 font-mono text-[12px] shrink-0">1</span>
|
|
<p class="text-[12.5px] text-ink-2 pt-0.5">{{ __('addons.ring.step1') }}</p>
|
|
</li>
|
|
<li class="flex gap-3">
|
|
<span class="grid place-items-center w-6 h-6 rounded-full bg-inset text-ink-2 font-mono text-[12px] shrink-0">2</span>
|
|
<p class="text-[12.5px] text-ink-2 pt-0.5">{{ __('addons.ring.step2') }}</p>
|
|
</li>
|
|
</ol>
|
|
|
|
<a href="{{ $bridgeUrl }}" target="_blank" rel="noopener noreferrer"
|
|
class="inline-flex items-center justify-center gap-1.5 rounded-lg bg-accent px-3.5 py-2.5 text-[13px] font-bold text-base hover:brightness-110 transition-[filter] w-max">
|
|
<x-icon name="network" :size="15" /> {{ __('addons.ring.open_bridge') }}
|
|
<span class="font-mono font-normal opacity-80">{{ $bridgeUrl }}</span>
|
|
</a>
|
|
|
|
{{-- Real bridge status --}}
|
|
<div class="rounded-lg border border-line-soft bg-raised p-3.5 flex items-center gap-3">
|
|
@php
|
|
$pill = match ($status) { 'connected' => 'online', 'connecting' => 'warning', 'error' => 'offline', default => 'neutral' };
|
|
@endphp
|
|
<div class="min-w-0">
|
|
<div class="text-[11px] font-semibold text-ink-3">{{ __('addons.ring.status_title') }}</div>
|
|
<div class="mt-1"><x-status-pill :state="$pill">{{ __('addons.status_'.$status) }}</x-status-pill></div>
|
|
</div>
|
|
<div class="ml-auto text-right">
|
|
@if ($status === 'connected' && $connectedAt)
|
|
<div class="text-[11px] text-ink-3">{{ __('addons.ring.connected_since') }}</div>
|
|
<div class="text-[12px] font-mono text-ink">{{ $connectedAt->diffForHumans() }}</div>
|
|
@elseif ($statusDetail)
|
|
<div class="text-[11.5px] text-offline max-w-[16rem]">{{ $statusDetail }}</div>
|
|
@else
|
|
<div class="text-[11.5px] text-ink-3 max-w-[18rem]">{{ __('addons.ring.status_hint_disconnected') }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<x-slot:footer>
|
|
<button type="button" wire:click="closeModal" class="rounded-lg bg-accent px-3.5 py-2 text-[13px] font-bold text-base hover:brightness-110 transition-[filter]">{{ __('common.close') }}</button>
|
|
</x-slot:footer>
|
|
</x-modal>
|