<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dev Quick Login · VetClinic</title>
    <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
    <style>
        *{box-sizing:border-box;margin:0;padding:0;}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
            background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
            min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
        .dl-card{background:#fff;border-radius:16px;max-width:560px;width:100%;
            box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden;}
        .dl-head{padding:26px 30px 18px;text-align:center;}
        .dl-head h1{font-size:20px;color:#1e293b;font-weight:800;}
        .dl-head p{font-size:12.5px;color:#64748b;margin-top:5px;}
        .dl-warn{margin:0 30px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;
            border-radius:9px;padding:9px 13px;font-size:11.5px;line-height:1.5;}
        .dl-grid{padding:18px 30px 30px;display:grid;grid-template-columns:1fr 1fr;gap:13px;}
        @media(max-width:480px){.dl-grid{grid-template-columns:1fr;}}
        .dl-btn{display:flex;flex-direction:column;gap:5px;text-decoration:none;
            border:1px solid #e5e9f0;border-radius:11px;padding:15px 16px;
            transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;}
        .dl-btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.13);}
        .dl-btn .ico{width:38px;height:38px;border-radius:9px;display:flex;
            align-items:center;justify-content:center;color:#fff;font-size:17px;margin-bottom:3px;}
        .dl-btn .role{font-size:14px;font-weight:700;color:#1e293b;}
        .dl-btn .desc{font-size:11px;color:#64748b;line-height:1.45;}
        .dl-foot{background:#f8fafc;border-top:1px solid #f0f2f5;padding:11px 30px;
            text-align:center;font-size:11px;color:#94a3b8;}
        .dl-foot code{background:#eef2f7;padding:1px 6px;border-radius:4px;color:#475569;}
    </style>
</head>
<body>
    <div class="dl-card">
        <div class="dl-head">
            <h1><i class="fa fa-bolt" style="color:#f59e0b;"></i> Developer Quick Login</h1>
            <p>Pick a role to sign in instantly — no username or password needed.</p>
        </div>

        <div class="dl-warn">
            <i class="fa fa-exclamation-triangle"></i>
            <strong>Development tool.</strong> This page is passwordless. It only works while
            <code style="background:#fef3c7;">VET_DEV_LOGIN=true</code> is set in <code style="background:#fef3c7;">.env</code>
            and must never be enabled on a live site.
        </div>

        <div class="dl-grid">
            @foreach($profiles as $key => $p)
                <a class="dl-btn" href="{{ route('vc.dev-login.login', $key) }}">
                    <span class="ico" style="background:{{ $p['color'] }};">
                        <i class="fa {{ $p['icon'] }}"></i>
                    </span>
                    <span class="role">{{ $p['name'] }}</span>
                    <span class="desc">{{ $p['desc'] }}</span>
                </a>
            @endforeach
        </div>

        <div class="dl-foot">
            Signs in as a dedicated <code>dev_*</code> account on business #1 ·
            the standard <a href="{{ url('/login') }}" style="color:#6366f1;">login page</a> is unaffected.
        </div>
    </div>
</body>
</html>
