@props([
    'role',
    'title',
    'description' => null,
    'accent' => 'indigo', // indigo | teal
])

@php
    $ring = $accent === 'teal'
        ? 'ring-teal-200/80 hover:ring-teal-300/80'
        : 'ring-indigo-200/80 hover:ring-indigo-300/80';
    $btn = $accent === 'teal'
        ? 'admin-btn-primary'
        : 'inline-flex w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-900/15 transition hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500';
@endphp

<div {{ $attributes->merge(['class' => "flex flex-col rounded-2xl border border-slate-200/80 bg-white/95 p-6 shadow-sm shadow-slate-200/50 ring-1 ring-inset {$ring} sm:p-8"]) }}>
    <p class="text-xs font-semibold uppercase tracking-wider {{ $accent === 'teal' ? 'text-teal-600' : 'text-indigo-600' }}">{{ $accent === 'teal' ? 'Telehealth module' : 'Hospital network' }}</p>
    <h2 class="mt-2 text-xl font-bold tracking-tight text-slate-900">{{ $title }}</h2>
    @if($description)
        <p class="mt-2 text-sm text-slate-600">{{ $description }}</p>
    @endif

    <form method="POST" action="{{ route('role.login.submit') }}" class="mt-6 space-y-4">
        @csrf
        <input type="hidden" name="role" value="{{ $role }}">

        <div>
            <label class="admin-form-label" for="email-{{ $role }}">Email</label>
            <input id="email-{{ $role }}" type="email" name="email" value="{{ old('email') }}" class="admin-input" required autocomplete="username">
        </div>

        <div>
            <label class="admin-form-label" for="password-{{ $role }}">Password</label>
            <input id="password-{{ $role }}" type="password" name="password" class="admin-input" required autocomplete="current-password">
        </div>

        @error('email')
            <p class="text-sm text-red-600">{{ $message }}</p>
        @enderror

        <button type="submit" class="{{ $btn }} w-full justify-center">Sign in</button>
    </form>
</div>