<%- include("partials/app_header"); -%>

<div class="container">
    <div class="row">
        <div class="col-8 offset-2">
            <div class="card mt-5 mb-2">
                <div class="card-header text-center">
                    <h3>Report a Missing Item</h3>
                </div>

                <div class="row">
                    <div class="col-6 offset-3 mt-2 mb-2">
                        <%if(message.length!=0) {%>
                            <div class="alert alert-info text-center" role="alert">
                                <%= message %>
                            </div>
                        <%}%>
                    </div>
                </div>

                <form action="/users/dashboard/lost" method="POST" enctype="multipart/form-data">
                    <div class="container">
                        <div class="row mt-4">
                            <div class="col-6">
                                <label for="itemName" class="form-label">Item Name</label>
                                <input type="text" class="form-control" id="itemName" name="name">
                            </div>

                            <div class="col-6">
                                <label for="category" class="form-label">Category</label>
                                <select class="form-select" name="category">
                                    <option selected>Category</option>
                                    <option value="Electronics">Electronics</option>
                                    <option value="Stationary">Stationary</option>
                                    <option value="Cosmetics">Cosmetics</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-6">
                                <label for="Place" class="form-label">Location</label>
                                <input type="text" class="form-control" id="Place" name="place">
                            </div>


                            <div class="col-6">
                                <label for="date" class="form-label">Date of found missing</label>
                                <input type="date" class="form-control" id="date" name="date">
                            </div>
                        </div>
                        
                        <div class="row mt-4">
                            <div class="col-6 offset-3">
                                <label for="image" class="form-label">Image of Item</label>
                                <input type="file" class="form-control" id="image" name="image">
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <label for="Desc" class="form-label">Description</label>
                                <textarea class="form-control" id="Desc" name="description"></textarea>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12 text-center">
                                <button class="btn btn-primary" type="submit" name="button">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<%- include("partials/footer"); -%>