mailwolt/resources/views/livewire/ui/domain/modal/domain-create-modal.blade.php

<div class="mw-modal-frame">

<div class="mw-modal-head">
    <div class="mw-modal-title-wrap">
        <h2 class="mw-modal-title">Domain hinzufügen</h2>
        <span class="mw-modal-sub">DKIM &amp; DNS-Records werden automatisch vorbereitet.</span>
    </div>
    <button wire:click="$dispatch('closeModal')" class="mw-modal-close">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
</div>

<div class="mw-modal-body">

    <div class="mw-modal-row">
        <label class="mw-modal-label">Domain</label>
        <input type="text" wire:model.defer="domain" placeholder="example.com" class="mw-modal-input">
        @error('domain')<div class="mw-modal-error">{{ $message }}</div>@enderror
    </div>

    <div class="mw-modal-row">
        <label class="mw-modal-label">Beschreibung (optional)</label>
        <input type="text" wire:model.defer="description" placeholder="optional" class="mw-modal-input">
        @error('description')<div class="mw-modal-error">{{ $message }}</div>@enderror
    </div>

    <hr class="mw-modal-sep">

    <div class="mw-modal-grid2">
        <div class="mw-modal-row">
            <label class="mw-modal-label">Max. Aliasse</label>
            <input type="number" wire:model.defer="max_aliases" class="mw-modal-input">
            @error('max_aliases')<div class="mw-modal-error">{{ $message }}</div>@enderror
        </div>
        <div class="mw-modal-row">
            <label class="mw-modal-label">Max. Postfächer</label>
            <input type="number" wire:model.defer="max_mailboxes" class="mw-modal-input">
            @error('max_mailboxes')<div class="mw-modal-error">{{ $message }}</div>@enderror
        </div>
    </div>

    <hr class="mw-modal-sep">

    <div class="mw-modal-grid2">
        <div class="mw-modal-row">
            <label class="mw-modal-label">Standard-Quota je Postfach (MiB)</label>
            <input type="number" wire:model.defer="default_quota_mb" class="mw-modal-input">
            @error('default_quota_mb')<div class="mw-modal-error">{{ $message }}</div>@enderror
        </div>
        <div class="mw-modal-row">
            <label class="mw-modal-label">Max. Quota je Postfach (MiB, optional)</label>
            <input type="number" wire:model.defer="max_quota_per_mailbox_mb" class="mw-modal-input">
            @error('max_quota_per_mailbox_mb')<div class="mw-modal-error">{{ $message }}</div>@enderror
        </div>
        <div class="mw-modal-row" style="grid-column:1/-1;">
            <label class="mw-modal-label">Domain-Speicher gesamt (MiB)</label>
            <input type="number" min="1" max="{{ $available_mib }}" wire:model.defer="total_quota_mb" class="mw-modal-input">
            <div class="mw-modal-hint">Verfügbar (nach Systemreserve): {{ number_format($available_mib) }} MiB</div>
            @error('total_quota_mb')<div class="mw-modal-error">{{ $message }}</div>@enderror
        </div>
    </div>

    <hr class="mw-modal-sep">

    <div class="mw-modal-grid2">
        <div class="mw-modal-row">
            <label class="mw-modal-label">Mails pro Stunde (optional)</label>
            <input type="number" wire:model.defer="rate_limit_per_hour" placeholder="leer = kein Limit" class="mw-modal-input">
            @error('rate_limit_per_hour')<div class="mw-modal-error">{{ $message }}</div>@enderror
        </div>
        <div style="display:flex;flex-direction:column;gap:10px;justify-content:center;">
            <label class="mw-modal-check">
                <input type="checkbox" wire:model.defer="rate_limit_override">
                <span class="mw-modal-check-label">Postfach-Overrides erlauben</span>
            </label>
            <label class="mw-modal-check">
                <input type="checkbox" wire:model.defer="active">
                <span class="mw-modal-check-label">Domain aktivieren</span>
            </label>
        </div>
    </div>

    <hr class="mw-modal-sep">

    <div class="mw-modal-grid2">
        <div class="mw-modal-row">
            <label class="mw-modal-label">DKIM-Selector</label>
            <input type="text" wire:model.defer="dkim_selector" placeholder="dkim" class="mw-modal-input">
            @error('dkim_selector')<div class="mw-modal-error">{{ $message }}</div>@enderror
        </div>
        <div class="mw-modal-row">
            <label class="mw-modal-label">DKIM-Schlüssellänge (Bits)</label>
            <select wire:model.defer="dkim_bits" class="mw-modal-input">
                <option value="1024">1024</option>
                <option value="2048">2048 (empfohlen)</option>
                <option value="3072">3072</option>
                <option value="4096">4096</option>
            </select>
            @error('dkim_bits')<div class="mw-modal-error">{{ $message }}</div>@enderror
        </div>
    </div>

    <hr class="mw-modal-sep">

    {{-- Tags --}}
    <div>
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
            <span class="mw-modal-label" style="margin:0;">Tags (optional)</span>
            <button type="button" wire:click="addTag" class="mw-btn-add-row">
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1v8M1 5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                Tag
            </button>
        </div>

        @if(count($tags))
        <div style="display:flex;flex-direction:column;gap:10px;">
            @foreach($tags as $i => $t)
            <div class="mw-modal-recip" wire:key="tag-{{ $i }}" style="gap:8px;">
                <div class="mw-modal-grid2" style="align-items:end;gap:8px;">
                    <div class="mw-modal-row" style="margin:0;">
                        <label class="mw-modal-label">Label</label>
                        <input type="text" placeholder="z. B. Kunde" wire:model.defer="tags.{{ $i }}.label" class="mw-modal-input">
                        @error("tags.$i.label")<div class="mw-modal-error">{{ $message }}</div>@enderror
                    </div>
                    <div class="mw-modal-row" style="margin:0;">
                        <label class="mw-modal-label">Farbe</label>
                        <div style="display:flex;gap:6px;align-items:center;">
                            <input type="text" placeholder="#22c55e" wire:model.lazy="tags.{{ $i }}.color" class="mw-modal-input" style="font-family:monospace;">
                            <input type="color" value="{{ $t['color'] ?? '#22c55e' }}"
                                   wire:change="pickTagColor({{ $i }}, $event.target.value)"
                                   style="width:32px;height:32px;border-radius:6px;border:1px solid var(--mw-b2);background:var(--mw-bg3);padding:2px;cursor:pointer;flex-shrink:0;">
                        </div>
                        @error("tags.$i.color")<div class="mw-modal-error">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
                    @foreach($tagPalette as $hex)
                    <button type="button" wire:click="pickTagColor({{ $i }}, '{{ $hex }}')"
                            style="width:18px;height:18px;border-radius:4px;background:{{ $hex }};border:2px solid {{ ($t['color'] ?? '') === $hex ? 'var(--mw-t1)' : 'transparent' }};cursor:pointer;flex-shrink:0;"></button>
                    @endforeach
                    <button type="button" wire:click="removeTag({{ $i }})" class="mw-modal-recip-del" style="margin-left:auto;">
                        <svg width="12" height="12" viewBox="0 0 13 13" fill="none"><path d="M2 3.5h9M5 3.5V2h3v1.5M5.5 6v4M7.5 6v4M3 3.5l.5 7.5h6L10 3.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>

</div>

<div class="mw-modal-foot">
    <button type="button" wire:click="$dispatch('closeModal')" class="mw-btn-cancel">Abbrechen</button>
    <button type="button" wire:click="$dispatch('domain:create')" class="mw-btn-save">Domain hinzufügen</button>
</div>

</div>