179 lines
10 KiB
PHP
179 lines
10 KiB
PHP
<div wire:poll.60000ms="autoSave"
|
||
x-data="{}"
|
||
x-init="
|
||
let _t;
|
||
$el.addEventListener('input', e => {
|
||
if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
|
||
clearTimeout(_t);
|
||
_t = setTimeout(() => $wire.autoSave(), 2000);
|
||
}
|
||
});
|
||
">
|
||
|
||
<div class="mbx-page-header">
|
||
<div class="mbx-page-title">
|
||
<svg width="16" height="16" viewBox="0 0 14 14" fill="none"><path d="M1 13L13 1l-3 12-3.5-4.5L1 13Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||
@if($isDraft) Entwurf bearbeiten
|
||
@elseif($isReply) Antworten
|
||
@else Neue Nachricht
|
||
@endif
|
||
</div>
|
||
<div class="mbx-page-actions">
|
||
<button wire:click="back" wire:loading.attr="disabled" wire:target="back" class="mbx-btn-mute">← Zurück</button>
|
||
</div>
|
||
</div>
|
||
|
||
@if($isDraft)
|
||
<div style="margin-bottom:12px;padding:8px 14px;background:var(--mw-bg3);border:1px solid var(--mw-b1);
|
||
border-radius:7px;font-size:12px;color:var(--mw-t3);display:flex;align-items:center;gap:8px;">
|
||
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
|
||
<rect x="1" y="1" width="12" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
|
||
<path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||
</svg>
|
||
Entwurf — Änderungen werden beim Zurückgehen automatisch gespeichert.
|
||
</div>
|
||
@elseif($isReply)
|
||
<div style="margin-bottom:12px;padding:8px 14px;background:var(--mw-bg3);border:1px solid var(--mw-b1);
|
||
border-radius:7px;font-size:12px;color:var(--mw-t3);display:flex;align-items:center;gap:8px;">
|
||
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
|
||
<path d="M1 13L13 1l-3 12-3.5-4.5L1 13Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
|
||
</svg>
|
||
Antwort auf: <strong style="color:var(--mw-t2);">{{ $subject }}</strong>
|
||
</div>
|
||
@endif
|
||
|
||
@if($sent)
|
||
<div style="margin-bottom:12px;padding:10px 14px;background:var(--mw-grbg);border:1px solid var(--mw-grbd);
|
||
border-radius:8px;font-size:12.5px;color:var(--mw-gr);display:flex;align-items:center;gap:8px;">
|
||
<svg width="13" height="13" viewBox="0 0 14 14" fill="none">
|
||
<path d="M2 7l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
Nachricht erfolgreich gesendet.
|
||
</div>
|
||
@endif
|
||
|
||
<form wire:submit.prevent="send" autocomplete="off">
|
||
<div class="mbx-section" style="padding:0;overflow:visible;">
|
||
|
||
{{-- An --}}
|
||
<div style="display:flex;align-items:center;border-bottom:1px solid var(--mw-b1);">
|
||
<span style="padding:11px 16px;font-size:12px;color:var(--mw-t4);flex-shrink:0;width:80px;">An</span>
|
||
<input wire:model="to" type="email"
|
||
placeholder="empfaenger@example.com"
|
||
autocomplete="off"
|
||
style="flex:1;background:none;border:none;outline:none;padding:11px 16px 11px 0;font-size:13px;color:var(--mw-t1);">
|
||
@error('to')
|
||
<span style="padding:0 14px;font-size:11px;color:var(--mw-rd);flex-shrink:0;">{{ $message }}</span>
|
||
@enderror
|
||
</div>
|
||
|
||
{{-- Betreff --}}
|
||
<div style="display:flex;align-items:center;border-bottom:1px solid var(--mw-b1);">
|
||
<span style="padding:11px 16px;font-size:12px;color:var(--mw-t4);flex-shrink:0;width:80px;">Betreff</span>
|
||
<input wire:model="subject" type="text"
|
||
placeholder="Betreff der Nachricht"
|
||
autocomplete="off"
|
||
style="flex:1;background:none;border:none;outline:none;padding:11px 16px 11px 0;font-size:13px;color:var(--mw-t1);">
|
||
@error('subject')
|
||
<span style="padding:0 14px;font-size:11px;color:var(--mw-rd);flex-shrink:0;">{{ $message }}</span>
|
||
@enderror
|
||
</div>
|
||
|
||
{{-- Body --}}
|
||
<div>
|
||
<textarea wire:model="body" rows="18"
|
||
placeholder="{{ $isReply ? 'Schreibe deine Antwort …' : 'Schreibe deine Nachricht …' }}"
|
||
style="display:block;width:100%;box-sizing:border-box;background:none;border:none;outline:none;
|
||
resize:vertical;padding:16px;font-size:13px;line-height:1.65;color:var(--mw-t1);
|
||
font-family:'Courier New',Courier,monospace;"></textarea>
|
||
@error('body')
|
||
<div style="padding:0 16px 12px;font-size:11px;color:var(--mw-rd);">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
|
||
{{-- Signatur-Vorschau --}}
|
||
@if($signatureRaw)
|
||
<div style="border-top:1px solid var(--mw-b1);padding:10px 16px 12px;">
|
||
<div style="font-size:10.5px;color:var(--mw-t5);letter-spacing:.05em;text-transform:uppercase;
|
||
margin-bottom:6px;font-weight:600;">Signatur</div>
|
||
@if($signatureIsHtml)
|
||
<div style="font-size:13px;line-height:1.6;color:var(--mw-t2);">
|
||
{!! $signatureRaw !!}
|
||
</div>
|
||
@else
|
||
<div style="font-size:12.5px;color:var(--mw-t3);white-space:pre-wrap;font-family:'Courier New',monospace;line-height:1.5;">{{ $signatureRaw }}</div>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Anhänge --}}
|
||
@if(count($stagedAttachments) > 0)
|
||
<div style="padding:8px 16px 12px;border-top:1px solid var(--mw-b1);display:flex;gap:6px;flex-wrap:wrap;align-items:center;">
|
||
<span style="font-size:11px;color:var(--mw-t4);flex-shrink:0;">Anhänge:</span>
|
||
@foreach($stagedAttachments as $i => $att)
|
||
<span style="display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 10px;
|
||
background:var(--mw-bg4);border:1px solid var(--mw-b2);border-radius:5px;
|
||
font-size:11.5px;color:var(--mw-t2);">
|
||
<svg width="10" height="10" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;opacity:.5;">
|
||
<rect x="1" y="1" width="12" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
|
||
<path d="M4 5h6M4 7.5h4M4 10h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||
</svg>
|
||
{{ $att['name'] }}
|
||
<span style="color:var(--mw-t5);font-size:10.5px;">({{ round($att['size'] / 1024, 1) }} KB)</span>
|
||
<button type="button" wire:click="removeAttachment({{ $i }})"
|
||
style="background:none;border:none;cursor:pointer;padding:0 0 0 2px;
|
||
color:var(--mw-t4);font-size:13px;line-height:1;display:flex;"
|
||
title="Entfernen">×</button>
|
||
</span>
|
||
@endforeach
|
||
<span wire:loading wire:target="attachments" style="font-size:11px;color:var(--mw-t4);">Lädt …</span>
|
||
</div>
|
||
@else
|
||
<div wire:loading wire:target="attachments"
|
||
style="padding:8px 16px 10px;border-top:1px solid var(--mw-b1);font-size:11.5px;color:var(--mw-t4);">
|
||
Datei wird hochgeladen …
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
|
||
{{-- Aktionen --}}
|
||
<div style="display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap;">
|
||
<button type="submit" wire:loading.attr="disabled" class="mbx-btn-primary">
|
||
<svg wire:loading wire:target="send" width="12" height="12" viewBox="0 0 24 24" fill="none"
|
||
style="animation:spin 1s linear infinite;flex-shrink:0;">
|
||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" stroke-dasharray="60" stroke-dashoffset="20"/>
|
||
</svg>
|
||
<svg wire:loading.remove wire:target="send" width="12" height="12" viewBox="0 0 14 14" fill="none">
|
||
<path d="M1 13L13 1l-3 12-3.5-4.5L1 13Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
|
||
</svg>
|
||
{{ $isReply ? 'Antwort senden' : ($isDraft ? 'Jetzt senden' : 'Senden') }}
|
||
</button>
|
||
<button type="button" wire:click="back" wire:loading.attr="disabled" wire:target="back" class="mbx-btn-mute">
|
||
<svg wire:loading wire:target="back" width="11" height="11" viewBox="0 0 24 24" fill="none"
|
||
style="animation:spin 1s linear infinite;">
|
||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" stroke-dasharray="60" stroke-dashoffset="20"/>
|
||
</svg>
|
||
<svg wire:loading.remove wire:target="back" width="11" height="11" viewBox="0 0 14 14" fill="none">
|
||
<rect x="1" y="1" width="12" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
|
||
<path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||
</svg>
|
||
Als Entwurf speichern
|
||
</button>
|
||
|
||
{{-- Datei anhängen --}}
|
||
<label style="display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
|
||
background:var(--mw-bg3);border:1px solid var(--mw-b2);border-radius:6px;
|
||
font-size:12.5px;color:var(--mw-t3);cursor:pointer;user-select:none;"
|
||
title="Datei anhängen">
|
||
<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
|
||
<path d="M12 6.5L6.8 11.7a3.18 3.18 0 01-4.5-4.5l5.5-5.5a2.12 2.12 0 013 3L5.3 10.2a1.06 1.06 0 01-1.5-1.5L9 3.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
Anhängen
|
||
<input type="file" wire:model="attachments" multiple style="display:none;">
|
||
</label>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|