{{--
    App\Mail\UserWelcomeMail — sent via NotificationService event 'user.welcome'.
    Vars: $branding, $name, $email, $password, $accountLabel
--}}
@extends('emails.layouts.tenant')

@section('title', 'Welcome to ' . $branding->name)

@section('preheader')
    {{ $branding->name }} has created your {{ $accountLabel }} account. Here's how to sign in.
@endsection

@section('content')
    <x-email.p>Hi {{ strtok($name, ' ') ?: 'there' }},</x-email.p>

    <x-email.p>
        {{ $branding->name }} has set up a {{ $accountLabel }} account for you on iShapps,
        the platform they use to manage shifts and staff. Use the details below to sign in.
    </x-email.p>

    <x-email.details>
        <x-email.detail label="Organisation">{{ $branding->name }}</x-email.detail>
        {{-- zero-width joiner stops clients auto-linking the address --}}
        <x-email.detail label="Email">{{ str_replace('@', "@\u{200D}", $email) }}</x-email.detail>
        <x-email.detail label="Temporary password" mono>{{ $password }}</x-email.detail>
    </x-email.details>

    <x-email.button :href="$branding->loginUrl" :branding="$branding">
        Sign in to {{ $branding->name }}
    </x-email.button>

    <x-email.p muted small>
        <strong style="color:#1A1A2E;">First sign-in:</strong> enter your email, then your temporary
        password. If your email belongs to more than one organisation, choose
        <strong style="color:#1A1A2E;">{{ $branding->name }}</strong>. You'll be asked to set your own
        password straight away.
    </x-email.p>

    <x-email.p muted small>
        Button not working? Copy this link into your browser:<br>
        <a href="{{ $branding->loginUrl }}" style="color:{{ $branding->primaryColor }}; word-break:break-all;">{{ $branding->loginUrl }}</a>
    </x-email.p>

    <x-email.p>
        Kind regards,<br>
        The {{ $branding->name }} team
    </x-email.p>
@endsection