@extends('mail.notifications.layout')

@section('email-header')
    @include('mail.partials.brand-header', ['brand' => 'hosting'])
@endsection

@section('email-footer')
    @include('mail.partials.brand-footer', ['brand' => 'hosting'])
@endsection

@section('content')
    <h1 style="margin: 0 0 16px; font-size: 24px; font-weight: 700; color: #0f172a;">You were added to a hosting team</h1>
    <p style="margin: 0 0 16px; color: #475569; font-size: 15px; line-height: 1.7;">
        {{ $ownerName }} granted you developer access to the following Ladill hosting environment{{ count($accountLabels) === 1 ? '' : 's' }}:
    </p>

    <ul style="margin: 0 0 20px; padding-left: 20px; color: #0f172a; font-size: 15px; line-height: 1.8;">
        @foreach ($accountLabels as $label)
            <li>{{ $label }}</li>
        @endforeach
    </ul>

    <p style="margin: 0 0 16px; color: #475569; font-size: 15px; line-height: 1.7;">
        You now have full access to the hosting panel for {{ count($accountLabels) === 1 ? 'this account' : 'these accounts' }} — manage files, domains, databases, SSL, cron jobs, and more.
    </p>

    <p style="margin: 0 0 16px; color: #475569; font-size: 15px; line-height: 1.7;">
        To connect via SSH or SFTP, add your public key from the hosting panel <strong>Settings</strong> page after signing in.
    </p>

    @if ($setupUrl)
        <div style="margin: 24px 0;">
            <a href="{{ $setupUrl }}" style="display: inline-block; background: #4f46e5; color: #ffffff; text-decoration: none; font-weight: 600; padding: 12px 18px; border-radius: 10px;">Set your password</a>
        </div>
        <p style="margin: 0 0 16px; color: #64748b; font-size: 14px; line-height: 1.7;">
            Use the button above to activate your account before signing in.
        </p>
    @else
        <div style="margin: 24px 0;">
            <a href="{{ $loginUrl }}" style="display: inline-block; background: #4f46e5; color: #ffffff; text-decoration: none; font-weight: 600; padding: 12px 18px; border-radius: 10px;">Sign in to Ladill</a>
        </div>
    @endif

    <p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.7;">
        After signing in, open your dashboard here: <a href="{{ $dashboardUrl }}" style="color: #4f46e5;">{{ $dashboardUrl }}</a>
    </p>
@endsection