<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mail Preview · Aziros</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; background: #F4F6FB; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #111827; }
        .wrapper { max-width: 960px; margin: 0 auto; padding: 48px 24px; }
        .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
        .logo { font-size: 18px; font-weight: 300; color: #111827; letter-spacing: -0.5px; text-decoration: none; }
        .badge { font-size: 11px; background: #EEF2FF; color: #4F46E5; padding: 3px 10px; border-radius: 20px; font-weight: 600; letter-spacing: 0.3px; }
        h1 { margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
        .subtitle { margin: 0 0 32px; font-size: 14px; color: #6B7280; }
        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
        .card { background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; transition: box-shadow 0.15s, border-color 0.15s; text-decoration: none; color: inherit; display: block; }
        .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: #C7D2FE; }
        .preview-frame { width: 100%; height: 200px; border: none; background: #F9FAFB; pointer-events: none; display: block; }
        .card-body { padding: 14px 16px; border-top: 1px solid #F3F4F6; }
        .card-name { font-size: 13px; font-weight: 600; color: #111827; margin: 0 0 2px; }
        .card-path { font-size: 11px; color: #9CA3AF; margin: 0; font-family: 'SF Mono', Menlo, monospace; }
        .card-footer { padding: 10px 16px; background: #F9FAFB; border-top: 1px solid #F3F4F6; display: flex; justify-content: flex-end; }
        .btn { font-size: 12px; color: #4F46E5; font-weight: 600; text-decoration: none; padding: 5px 12px; background: #EEF2FF; border-radius: 6px; }
        .btn:hover { background: #E0E7FF; }
    </style>
</head>
<body>
<div class="wrapper">

    <div class="header">
        <a href="{{ config('app.url') }}" class="logo">aziros</a>
        <span class="badge">Mail Preview</span>
    </div>

    <h1>E-Mail Templates</h1>
    <p class="subtitle">{{ count($templates) }} Templates &mdash; Klicke auf eine Karte für die Vollansicht.</p>

    <div class="grid">
        @foreach($templates as $tpl)
            <a href="{{ url('/admin/mail-preview/' . $tpl['key']) }}" class="card" target="_blank">
                <iframe
                    src="{{ url('/admin/mail-preview/' . $tpl['key']) }}"
                    class="preview-frame"
                    title="{{ $tpl['name'] }}"
                    loading="lazy"
                    style="transform-origin: top left; transform: scale(0.5); width: 200%; height: 400px; margin-bottom: -200px;">
                </iframe>
                <div class="card-body">
                    <p class="card-name">{{ $tpl['name'] }}</p>
                    <p class="card-path">emails/{{ str_replace('.', '/', $tpl['key']) }}.blade.php</p>
                </div>
                <div class="card-footer">
                    <span class="btn">Vollansicht &rarr;</span>
                </div>
            </a>
        @endforeach
    </div>

</div>
</body>
</html>
