<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#0f172a; }
    .container { max-width:700px; margin:24px auto; background:#ffffff; border-radius:8px; padding:20px; box-shadow:0 6px 18px rgba(2,6,23,0.08); }
    .brand { display:flex; align-items:center; gap:12px; }
    .brand img { height:40px; }
    .title { margin-top:16px; font-size:20px; font-weight:700; color:#0b1220; }
    .meta { margin-top:8px; color:#475569; font-size:13px; }
    .section { margin-top:18px; }
    .label { font-weight:600; color:#0b1220; font-size:13px; }
    .value { margin-top:6px; color:#0f172a; }
    .footer { margin-top:22px; color:#64748b; font-size:12px; }
    a { color:#0ea5e9; text-decoration:none; }
    .pill { display:inline-block; padding:4px 8px; border-radius:999px; background:#f1f5f9; color:#0b1220; font-size:12px; }
    pre { white-space:pre-wrap; font-family:inherit; font-size:13px; color:#0f172a; }
  </style>
</head>
<body>
  <div class="container">
    <div class="brand">
      <img src="https://cdn.skinbase.org/images/skinbase_logo_64.webp" alt="Skinbase">
      <div>
        <div style="font-weight:700;">Skinbase</div>
        <div style="font-size:12px;color:#64748b;">New staff application / contact form submission</div>
      </div>
    </div>

    <div class="title">New {{ $topicLabel }}: {{ $application->name }}</div>

    <div class="meta">Received {{ $application->created_at->toDayDateTimeString() }}</div>

    <div class="section">
      <div class="label">Details</div>
      <div class="value">
        <div><span class="pill">Topic</span> {{ $topicLabel }}</div>
        <div><strong>Name:</strong> {{ $application->name }}</div>
        <div><strong>Email:</strong> <a href="mailto:{{ $application->email }}">{{ $application->email }}</a></div>
        @if($application->role)<div><strong>Role:</strong> {{ $application->role }}</div>@endif
        @if($application->portfolio)<div><strong>Portfolio:</strong> <a href="{{ $application->portfolio }}">{{ $application->portfolio }}</a></div>@endif
      </div>
    </div>

    @if($application->topic === 'bug')
    <div class="section">
      <div class="label">Bug report</div>
      <div class="value">
        @if($application->payload['data']['affected_url'] ?? false)
          <div><strong>Affected URL:</strong> <a href="{{ $application->payload['data']['affected_url'] }}">{{ $application->payload['data']['affected_url'] }}</a></div>
        @endif
        @if($application->payload['data']['steps'] ?? false)
          <div style="margin-top:8px"><strong>Steps to reproduce:</strong>
            <pre>{{ $application->payload['data']['steps'] }}</pre>
          </div>
        @endif
      </div>
    </div>
    @endif

    <div class="section">
      <div class="label">Message</div>
      <div class="value"><pre>{{ $application->message }}</pre></div>
    </div>

    <div class="section">
      <div class="label">Technical</div>
      <div class="value">
        <div><strong>IP:</strong> {{ $application->ip }}</div>
        <div style="margin-top:6px"><strong>User agent:</strong> {{ $application->user_agent }}</div>
      </div>
    </div>

    <div class="footer">
      <div>If you prefer to manage submissions in the admin UI, open: <a href="{{ url('/admin/applications') }}">/admin/applications</a></div>
      <div style="margin-top:8px">— Skinbase</div>
    </div>
  </div>
</body>
</html>
