@php
    $tenant = $this->tenant;
    $brand = $tenant?->displayName() ?? (siteUrlSettings('site_name') ?? config('app.name'));
    $baseDomain = parse_url(config('app.url'), PHP_URL_HOST);
@endphp

<div class="signup-page tenant-login">
    <div class="container">
        <div class="row justify-content-center align-items-center g-4">

            {{-- Brand side. On a phone this collapses above the form so the
                 customer still sees whose network they are signing in to. --}}
            <div class="col-12 col-lg-5 order-lg-1">
                <div class="tlogin-brand">
                    @if ($tenant?->logo_path)
                        <img src="{{ site_image($tenant->logo_path) }}" alt="{{ $brand }}" class="tlogin-logo">
                    @else
                        <span class="tlogin-mark">{{ Str::upper(Str::substr($brand, 0, 1)) }}</span>
                    @endif

                    <h1 class="tlogin-name">{{ Str::upper($brand) }}</h1>
                    <p class="signup-lead">
                        {{ __('Sign in to manage your network, your packages and your customers.') }}
                    </p>

                    <ul class="signup-points">
                        <li><i class="bi bi-check2"></i> {{ __('Track today\'s takings as they land') }}</li>
                        <li><i class="bi bi-check2"></i> {{ __('Add and suspend subscribers') }}</li>
                        <li><i class="bi bi-check2"></i> {{ __('Watch your routers and sessions live') }}</li>
                    </ul>
                </div>
            </div>

            {{-- Form side --}}
            <div class="col-12 col-lg-5 order-lg-2">
                <div class="signup-card">
                    <h2 class="tlogin-title">{{ __('Welcome back') }}</h2>
                    <p class="tlogin-sub">{{ $tenant?->slug }}.{{ $baseDomain }}</p>

                    @error('email')
                        <div class="tlogin-alert">{{ $message }}</div>
                    @enderror

                    <form wire:submit="authenticate">
                        <label class="signup-label" for="email">{{ __('Email') }}</label>
                        <div class="hs-input signup-addon" style="display:block">
                            <input id="email" type="email" class="signup-input" wire:model="email"
                                   autocomplete="username" autocapitalize="none" spellcheck="false"
                                   placeholder="you@example.com">
                        </div>

                        <label class="signup-label mt-3" for="password">{{ __('Password') }}</label>
                        <input id="password" type="password" class="signup-input" wire:model="password"
                               autocomplete="current-password" placeholder="{{ __('Your password') }}">
                        @error('password')<span class="signup-error">{{ $message }}</span>@enderror

                        <label class="tlogin-remember">
                            <input type="checkbox" wire:model="remember">
                            <span>{{ __('Keep me signed in') }}</span>
                        </label>

                        <button type="submit" class="btn-signup w-100 mt-3" wire:loading.attr="disabled">
                            <span wire:loading.remove wire:target="authenticate">{{ __('Sign in') }}</span>
                            <span wire:loading wire:target="authenticate">{{ __('Signing in...') }}</span>
                        </button>
                    </form>

                    <p class="signup-fineprint text-center mt-3 mb-0">
                        {{ __('Not registered yet?') }}
                        <a href="{{ 'https://'.$baseDomain.'/get-started' }}">{{ __('Start your own portal') }}</a>
                    </p>
                </div>

                <p class="signup-fineprint text-center mt-3">
                    <a href="{{ 'https://'.$baseDomain }}">{{ __('Powered by') }} {{ siteUrlSettings('site_name') ?? config('app.name') }}</a>
                </p>
            </div>

        </div>
    </div>
</div>