@php
    use App\Models\Setting;
    use App\Services\MediaStorageService;

    try {
        $siteTitle = Setting::getValue('site_title', 'MovieDocks');
        $storedLogo = Setting::getValue('logo');
        $storedFavicon = Setting::getValue('favicon');

        $mediaStorage = app(MediaStorageService::class);

        $logoUrl = $storedLogo
            ? $mediaStorage->url($storedLogo)
            : null;

        $faviconUrl = $storedFavicon
            ? $mediaStorage->url($storedFavicon)
            : null;
    } catch (\Throwable $exception) {
        $siteTitle = config('app.name', 'MovieDocks');
        $logoUrl = null;
        $faviconUrl = null;
    }
@endphp

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1, viewport-fit=cover"
    >

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Admin Login | {{ $siteTitle }}</title>

    @if($faviconUrl)
        <link rel="icon" href="{{ $faviconUrl }}">
    @endif

    <style>
        :root {
            color-scheme: dark;

            --page-background: #050609;
            --card-background: rgba(12, 14, 19, 0.82);
            --card-border: rgba(255, 255, 255, 0.10);

            --input-background: rgba(255, 255, 255, 0.055);
            --input-border: rgba(255, 255, 255, 0.12);
            --input-hover-border: rgba(255, 255, 255, 0.22);

            --text-primary: #ffffff;
            --text-secondary: #a6adbd;
            --text-muted: #72798a;

            --primary: #ff173d;
            --primary-light: #ff4d69;
            --primary-dark: #cf0029;

            --danger: #ff647a;
            --success: #28d895;

            --focus-ring: rgba(255, 23, 61, 0.16);
            --page-padding: 24px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
            background: var(--page-background);
        }

        body {
            margin: 0;
            min-height: 100vh;
            min-height: 100dvh;
            font-family:
                Inter,
                ui-sans-serif,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;
            color: var(--text-primary);
            background:
                radial-gradient(
                    circle at 50% -10%,
                    rgba(255, 23, 61, 0.17),
                    transparent 35%
                ),
                radial-gradient(
                    circle at 5% 95%,
                    rgba(61, 77, 255, 0.10),
                    transparent 34%
                ),
                radial-gradient(
                    circle at 95% 80%,
                    rgba(255, 23, 61, 0.07),
                    transparent 28%
                ),
                linear-gradient(
                    145deg,
                    #030406 0%,
                    #090b10 45%,
                    #040507 100%
                );
            overflow-x: hidden;
        }

        button,
        input {
            font: inherit;
        }

        button {
            -webkit-tap-highlight-color: transparent;
        }

        .login-page {
            position: relative;
            isolation: isolate;
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding:
                max(var(--page-padding), env(safe-area-inset-top))
                max(var(--page-padding), env(safe-area-inset-right))
                max(var(--page-padding), env(safe-area-inset-bottom))
                max(var(--page-padding), env(safe-area-inset-left));
            overflow: hidden;
        }

        .login-page::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -3;
            pointer-events: none;
            background:
                linear-gradient(
                    rgba(5, 6, 9, 0.83),
                    rgba(5, 6, 9, 0.94)
                ),
                url('{{ asset('assets/images/admin-login-bg.jpg') }}')
                center center / cover no-repeat;
        }

        .login-page::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            pointer-events: none;
            opacity: 0.18;
            background-image:
                linear-gradient(
                    rgba(255, 255, 255, 0.025) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.025) 1px,
                    transparent 1px
                );
            background-size: 44px 44px;
            mask-image:
                radial-gradient(
                    circle at center,
                    black,
                    transparent 72%
                );
        }

        .ambient-light {
            position: fixed;
            z-index: -1;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            filter: blur(110px);
            pointer-events: none;
            opacity: 0.16;
        }

        .ambient-light-one {
            top: -180px;
            left: -150px;
            background: var(--primary);
        }

        .ambient-light-two {
            right: -180px;
            bottom: -200px;
            background: #4a57ff;
        }

        .login-wrapper {
            width: 100%;
            max-width: 510px;
            animation: cardEnter 0.55s ease both;
        }

        .brand-area {
            display: flex;
            justify-content: center;
            margin-bottom: 26px;
        }

        .brand-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 58px;
            text-decoration: none;
        }

        .brand-logo {
            display: block;
            width: auto;
            height: auto;
            max-width: 230px;
            max-height: 72px;
            object-fit: contain;
            filter:
                drop-shadow(0 8px 25px rgba(0, 0, 0, 0.55));
        }

        .brand-fallback {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: white;
            font-size: 27px;
            font-weight: 900;
            letter-spacing: -0.04em;
        }

        .brand-fallback-mark {
            position: relative;
            width: 42px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(255, 255, 255, 0.85);
            border-radius: 10px;
        }

        .brand-fallback-mark::before {
            content: "";
            width: 0;
            height: 0;
            margin-left: 3px;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 11px solid var(--primary);
        }

        .login-card {
            position: relative;
            width: 100%;
            padding: 39px 38px 32px;
            overflow: hidden;
            border: 1px solid var(--card-border);
            border-radius: 30px;
            background:
                linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.045),
                    rgba(255, 255, 255, 0.012)
                ),
                var(--card-background);
            box-shadow:
                0 38px 100px rgba(0, 0, 0, 0.63),
                0 0 0 1px rgba(0, 0, 0, 0.25) inset,
                0 1px 0 rgba(255, 255, 255, 0.07) inset;
            backdrop-filter: blur(24px) saturate(130%);
            -webkit-backdrop-filter: blur(24px) saturate(130%);
        }

        .login-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 12%;
            right: 12%;
            height: 1px;
            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.55),
                    transparent
                );
            opacity: 0.35;
        }

        .login-card::after {
            content: "";
            position: absolute;
            top: -120px;
            right: -120px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(255, 23, 61, 0.10);
            filter: blur(55px);
            pointer-events: none;
        }

        .login-header {
            position: relative;
            z-index: 1;
            margin-bottom: 31px;
            text-align: center;
        }

        .login-header h1 {
            margin: 0 0 9px;
            color: var(--text-primary);
            font-size: 31px;
            line-height: 1.15;
            font-weight: 850;
            letter-spacing: -0.045em;
        }

        .login-header p {
            max-width: 370px;
            margin: 0 auto;
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.65;
        }

        .alert {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 22px;
            padding: 13px 14px;
            border-radius: 14px;
            font-size: 13px;
            line-height: 1.5;
        }

        .alert svg {
            flex: 0 0 auto;
            width: 18px;
            height: 18px;
            margin-top: 1px;
        }

        .alert-error {
            color: #ffd5dc;
            border: 1px solid rgba(255, 100, 122, 0.25);
            background: rgba(255, 100, 122, 0.09);
        }

        .alert-success {
            color: #caffeb;
            border: 1px solid rgba(40, 216, 149, 0.24);
            background: rgba(40, 216, 149, 0.09);
        }

        .form-group {
            position: relative;
            z-index: 1;
            margin-bottom: 19px;
        }

        .form-label {
            display: inline-block;
            margin: 0 0 9px 2px;
            color: #e6e9f1;
            font-size: 13px;
            font-weight: 750;
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            top: 50%;
            left: 16px;
            z-index: 2;
            width: 20px;
            height: 20px;
            color: #7e8596;
            pointer-events: none;
            transform: translateY(-50%);
            transition: color 0.2s ease;
        }

        .form-control {
            width: 100%;
            height: 57px;
            padding: 0 50px 0 49px;
            border: 1px solid var(--input-border);
            border-radius: 16px;
            outline: none;
            color: var(--text-primary);
            background: var(--input-background);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.025) inset;
            font-size: 14px;
            transition:
                border-color 0.2s ease,
                background 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.2s ease;
        }

        .form-control::placeholder {
            color: #666d7d;
        }

        .form-control:hover {
            border-color: var(--input-hover-border);
            background: rgba(255, 255, 255, 0.07);
        }

        .form-control:focus {
            border-color: rgba(255, 23, 61, 0.78);
            background: rgba(255, 255, 255, 0.078);
            box-shadow:
                0 0 0 4px var(--focus-ring),
                0 12px 30px rgba(0, 0, 0, 0.23);
        }

        .form-control:focus + .focus-helper {
            opacity: 1;
        }

        .input-wrapper:focus-within .input-icon {
            color: var(--primary-light);
        }

        .form-control.is-invalid {
            border-color: rgba(255, 100, 122, 0.72);
            box-shadow:
                0 0 0 4px rgba(255, 100, 122, 0.08);
        }

        .password-toggle {
            position: absolute;
            top: 50%;
            right: 11px;
            z-index: 3;
            width: 37px;
            height: 37px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 0;
            border-radius: 11px;
            outline: none;
            color: #858c9c;
            background: transparent;
            cursor: pointer;
            transform: translateY(-50%);
            transition:
                color 0.2s ease,
                background 0.2s ease;
        }

        .password-toggle:hover,
        .password-toggle:focus-visible {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.08);
        }

        .password-toggle svg {
            width: 19px;
            height: 19px;
        }

        .field-error {
            margin: 8px 2px 0;
            color: var(--danger);
            font-size: 12px;
            line-height: 1.45;
        }

        .form-options {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin: 3px 0 25px;
        }

        .remember-label {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #b9bec9;
            font-size: 13px;
            cursor: pointer;
            user-select: none;
        }

        .remember-label input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .custom-checkbox {
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            border: 1px solid rgba(255, 255, 255, 0.19);
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.055);
            transition:
                border-color 0.2s ease,
                background 0.2s ease,
                box-shadow 0.2s ease;
        }

        .custom-checkbox svg {
            width: 13px;
            height: 13px;
            color: white;
            opacity: 0;
            transform: scale(0.55);
            transition:
                opacity 0.18s ease,
                transform 0.18s ease;
        }

        .remember-label input:checked + .custom-checkbox {
            border-color: var(--primary);
            background:
                linear-gradient(
                    135deg,
                    var(--primary-light),
                    var(--primary-dark)
                );
            box-shadow:
                0 0 0 4px rgba(255, 23, 61, 0.11);
        }

        .remember-label input:checked + .custom-checkbox svg {
            opacity: 1;
            transform: scale(1);
        }

        .remember-label input:focus-visible + .custom-checkbox {
            outline: 2px solid rgba(255, 255, 255, 0.8);
            outline-offset: 3px;
        }

        .login-button {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 57px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 20px;
            overflow: hidden;
            border: 0;
            border-radius: 16px;
            outline: none;
            color: #ffffff;
            background:
                linear-gradient(
                    135deg,
                    #ff4965 0%,
                    var(--primary) 48%,
                    var(--primary-dark) 100%
                );
            box-shadow:
                0 17px 36px rgba(255, 23, 61, 0.25),
                0 1px 0 rgba(255, 255, 255, 0.24) inset;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                filter 0.2s ease;
        }

        .login-button::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 75%;
            height: 100%;
            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.28),
                    transparent
                );
            transform: skewX(-22deg);
            transition: left 0.6s ease;
        }

        .login-button:hover {
            transform: translateY(-2px);
            box-shadow:
                0 21px 46px rgba(255, 23, 61, 0.35),
                0 1px 0 rgba(255, 255, 255, 0.28) inset;
        }

        .login-button:hover::before {
            left: 145%;
        }

        .login-button:active {
            transform: translateY(0);
        }

        .login-button:focus-visible {
            box-shadow:
                0 0 0 4px rgba(255, 255, 255, 0.13),
                0 0 0 7px rgba(255, 23, 61, 0.25),
                0 17px 36px rgba(255, 23, 61, 0.25);
        }

        .login-button:disabled {
            opacity: 0.72;
            cursor: not-allowed;
            transform: none;
            filter: grayscale(0.12);
        }

        .button-icon,
        .button-spinner {
            width: 19px;
            height: 19px;
            flex: 0 0 auto;
        }

        .button-spinner {
            display: none;
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: spinnerRotate 0.72s linear infinite;
        }

        .login-button.is-loading .button-icon {
            display: none;
        }

        .login-button.is-loading .button-spinner {
            display: inline-block;
        }

        .security-note {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            margin-top: 22px;
            color: var(--text-muted);
            font-size: 11.5px;
            line-height: 1.5;
            text-align: center;
        }

        .security-note svg {
            width: 15px;
            height: 15px;
            flex: 0 0 auto;
        }

        .security-note strong {
            color: #aeb4c1;
            font-weight: 700;
        }

        .back-home {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .back-home a {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #858c9c;
            text-decoration: none;
            font-size: 12px;
            transition: color 0.2s ease;
        }

        .back-home a:hover {
            color: #ffffff;
        }

        .back-home svg {
            width: 15px;
            height: 15px;
        }

        @keyframes cardEnter {
            from {
                opacity: 0;
                transform: translateY(18px) scale(0.985);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes spinnerRotate {
            to {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 600px) {
            :root {
                --page-padding: 16px;
            }

            .brand-area {
                margin-bottom: 20px;
            }

            .brand-logo {
                max-width: 195px;
                max-height: 58px;
            }

            .brand-fallback {
                font-size: 24px;
            }

            .login-card {
                padding: 31px 21px 27px;
                border-radius: 24px;
            }

            .login-header {
                margin-bottom: 27px;
            }

            .login-header h1 {
                font-size: 28px;
            }

            .login-header p {
                font-size: 13px;
            }

            .form-control,
            .login-button {
                height: 55px;
            }
        }

        @media (max-width: 380px) {
            .login-card {
                padding-left: 17px;
                padding-right: 17px;
            }

            .form-options {
                align-items: flex-start;
                flex-direction: column;
                gap: 12px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
    </style>
</head>

<body>
    <main class="login-page">
        <span class="ambient-light ambient-light-one"></span>
        <span class="ambient-light ambient-light-two"></span>

        <div class="login-wrapper">

            <div class="brand-area">
                <a
                    href="{{ url('/') }}"
                    class="brand-link"
                    aria-label="{{ $siteTitle }} homepage"
                >
                    @if($logoUrl)
                        <img
                            src="{{ $logoUrl }}"
                            alt="{{ $siteTitle }}"
                            class="brand-logo"
                            onerror="
                                this.style.display='none';
                                document.getElementById('brandFallback').style.display='inline-flex';
                            "
                        >
                    @endif

                    <span
                        id="brandFallback"
                        class="brand-fallback"
                        style="{{ $logoUrl ? 'display:none;' : 'display:inline-flex;' }}"
                    >
                        <span class="brand-fallback-mark"></span>
                        <span>{{ $siteTitle }}</span>
                    </span>
                </a>
            </div>

            <form
                id="adminLoginForm"
                method="POST"
                action="{{ route('admin.login.post') }}"
                class="login-card"
                novalidate
            >
                @csrf

                <div class="login-header">
                    <h1>Welcome Back</h1>

                    <p>
                        Enter your email address and password to access the
                        administration panel.
                    </p>
                </div>

                @if(session('success'))
                    <div class="alert alert-success">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            aria-hidden="true"
                        >
                            <circle cx="12" cy="12" r="9"></circle>
                            <path d="m8 12 2.5 2.5L16.5 9"></path>
                        </svg>

                        <span>{{ session('success') }}</span>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-error">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            aria-hidden="true"
                        >
                            <circle cx="12" cy="12" r="9"></circle>
                            <path d="M12 7v6"></path>
                            <path d="M12 17h.01"></path>
                        </svg>

                        <span>{{ session('error') }}</span>
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-error">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            aria-hidden="true"
                        >
                            <circle cx="12" cy="12" r="9"></circle>
                            <path d="M12 7v6"></path>
                            <path d="M12 17h.01"></path>
                        </svg>

                        <span>
                            Login information could not be verified.
                            Please check your details and try again.
                        </span>
                    </div>
                @endif

                <div class="form-group">
                    <label for="email" class="form-label">
                        Email Address
                    </label>

                    <div class="input-wrapper">
                        <svg
                            class="input-icon"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.8"
                            aria-hidden="true"
                        >
                            <rect
                                x="3"
                                y="5"
                                width="18"
                                height="14"
                                rx="3"
                            ></rect>

                            <path d="m4.5 7 7.5 5.5L19.5 7"></path>
                        </svg>

                        <input
                            id="email"
                            name="email"
                            type="email"
                            class="form-control @error('email') is-invalid @enderror"
                            placeholder="admin@example.com"
                            value="{{ old('email') }}"
                            autocomplete="username"
                            inputmode="email"
                            spellcheck="false"
                            required
                            autofocus
                        >
                    </div>

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

                <div class="form-group">
                    <label for="password" class="form-label">
                        Password
                    </label>

                    <div class="input-wrapper">
                        <svg
                            class="input-icon"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.8"
                            aria-hidden="true"
                        >
                            <rect
                                x="5"
                                y="10"
                                width="14"
                                height="10"
                                rx="2.5"
                            ></rect>

                            <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>
                        </svg>

                        <input
                            id="password"
                            name="password"
                            type="password"
                            class="form-control @error('password') is-invalid @enderror"
                            placeholder="Enter your password"
                            autocomplete="current-password"
                            required
                        >

                        <button
                            id="passwordToggle"
                            type="button"
                            class="password-toggle"
                            aria-label="Show password"
                            aria-pressed="false"
                        >
                            <svg
                                id="eyeOpenIcon"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.8"
                                aria-hidden="true"
                            >
                                <path
                                    d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"
                                ></path>

                                <circle cx="12" cy="12" r="2.7"></circle>
                            </svg>

                            <svg
                                id="eyeClosedIcon"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.8"
                                aria-hidden="true"
                                style="display:none;"
                            >
                                <path d="m3 3 18 18"></path>

                                <path
                                    d="M10.6 6.2A10.7 10.7 0 0 1 12 6c6 0 9.5 6 9.5 6a17.3 17.3 0 0 1-2.2 2.9"
                                ></path>

                                <path
                                    d="M6.3 6.3C3.8 8 2.5 12 2.5 12s3.5 6 9.5 6a9.3 9.3 0 0 0 3.1-.5"
                                ></path>

                                <path
                                    d="M9.9 9.9a3 3 0 0 0 4.2 4.2"
                                ></path>
                            </svg>
                        </button>
                    </div>

                    @error('password')
                        <p class="field-error">{{ $message }}</p>
                    @enderror
                </div>

                <div class="form-options">
                    <label class="remember-label">
                        <input
                            type="checkbox"
                            name="remember"
                            value="1"
                            {{ old('remember') ? 'checked' : '' }}
                        >

                        <span class="custom-checkbox">
                            <svg
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="3"
                                aria-hidden="true"
                            >
                                <path d="m5 12 4 4L19 6"></path>
                            </svg>
                        </span>

                        <span>Remember me</span>
                    </label>
                </div>

                <button
                    id="loginButton"
                    type="submit"
                    class="login-button"
                >
                    <span
                        class="button-spinner"
                        aria-hidden="true"
                    ></span>

                    <span id="loginButtonText">
                        Log In
                    </span>

                    <svg
                        class="button-icon"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        aria-hidden="true"
                    >
                        <path d="M5 12h14"></path>
                        <path d="m14 7 5 5-5 5"></path>
                    </svg>
                </button>

                <div class="security-note">
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.8"
                        aria-hidden="true"
                    >
                        <path
                            d="M12 3 4.5 6v5.4c0 4.9 3 8.2 7.5 9.6 4.5-1.4 7.5-4.7 7.5-9.6V6z"
                        ></path>

                        <path d="m9 12 2 2 4-4"></path>
                    </svg>

                    <span>
                        Secure access to
                        <strong>{{ $siteTitle }}</strong>
                        administration panel.
                    </span>
                </div>
            </form>

            <div class="back-home">
                <a href="{{ url('/') }}">
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.8"
                        aria-hidden="true"
                    >
                        <path d="m15 18-6-6 6-6"></path>
                    </svg>

                    Back to website
                </a>
            </div>
        </div>
    </main>

    <script>
        (() => {
            const form = document.getElementById('adminLoginForm');
            const emailInput = document.getElementById('email');
            const passwordInput = document.getElementById('password');

            const passwordToggle =
                document.getElementById('passwordToggle');

            const eyeOpenIcon =
                document.getElementById('eyeOpenIcon');

            const eyeClosedIcon =
                document.getElementById('eyeClosedIcon');

            const loginButton =
                document.getElementById('loginButton');

            const loginButtonText =
                document.getElementById('loginButtonText');

            passwordToggle.addEventListener('click', () => {
                const passwordIsHidden =
                    passwordInput.type === 'password';

                passwordInput.type =
                    passwordIsHidden ? 'text' : 'password';

                passwordToggle.setAttribute(
                    'aria-label',
                    passwordIsHidden
                        ? 'Hide password'
                        : 'Show password'
                );

                passwordToggle.setAttribute(
                    'aria-pressed',
                    passwordIsHidden ? 'true' : 'false'
                );

                eyeOpenIcon.style.display =
                    passwordIsHidden ? 'none' : 'block';

                eyeClosedIcon.style.display =
                    passwordIsHidden ? 'block' : 'none';

                passwordInput.focus({
                    preventScroll: true
                });

                const passwordLength =
                    passwordInput.value.length;

                passwordInput.setSelectionRange(
                    passwordLength,
                    passwordLength
                );
            });

            form.addEventListener('submit', event => {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    form.reportValidity();
                    return;
                }

                loginButton.disabled = true;
                loginButton.classList.add('is-loading');
                loginButtonText.textContent = 'Signing in...';
            });

            [emailInput, passwordInput].forEach(input => {
                input.addEventListener('input', () => {
                    input.classList.remove('is-invalid');
                });
            });
        })();
    </script>
</body>
</html>