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

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

<div class="mw-modal-head">
    <div class="mw-modal-title-wrap">
        <h2 class="mw-modal-title">DNS-Assistent</h2>
        <span class="mw-modal-sub">
            {{ $zone }} &nbsp;·&nbsp; TTL {{ $ttl }}
        </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" style="overflow-y:auto;max-height:70vh;">

    <div class="dns-grid">

        {{-- Step 1: Mail-Records (domain-spezifisch) --}}
        <section>
            <div class="dns-section-head">
                <span class="dns-step-badge">Step 1</span>
                <span style="color:var(--mw-t3)">Mail-Records</span>
                <span class="dns-tag-badge">Absenderdomain</span>
            </div>
            <div class="dns-records">
                @foreach ($dynamic as $r)
                <div class="dns-rec {{ $r['state'] ?? 'neutral' }}">
                    <div class="dns-rec-head">
                        <div style="display:flex;align-items:center;gap:6px;min-width:0;">
                            <span class="dns-type-badge {{ strtolower($r['type']) }}">{{ $r['type'] }}</span>
                            <span class="dns-rec-name">{{ $r['name'] }}</span>
                        </div>
                        <button onclick="navigator.clipboard.writeText({{ json_encode($r['value']) }})" class="dns-copy-btn" title="Kopieren">
                            <svg width="12" height="12" viewBox="0 0 13 13" fill="none"><rect x="4" y="4" width="8" height="8" rx="1.3" stroke="currentColor" stroke-width="1.2"/><path d="M3 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v1" stroke="currentColor" stroke-width="1.2"/></svg>
                        </button>
                    </div>
                    <pre class="dns-rec-value">{{ $r['value'] }}</pre>
                    @if($checked && ($r['state'] ?? 'neutral') !== 'ok' && !empty($r['display_actual']))
                    <div class="dns-rec-actual">
                        <span style="color:var(--mw-t4)">Ist:</span>
                        {{ $r['display_actual'] }}
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </section>

        {{-- Step 2: Globale Infrastruktur --}}
        <section>
            <div class="dns-section-head">
                <span class="dns-step-badge">Step 2</span>
                <span style="color:var(--mw-t3)">Globale Infrastruktur</span>
                <span style="color:var(--mw-t4);font-size:11px">gilt für alle Domains</span>
            </div>
            <div class="dns-records">
                @foreach ($static as $r)
                <div class="dns-rec {{ $r['state'] ?? 'neutral' }}">
                    <div class="dns-rec-head">
                        <div style="display:flex;align-items:center;gap:6px;min-width:0;flex:1;">
                            <span class="dns-type-badge {{ strtolower($r['type']) }}">{{ $r['type'] }}</span>
                            <span class="dns-rec-name">{{ $r['name'] }}</span>
                        </div>
                        <button onclick="navigator.clipboard.writeText({{ json_encode($r['value']) }})" class="dns-copy-btn" title="Kopieren">
                            <svg width="12" height="12" viewBox="0 0 13 13" fill="none"><rect x="4" y="4" width="8" height="8" rx="1.3" stroke="currentColor" stroke-width="1.2"/><path d="M3 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v1" stroke="currentColor" stroke-width="1.2"/></svg>
                        </button>
                    </div>
                    <pre class="dns-rec-value">{{ $r['value'] }}</pre>
                    @if($checked && ($r['state'] ?? 'neutral') !== 'ok' && !empty($r['display_actual']))
                    <div class="dns-rec-actual">
                        <span style="color:var(--mw-t4)">Ist:</span>
                        {{ $r['display_actual'] }}
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </section>

    </div>

    {{-- Optional-Records --}}
    @if(!empty($optional))
    <div style="margin-top:16px;">
        <div class="dns-section-head" style="margin-bottom:10px;">
            <span class="dns-step-badge" style="background:var(--mw-bg4);color:var(--mw-t3);border-color:var(--mw-b2);">Optional</span>
            <span style="color:var(--mw-t3)">Empfohlene Zusatz-Records</span>
        </div>
        <div class="dns-grid">
            @foreach ($optional as $r)
            <div class="dns-rec {{ $r['state'] ?? 'neutral' }}">
                <div class="dns-rec-head">
                    <div style="display:flex;align-items:center;gap:6px;min-width:0;flex:1;">
                        <span class="dns-type-badge {{ strtolower($r['type']) }}">{{ $r['type'] }}</span>
                        <span class="dns-rec-name">{{ $r['name'] }}</span>
                        <span style="font-size:10px;color:var(--mw-t4);background:var(--mw-bg4);border:1px solid var(--mw-b2);padding:0 5px;border-radius:4px;white-space:nowrap;">Optional</span>
                    </div>
                    <button onclick="navigator.clipboard.writeText({{ json_encode($r['value']) }})" class="dns-copy-btn" title="Kopieren">
                        <svg width="12" height="12" viewBox="0 0 13 13" fill="none"><rect x="4" y="4" width="8" height="8" rx="1.3" stroke="currentColor" stroke-width="1.2"/><path d="M3 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v1" stroke="currentColor" stroke-width="1.2"/></svg>
                    </button>
                </div>
                <pre class="dns-rec-value">{{ $r['value'] }}</pre>
                @if(!empty($r['info']))
                <div style="font-size:11px;color:var(--mw-t4);padding:0 10px 8px;">{{ $r['info'] }}</div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

</div>

<div class="mw-modal-foot" style="justify-content:space-between;">
    <div style="display:flex;align-items:center;gap:12px;font-size:11px;color:var(--mw-t4);">
        <span style="display:flex;align-items:center;gap:4px;">
            <span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mw-gr)"></span> OK
        </span>
        <span style="display:flex;align-items:center;gap:4px;">
            <span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mw-am)"></span> Syntaxfehler
        </span>
        <span style="display:flex;align-items:center;gap:4px;">
            <span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mw-rd)"></span> Fehlt
        </span>
    </div>
    <div style="display:flex;gap:8px;">
        <button wire:click="$dispatch('domain:check-dns')" wire:loading.attr="disabled" class="mw-btn-cancel" style="display:inline-flex;align-items:center;gap:5px;">
            <svg width="12" height="12" viewBox="0 0 13 13" fill="none" style="flex-shrink:0;"><path d="M11.5 6.5A5 5 0 1 1 8 2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M8 .5l2.5 2L8 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span wire:loading.remove>DNS prüfen</span>
            <span wire:loading>prüfe…</span>
        </button>
        <button wire:click="$dispatch('closeModal')" class="mw-btn-save">Fertig</button>
    </div>
</div>

</div>