<%- include('./include/_head.ejs') %>
<body>
    <%- include('./include/_navbar.ejs') %>
    <div class="mh-85">
        <div class="container">
            <div class="text-center my-5">
                <h4>Search By Season</h4>
            </div>
    
            <form method="GET" action="/anime/season-search">
                <div class="form-row d-flex justify-content-center">
                    <div class="col-lg-2 col-6">
                        <select class="form-control form-control-sm mb-3" name="season">
                            <option value="">-- Season --</option>
                            <option value="winter">Winter</option>
                            <option value="spring">Spring</option>
                            <option value="fall">Fall</option>
                            <option value="summer">Summer</option>
                        </select>
                    </div>
                    <div class="col-lg-2 col-6 mb-3">
                        <input type="text" class="form-control form-control-sm" name="year" placeholder="Year (e.g 2021)">
                    </div>
                    <div class=" col-lg-1 col-2 mb-3">
                        <button type="submit" class="btn btn-primary btn-sm btn-block">Search</button>
                    </div>
                </div>
            </form>
    
            <hr color="white">
        </div>
        
        <div class="container">
            <div class="row row-cols-5">
                <%  results.forEach( (anime) => { %>
                    <%- include('./include/_anime_thumbnail.ejs', {anime: anime}) %>
                <% }); %>
            </div>
        </div>
        
    </div>
    <%- include('./include/_footer.ejs') %>
</body>
</html>