<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{Lang::T('Login')} - {$_c['CompanyName']}</title>
    <link rel="shortcut icon" href="ui/ui/images/logo.png" type="image/x-icon" />

    <link rel="stylesheet" href="ui/ui/styles/bootstrap.min.css">
    <link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
    <style>
        /* Body Styles */
        body {
            margin: 0;
            color: #edf3ff;
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), 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; /* Full screen height for vertical centering */
            background-position: center;
            background-repeat: no-repeat;
        }

        /* Centering the login box */
        .center-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh; /* Full height of the viewport */
        }

        .form-head {
            text-align: center;
        }

        .card-primary {
            width: 100%;
            max-width: 400px; /* Ensure the login box is not too wide */
            margin: 0 auto;
        }

        .card-body {
            padding: 20px;
        }

        .form-control,
        .btn {
            border-radius: 20px; /* Rounded corners for inputs and buttons */
        }

        .btn-group-justified .btn {
            margin-bottom: 10px; /* Ensure spacing between buttons */
        }

        .forgot-password {
            display: block;
            text-align: right;
            margin-top: 10px;
        }

        /* Responsive Design for Smaller Screens */
        @media (max-width: 768px) {
            .card-primary {
                padding: 15px; /* Add more padding for small screens */
                max-width: 90%; /* Limit the width on smaller screens */
            }

            .btn-group-justified .btn {
                font-size: 14px; /* Make the buttons smaller on small screens */
            }

            .forgot-password {
                font-size: 12px; /* Adjust the font size for smaller screens */
            }
        }

        /* Footer Links Styling */
        .footer-links {
            text-align: center;
            margin-top: 15px;
        }

        .footer-links a {
            color: #ffffff;
            font-size: 14px;
            margin: 0 10px;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="center-container">
        <div>
            <div class="form-head mb20">
                <img src="ui/ui/images/logo.png" alt="Company Logo" class="mb5 mt5" style="max-width: 100px;">
                <h1 class="site-logo h2 mb5 mt5 text-center text-uppercase text-bold" style="text-shadow: 2px 2px 4px #757575;">
                    {$_c['CompanyName']}
                </h1>
                <hr>
            </div>

            <div class="card card-primary">
                <div class="card-heading">{Lang::T('Log in to Member Panel')}</div>
                <div class="card-body">
                    <form action="{$_url}admin/post" method="post">
                        <div class="form-group">
                            <label>
                                {if $_c['country_code_phone']!= ''}{Lang::T('Phone Number')}{else}{Lang::T('Username')}{/if}
                            </label>
                            <div class="input-group">
                                {if $_c['country_code_phone']!= ''}
                                    <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-phone-alt"></i></span>
                                {else}
                                    <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-user"></i></span>
                                {/if}
                                <input type="text" class="form-control" name="username"
                                    placeholder="{if $_c['country_code_phone']!= ''}{$_c['country_code_phone']} {Lang::T('Phone Number')}{else}{Lang::T('Username')}{/if}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{Lang::T('Password')}</label>
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon2"><i class="glyphicon glyphicon-lock"></i></span>
                                <input type="password" class="form-control" name="password" placeholder="{Lang::T('Password')}">
                            </div>
                        </div>

                        <div class="clearfix hidden">
                            <div class="ui-checkbox ui-checkbox-primary right">
                                <label>
                                    <input type="checkbox">
                                    <span>Remember me</span>
                                </label>
                            </div>
                        </div>
                        <div class="btn-group btn-group-justified mb15">
                            <div class="btn-group">
                                <a href="{$_url}admin" class="btn btn-success">{Lang::T('Register')}</a>
                            </div>
                            <div class="btn-group">
                                <button type="submit" class="btn btn-primary">{Lang::T('Login')}</button>
                            </div>
                        </div>
                        <a href="{$_url}password/reset" class="forgot-password">{Lang::T('Forgot Password')}</a>
                    </form>
                </div>
            </div>

            <!-- Footer Links -->
            <div class="footer-links">
                <a href="javascript:showPrivacy()">Privacy</a>
                &bull;
                <a href="javascript:showTaC()">T &amp; C</a>
                &bull;
                <a href="javascript:showRefundPolicy()">Refund Policy</a>
                &bull;
                <a href="javascript:showAboutUs()">About Us</a>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="HTMLModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body" id="HTMLModal_konten"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">&times;</button>
                </div>
            </div>
        </div>
    </div>

    <script src="ui/ui/scripts/vendors.js?v=1"></script>
</body>

</html>
