<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   body {
            font-family: Arial, sans-serif;
            background-color: #44447b;
            padding: 100px;
            background-image: url('https://images.unsplash.com/photo-1462823985959-022de68638a2?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
            background-size: cover;
            background-position: center center;
            
        }
        .col-md-6{
            position: relative;
            max-width: 600px;
            padding: 16px;
            background: rgba(232, 187, 143, 0.5);
            border-radius: 15px;
            box-shadow: 12px 12px 2px 1px rgba(116, 117, 118, 0.425);
            transition: all .3s;
            
        }
        .col-md-6:hover{
            box-shadow: -12px 12px 2px -1px rgba(116, 117, 118, 0.425);
        }
form {
    background-color: #d0d7dd;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-control {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
}


.form-label {
    font-weight: bold;
}

.form-check {
    display: inline-block;
    margin-right: 15px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-success {
    background-color: #28a745;
    color: #fff;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

    </style>
</head>
<body>
    <!-- body bala logic yha pr hoga -->
<% layout('layouts/boilerplate')%>  <!--yha layouts k boiler plate ko use kiya h-->
<%- include('../partials/flash') %>  <!--flash ko add krne k liye-->
<div class="row">
    <div class="col-md-6 mx-auto">
        <h1 class="display-6">Sign up</h1>
        <form action="/register" method="POST">
            <div class="mb-3">
                <label class="form-label"for="username">Username</label>
                <input type="text" class="form-control"name="username"  id="username" placeholder="username">
            </div>
            <div class="mb-3">
                <label class="form-label"for="email">Email:</label>
                <input type="email" class="form-control"name="email"  id="email" placeholder="email">
            </div>
            <div class="mb-3">
                <p class="mb-2">Want to register as ?</p>
                <div class="">
                    <label for="buyer" class="form-label">Buyer:</label>
                    <input type="radio" class="form-check-input" name="role" id="buyer" value="buyer">
                </div>
                <div class="">
                    <label for="seller" class="form-label">Seller:</label>
                    <input type="radio" class="form-check-input" name="role" id="seller" value="seller">
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label"for="password">Password:</label>
                <input type="password" class="form-control"name="password"  id="password" placeholder="password">
            </div>
            <button type="submit" class="btn bnt-sm btn-success mb-3">Sign Up</button>
            <p class="fw-light mt-2">Already have an account , <a href="/login">Login</a></p>

        </form>
    </div>
   
</div>

</body>
</html>
