@extends('layouts.app')

@section('mobile-title', 'Add User')
@section('mobile-subtitle', 'Team access')
@section('mobile-back', route('users.index'))

@section('content')
    <div class="mx-auto max-w-5xl">
        <div class="mb-6 border-b border-[var(--construct-border)] pb-5">
            <a href="{{ route('users.index') }}" class="inline-flex items-center gap-1 text-sm font-bold text-[var(--construct-muted)] hover:text-[var(--construct-primary-dark)]">
                <span class="material-symbols-outlined text-[16px]">arrow_back</span>
                Back to Team
            </a>
            <h1 class="mt-4 text-3xl font-bold">Add New Team Member</h1>
            <p class="mt-2 text-sm text-[var(--construct-muted)]">Invite a new user and configure their access across projects.</p>
        </div>

        <form method="POST" action="{{ route('users.store') }}">
            @include('users.form')
        </form>
    </div>
@endsection