CluPilotCloud/resources/views/livewire/admin/mail-preview.blade.php

53 lines
2.8 KiB
PHP

<div class="mx-auto max-w-[1120px] space-y-5">
<div class="animate-rise">
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('mail_preview.title') }}</h1>
<p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('mail_preview.subtitle') }}</p>
</div>
{{-- A preview that goes nowhere is worse than none: the browser view still
works, and "senden" would write to a file and report success. --}}
@if (! $delivers)
<x-ui.alert variant="warning">
{{ __('admin.notice.mail_not_delivering', ['mailer' => (string) (config('mail.default') ?? 'null')]) }}
</x-ui.alert>
@endif
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
<ul class="divide-y divide-line">
@foreach ($previews as $key => $label)
<li wire:key="prev-{{ $key }}" class="flex flex-wrap items-center gap-3 px-6 py-4">
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-ink">{{ $label }}</p>
{{-- Which mailbox it goes out from, because that is the
field a mail server checks: an account may only send
from the address it owns, and a mismatch here is the
"553 Sender address rejected" that has no other
visible cause. --}}
<p class="font-mono text-xs text-muted">
{{ $key }}
@if ($senders[$key] ?? null)
· {{ $senders[$key] }}
@endif
</p>
</div>
{{-- A new tab, not an iframe: a mail is a whole document with
its own background, and judging it inside a console page
judges the console's frame around it. --}}
<x-ui.button :href="route('admin.mail.preview.show', $key)" variant="secondary" size="sm" target="_blank">
<x-ui.icon name="external-link" class="size-4" />{{ __('mail_preview.open') }}
</x-ui.button>
<x-ui.button wire:click="sendToMe('{{ $key }}')" variant="primary" size="sm"
wire:loading.attr="disabled" wire:target="sendToMe('{{ $key }}')"
:disabled="! $delivers">
<x-ui.icon name="send" class="size-4" />{{ __('mail_preview.send') }}
</x-ui.button>
</li>
@endforeach
</ul>
</div>
<p class="text-xs leading-relaxed text-muted">{{ __('mail_preview.note', ['email' => $me]) }}</p>
</div>