<%- include('./partials/header') %>
<%- include('./partials/nav') %>

<div class="search d-flex align-items-center justify-content-center">
    <section class="main-search d-flex flex-column justify-content-center">
        <div class="text-center mb-4">
            <h1 class="pb-1">Find you local listing</h1>
            <h4>Search for local stores and find out what others think</h4>
        </div>
        <div class="d-flex justify-content-center align-items-center mb-4">
            <form class="flex-grow-1" action="/listings" method="GET">
                <span class="input-group searchbar">
                    <input type="text" name="search" class="form-control" style="min-width: 200px;" placeholder="e.g. 'Acton', 'SW3' 'SW1 4IJ', 'Downing Street' ">
                    <button type="submit" class="btn btn-secondary"><i class="bi bi-search"></i></button>
                </span>
            </form>
            <button class="btn btn-secondary font-btn ms-4"><i class="bi bi-geo-alt-fill"></i> Use my location</button>
        </div>
        <div class="text-center">
            <h5 class="mb-3">or</h5>
            <a href="/listings" class="col-auto btn btn-secondary font-btn"><i class="bi bi-list-ul"></i> Browse all listings</a>
        </div>
        <div class="mt-4">
            <% if (errorMessages.length != 0) { %>
                <div class="alert alert-warning" role="alert" aria-live="assertive">
                    <% errorMessages.forEach(function (error) { %>
                        <i class="bi bi-exclamation-triangle-fill"></i> &nbsp;
                        <%= error %>
                    <% }) %>
                </div>
            <% } %>
        </div>
    </section>
</div>    

<%- include('./partials/footer') %>
