@extends('layouts.app')

@section('title', 'Add team member')

@section('content')
<h1>Add team member</h1>
<div class="card">
    <p style="margin:0 0 16px; font-size:0.875rem; color:var(--m3-outline);">They will be able to log in with the email you provide. You will see a one-time temporary password to share with them; they should change it in Settings after logging in.</p>
    <form method="post" action="{{ route('team.store') }}">
        @csrf
        <label style="display:block; margin-bottom:8px; font-weight:500;">Name</label>
        <input type="text" name="name" value="{{ old('name') }}" required maxlength="255" style="width:100%; max-width:320px; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">
        @error('name')<span style="color:#c62828;font-size:0.875rem;">{{ $message }}</span>@enderror

        <label style="display:block; margin-bottom:8px; font-weight:500;">Email</label>
        <input type="email" name="email" value="{{ old('email') }}" required maxlength="255" style="width:100%; max-width:320px; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">
        @error('email')<span style="color:#c62828;font-size:0.875rem;">{{ $message }}</span>@enderror

        <label style="display:block; margin-bottom:8px; font-weight:500;">Role</label>
        <select name="role" style="padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">
            <option value="member" {{ old('role', 'member') === 'member' ? 'selected' : '' }}>Member</option>
            <option value="tenant_admin" {{ old('role') === 'tenant_admin' ? 'selected' : '' }}>Workspace admin</option>
        </select>
        @error('role')<span style="color:#c62828;font-size:0.875rem;">{{ $message }}</span>@enderror

        <p><button type="submit" style="padding:10px 20px; border-radius:8px; background:var(--m3-primary); color:var(--m3-on-primary); border:none; cursor:pointer;">Add member</button> <a href="{{ route('team.index') }}" style="margin-left:8px;">Cancel</a></p>
    </form>
</div>
@endsection