<!-- omgezet en werkend gemaakt door ESME -->
<!-- pagina voor zowel results als bookmarks -->

<!DOCTYPE ejs>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resultaten</title>
    <link href="/styles/style.css" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="https://placehold.co/100x100">
</head>

<body>

    <%- include('../partials/navHeader'); %>

        <main id="ResultsPage">
            <h2>
                <%= title %>
            </h2>
            <section class="SortingButtons">
                <input type="search" class="search" placeholder="Wat zoek je?">
                <button class="sort" data-sort="merk" data-default-order='asc'>Merk</button>
                <button class="sort" data-sort="kilometers" data-default-order='asc'>Kilometers</button>
                <button class="sort" data-sort="Brandstof" data-default-order='asc'>Brandstof</button>
                <button class="sort" data-sort="Bouwjaar" data-default-order='asc'>Bouwjaar</button>
            </section>
            <section id="theList">
                <ul class="SearchResultList list">
                    <% autos.forEach(auto=> { %>
                        <li class="SearchResult"
                            style="cursor: pointer; background-image: url(/images/auto/<%= auto.afbeelding %>)"
                            onclick="window.location='/detail/<%= auto._id %>'">
                            <p class="Brandstof">Brandstof: <%= auto.brandstof %>
                            </p>
                            <p class="Bouwjaar">Bouwjaar: <%= auto.Bouwjaar %>
                            </p>
                            <p class="kilometers">KM Stand: <%= auto.kilometers %>
                            </p>
                            <h3 class="merk">
                                <%= auto.merk %>
                            </h3>
                            <% if(mode && mode==='favorites' ) { %>
                                <form method="post" action="/remove-bookmark"
                                    onsubmit="return confirm('Bookmark verwijderen?')">
                                    <input type="hidden" name="carId" id="carId" value="<%= auto._id %>">
                                    <button>Verwijder</button>
                                </form>
                                <% } %>
                        </li>
                        <% }) %>
                </ul>
        </main>


        <%- include('../partials/navFooter'); %>
            <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
            <script src="/scripts/script.js"></script>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    showResults();
                });
            </script>
</body>