<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="https://laravel.com/img/favicon/favicon-16x16.png" type='image/x-icon'>
    <title>{Lang::T('Admin Login')} - {$_c['CompanyName']}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <style>
        body {
            margin: 0;
            color: #edf3ff;
            background: url(https://therichpost.com/wp-content/uploads/2021/03/material-design-4k-2048x1152-1.jpg) fixed;
            background-size: cover;
            font: 600 16px/18px 'Open Sans', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Center vertically */
        }

        .container {
            width: 90%; /* Use percentage for responsiveness */
            max-width: 510px;
            margin: auto;
            padding: 30px; /* Reduced padding for small screens */
            background: rgba(0, 0, 0, 0.5);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15), 0 20px 50px rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .container:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 25px 55px rgba(0, 0, 0, 0.35);
        }

        h1 {
            text-align: center;
            color: #fff;
            margin-bottom: 20px;
            font-size: 24px; /* Adjusted font size */
            line-height: 1.2; /* Added line height for spacing */
        }

        .group {
            margin-bottom: 15px;
            text-align: center; /* Center align for group */
        }

        .label,
        .input,
        .button {
            width: 100%;
            color: #fff;
            display: block;
            text-align: center; /* Center align label */
        }

        .input {
            border: none;
            padding: 15px;
            border-radius: 25px;
            background: rgba(255, 255, 255, .1);
            max-width: 100%; /* Ensure inputs do not overflow */
            box-sizing: border-box; /* Include padding in width calculation */
        }

        .button {
            border: none;
            padding: 15px;
            border-radius: 25px;
            background: #1161ee;
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }

        .button:hover {
            transform: scale(1.05);
        }

        .social-icons {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }

        .social-icons .icon {
            margin: 0 5px;
            color: #fff;
        }

        .hr {
            height: 2px;
            margin: 30px 0;
            background: rgba(255, 255, 255, .2);
        }

        .foot-lnk {
            text-align: center;
            margin-top: 10px; /* Added margin for spacing */
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px; /* Reduced padding for small screens */
            }

            h1 {
                font-size: 20px; /* Slightly smaller font size */
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>{$_c['CompanyName']} - Admin</h1>
        
        <!-- Login Form -->
        <div class="login-form">
            <form action="{$_url}admin/post" method="post">
                <div class="group">
                    <label for="user" class="label">{Lang::T('Username')}</label>
                    <input id="user" type="text" class="input" name="username" required />
                </div>
                <div class="group">
                    <label for="pass" class="label">{Lang::T('Password')}</label>
                    <input id="pass" type="password" class="input" name="password" required />
                </div>
                <div class="group">
                    <input type="submit" class="button" value="{Lang::T('Login')}" />
                </div>
            </form>
            <div class="hr"></div>
            <div class="social-icons">
                <span>or sign in with</span>
                <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
                <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
                <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
            </div>
            <div class="foot-lnk">
                <a href="#" id="forgot-password">Forget Your Password?</a>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('forgot-password').addEventListener('click', function(event) {
            event.preventDefault(); // Prevent the default link behavior
            alert('Contact System Admin'); // Show alert message
        });
    </script>
</body>

</html>
