<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ $project['label'] }} — Dev login</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <style>
    *{box-sizing:border-box} body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:#0b1220;color:#e2e8f0;min-height:100vh}
    header{padding:24px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1e293b}
    header .p{display:flex;align-items:center;gap:12px;font-weight:700}
    header .p .dot{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;background:{{ $project['color'] }}}
    a.back{color:#94a3b8;text-decoration:none;font-size:13px}
    .wrap{max-width:820px;margin:0 auto;padding:32px 20px}
    .wrap h1{font-size:20px;margin:0 0 4px} .wrap p.sub{color:#94a3b8;margin:0 0 24px;font-size:14px}
    .list{display:flex;flex-direction:column;gap:8px}
    .row{display:flex;align-items:center;gap:14px;background:#111a2e;border:1px solid #1e293b;border-radius:12px;padding:12px 16px}
    .row .av{width:40px;height:40px;border-radius:50%;background:#1e293b;display:flex;align-items:center;justify-content:center;color:#94a3b8}
    .row .meta{flex:1;min-width:0} .row .meta .n{font-weight:600} .row .meta .e{color:#64748b;font-size:12px}
    .row .biz{font-size:11px;color:#94a3b8;background:#1e293b;padding:2px 8px;border-radius:999px}
    .row form{margin:0} .row button{background:#2563eb;color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer}
    .row button:hover{background:#1d4ed8}
    .empty{color:#94a3b8;text-align:center;padding:40px}
  </style>
</head>
<body>
  <header>
    <div class="p"><span class="dot"><i class="{{ $project['icon'] }}"></i></span> {{ $project['label'] }}</div>
    <a class="back" href="{{ route('saas.chooser') }}"><i class="fas fa-arrow-left"></i> Back to projects</a>
  </header>
  <div class="wrap">
    <h1>Sign in as a dev / test user</h1>
    <p class="sub">Pick a user from this project's database to impersonate. (Dev/QA only.)</p>
    <div class="list">
      @forelse($users as $u)
        <div class="row">
          <div class="av"><i class="fas fa-user"></i></div>
          <div class="meta">
            <div class="n">{{ trim(($u->surname ?? '').' '.($u->first_name ?? '')) ?: $u->username }} <span style="color:#475569">#{{ $u->id }}</span></div>
            <div class="e">{{ $u->username }}{{ $u->email ? ' · '.$u->email : '' }}</div>
          </div>
          @if(!empty($u->business_id))<span class="biz">biz {{ $u->business_id }}</span>@endif
          <form action="{{ route('saas.login-as', $u->id) }}" method="POST">
            @csrf
            <button type="submit"><i class="fas fa-right-to-bracket"></i> Login as</button>
          </form>
        </div>
      @empty
        <div class="empty">No users found in this project's database.</div>
      @endforelse
    </div>
  </div>
</body>
</html>
