<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suggestion Form</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="px-3 py-2 text-bg-dark border-bottom">
        <div>
            <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <a href="https://iitdh.ac.in" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
                    <img src="https://election.iitdh.ac.in/static/media/logog.084b1a7a95f4bcd9fccd.png" alt="Logo" height="50px">
                </a>
                <div style="margin-right: 270px;">
                    <h4 class="mx-5 px-5">Suggestion Form</h4>
                </div>
                <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
                    <li>
                        <a href="/user_open" class="nav-link text-secondary">
                            <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z"/>
                              </svg>
                            Suggest
                        </a>
                    </li>
                    <li>
                        <a href="/recommendations" class="nav-link text-white">
                            <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-speedometer2" viewBox="0 0 16 16">
                                <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z"/>
                                <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3"/>
                            </svg>
                            Recommendations
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link text-white">
                            <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
                                <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 10V9H1v3h14zm0 1H1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2zm0-5V5H1v3h14zm0-4V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14z"/>
                            </svg>
                            Orders
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link text-white">
                            <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-grid" viewBox="0 0 16 16">
                                <path d="M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2zm0 1h12a1 1 0 0 1 1 1v2H1V4a1 1 0 0 1 1-1zm1 4h10v4H3V7zm-1 5h12a1 1 0 0 0 1-1v-2H1v2a1 1 0 0 0 1 1z"/>
                            </svg>
                            Products
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link text-white">
                            <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
                                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/>
                            </svg>
                            <%= Name %>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <body>
        <div class="card offset-md-2 col-md-8 mt-2 mb-2">
            <div class="card-body">
                <h6 class="lead pb-1">Book Details</h6>
                <form action="/suggested" method="post">
                    <input type="hidden" name="Name" value="<%= Name %>">
                    <input type="hidden" name="Email" value="<%= email %>">
                    <div class="row mb-2">
                        <label class="col-md-3 col-form-label form-field-mandatory" for="fname">Title</label>
                        <div class="col">
                            <input type="text" class="form-control" name="title" id="fname" placeholder="Title of the book" aria-label="Title of the book" required="required" maxlength="32">
                        </div>
                    </div>
                    <div class="row mb-2">
                    <label class="col-md-3 col-form-label form-field-mandatory" for="mail">Author</label>
                    <div class="col">
                        <input type="text" class="form-control" name="author" id="mail" placeholder="Author of the book" aria-label="Author" required="required" maxlength="64">
                    </div>
                </div>
                <div class="row mb-2">
                    <label for="Vendor" class="col-md-3 col-form-label form-field-mandatory">Vendor</label>
                    <div class="col">
                        <input type="text" class="form-control" id="password" name="vendor" placeholder="Vendor Name" aria-label="Vendor" required="required">
                    </div>
                </div>
                <div class="row mb-2">
                    <label for="Publisher" class="col-md-3 col-form-label form-field-mandatory">Publisher</label>
                    <div class="col">
                        <input type="text" class="form-control" id="password" name="publisher" placeholder="Publisher Name" aria-label="Publisher" required="required">
                    </div>
                </div>
                <div class="row mb-2">
                    <label for="branch" class="col-md-3 col-form-label form-field-mandatory">Department</label>
                    <div class="col">
                        <input type="text" class="form-control form-control-dark" placeholder="Department Name" aria-label="Department" list="branch" class="form-control" name="department" required>
                        <datalist id="branch">
                            <option>Computer Science</option>
                            <option>Electrical Engineering</option>
                            <option>Mechanical Engineering</option>
                            <option>Civil Engineering</option>
                            <option>Chemical Engineering</option>
                            <option>Engineering Physics</option>
                            <option>Others</option>
                        </datalist>
                    </div>
                </div>
                <hr>
                <div>
                    <button id="submit" class="btn btn-success offset-md-5 mb-1 " type="submit">Submit</button><br/>
                    <input type="checkbox" class="offset-md-3" required> I have read and agreed to the Terms and Conditions and Privacy Policy.
                </div>
            </form>
            <div class="offset-md-4 mb-1" style="color: red;">
                <% if(locals.alert){ %>
                <%= alert %>
                <form action="/login" method="post" class="mt-1">
                    <button id="redirect" class="btn btn-success offset-md-2 mb-1" type="submit">Login</button>
                </form>
                <% } %>
            </div>
            </div>
        </div>
        <hr/>
        <div class="mt-5 container mb-5">
            <h4 style="text-decoration: underline;">Few guidelines for filling up the suggestions form for procurement of books:</h4>
            <p>i.	Give complete bibliographical details such as full name of author / editor, title of the book, publisher, and year, full name of publisher / association / sponsoring body in Suggestion form.<br/>
                ii.	If the title is published in series or sets, details about volumes or part, series name etc., may please be mentioned.<br/>
                iii.	All literature pamphlets, etc., from which the titles are selected may please be forwarded to the library, if required these will be returned after verification.<br/>
                iv.	Availability in the local market, if known, may be indicated in the form.<br/>
                v.	Library Management System, will accept suggestion form for procuring of the books in ‘specified suggestion form for books’ only.<br/>
                vi.	Incomplete details of the books will not be entertained.<br/>
                </p>
        </div>
        <hr/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>