<?php
isset($_GET['authModal']) ? '' : include 'header.php';
?>

<div class="page center-content flex-center">

    <div class="container p-0">

        <div class="auth-layout">

            <div class="start">
                <div class="image-wrapper">
                    <img src="assets/img/auth/auth-bg-lg.jpg">
                </div>
            </div>

            <div class="end">

                <div class="data-wrapper">

                    <div class="data-wrapper-start mb-0 mb-md-5">

                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div class="flex-center gap-2">
                                <a href="#" class="auth-back flex-center color-gray"> <i class="icon icon-arrow-left"></i> </a>
                                <img src="assets/img/logo-wide-black.svg" class="h-30px">
                            </div>
                            <a href="#" class="close-modal" data-dismiss="modal"> <i class="icon icon-close-circle"></i> Close </a>
                        </div>

                        <div class="mb-4">
                            <h2 class="bold mb-2"> Ahlan </h2>
                            <p class="lead"> Please enter your phone number to <br /> login to your account </p>
                        </div>

                        <div class="form-wrapper">

                            <form class="form mb-4">

                                <div class="form-group">

                                    <label>Your phone</label>

                                    <div class="relative">

                                        <input type="text" class="form-control input-with-country-code" placeholder="Phone Number" required="">

                                        <div class="country-code-container">
                                            <select class="d-none" name="country" id="country">
                                                <option value="001"> 001 </option>
                                                <option value="002"> 002 </option>
                                                <option selected value="003"> 003 </option>
                                            </select>
                                            <div class="dropdown">
                                                <button class="reset-btn dropdown-toggle" type="button" id="choose-country-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <img alt="" src="assets/img/flag-kuwait.png" /> +001
                                                </button>
                                                <div class="dropdown-menu choose-country-list" aria-labelledby="choose-country-btn">
                                                    <a data-value="1" class="dropdown-item" href="#"><img alt="" src="assets/img/flag-kuwait.png" /> +001 </a>
                                                    <a data-value="2" class="dropdown-item " href="#"><img alt="" src="assets/img/flag-ksa.png" /> +002 </a>
                                                    <a data-value="3" class="dropdown-item " href="#"><img alt="" src="assets/img/flag-uae.png" /> +003 </a>
                                                </div>
                                            </div> <!-- dropdown -->
                                        </div><!-- country-code-container -->

                                    </div>

                                </div><!-- form-group  -->



                                <a href="homepage.php?authModal=2" class="btn btn-primary w-100"> Continue </a>

                            </form>

                            <div class="separator-with-centered-text">
                                <p class="text"> or </p>
                            </div> <!-- separator-with-centered-text -->

                            <a href="#" class="social-media-btn-with-start-icon w-100 mb-3">
                                <span class="content">
                                    <img src="assets/img/icons/facebook.svg" class=" image">
                                    Login by Facebook
                                </span>
                            </a>

                            <a href="#" class="social-media-btn-with-start-icon w-100">
                                <span class="content">
                                    <img src="assets/img/icons/google.svg" class=" image"> Login by Google
                                </span>
                            </a>

                        </div> <!-- form-wrapper -->

                    </div> <!-- data-wrapper-start -->

                    <div class="data-wrapper-end">
                        <div class="links-and-help-btn">
                            <div class="help-btn-wrapper mb-3">
                                <a href="#" class="need-help-button"> <i class="icon icon-whatsapp me-2"></i> Need Help ? </a>
                            </div>
                            <div class="links-wrapper">
                                <a href="#" class="me-3"> Privacy Policy </a>
                                <a href="#"> Terms & Conditions </a>
                            </div>
                        </div>
                    </div> <!-- data-wrapper-end -->

                </div> <!-- data-wrapper -->

            </div> <!-- end -->

        </div> <!-- auth-layout -->

    </div> <!-- container -->

</div> <!-- page -->

<?php
isset($_GET['authModal']) ? '' : include 'footer.php';
?>