{% extends 'main.html' %}
{% load static %}

{% block title %} Shiftingbd | Login {% endblock title %}

{% block content %}
<!-- page-title -->
<div class="cmt-page-title-row contact-p">
    <div class="cmt-page-title-row-inner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="page-title-heading">
                        <h2 class="title">SIGN IN / SIGN UP</h2>
                    </div>
                    <div class="breadcrumb-wrapper">
                        <span>
                            <a title="Homepage" href="{%  url 'home' %}">Home</a>
                        </span>
                        <span>Sign IN / Sign UP</span>
                    </div>
                </div>
            </div>
        </div>
    </div>                    
</div><!-- page-title end-->


<!--site-main start-->
<section class="cmt-row bg-layer-equal-height clearfix"> 
  <div class="container">
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-5">
           <div class="wrapper-img">
             <div class="imgBx"><img class="login-img w-100" src="{% static 'images/bg-image/login.jpg' %}" alt=""/></div>
           </div>
        </div>
        <div class="col-md-5">
            <div class="wrapper">
                <div class="title-text">
                    <div class="title login">
                    Login Form
                    </div>
                    <div class="title signup">
                    Register Form
                    </div>
                </div>
                <div class="form-container">
                    <div class="slide-controls">
                    <input type="radio" name="slide" id="login" checked>
                    <input type="radio" name="slide" id="signup">
                    <label for="login" class="slide login">Login</label>
                    <label for="signup" class="slide signup">Register</label>
                    <div class="slider-tab"></div>
                    </div>
                    <div class="form-inner">
                    <form action="#" class="login">
                        <div class="field">
                        <input type="text" placeholder="Email Address" required>
                        </div>
                        <div class="field">
                        <input type="password" placeholder="Password" required>
                        </div>
                        <div class="pass-link">
                        <a href="#">Forgot password?</a>
                        </div>
                        <div class="field btn">
                        <div class="btn-layer"></div>
                        <input type="submit" value="Login">
                        </div>
                        <div class="signup-link">
                        Not a member? <a href="">Register now</a>
                        </div>
                    </form>
                    <form action="#" class="signup">
                        <div class="field">
                        <input type="text" placeholder="User Name" required>
                        </div>
                        <div class="field">
                        <input type="text" placeholder="Email Address" required>
                        </div>
                        <div class="field">
                        <input type="password" placeholder="Password" required>
                        </div>
                        <div class="field">
                        <input type="password" placeholder="Confirm password" required>
                        </div>
                        <div class="field btn">
                        <div class="btn-layer"></div>
                        <input type="submit" value="Signup">
                        </div>
                    </form>
                    </div>
                </div>
                </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>

</section>
<!--site-main end-->

<script>
    const loginText = document.querySelector(".title-text .login");
    const loginForm = document.querySelector("form.login");
    const loginBtn = document.querySelector("label.login");
    const signupBtn = document.querySelector("label.signup");
    const signupLink = document.querySelector("form .signup-link a");
    signupBtn.onclick = (()=>{
    loginForm.style.marginLeft = "-50%";
    loginText.style.marginLeft = "-50%";
    });
    loginBtn.onclick = (()=>{
    loginForm.style.marginLeft = "0%";
    loginText.style.marginLeft = "0%";
    });
    signupLink.onclick = (()=>{
    signupBtn.click();
    return false;
    });
</script>
{% endblock %}