<!-- omgezet en werkend gemaakt door ESME -->

<!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>Auto</title>
        <link href="/styles/style.css" rel="stylesheet">
        <link rel="icon" type="image/svg+xml" href="./images/project_tech_logo_1.png">
    </head>
    <body class="detail-body">

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

        <main class="detail-main">
            <% if(!auto){ %>
                <div class="detail-background">
                <h2>Auto niet gevonden</h2>
                <p>Ga naar <a href="/results">het overzicht</a> om alle auto's te bekijken.</p>
                </div>
            <% } else{ %>  
            <div class="detail-background" style="background-image: url(/images/auto/<%= auto.afbeelding %>);">
                    <div class="detail-icons">
                        <h2 class="car-name"><%= auto.merk %></h2>
                        <ul class="detailResultsList">
                            <li class="model-car">
                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.05176e-05C19.4037 3.05176e-05 25 5.59628 25 12.5C25 19.4038 19.4037 25 12.5 25C5.59625 25 0 19.4038 0 12.5C0 5.59628 5.59625 3.05176e-05 12.5 3.05176e-05ZM2.75625 14.7625C3.1937 16.6405 4.16411 18.3522 5.55089 19.692C6.93767 21.0318 8.68181 21.9426 10.5737 22.315C10.3325 19.0338 9.25375 17.065 7.89125 15.9763C6.58625 14.9325 4.81625 14.5288 2.75625 14.7613V14.7625ZM17.1087 15.975C15.7463 17.0663 14.6675 19.0338 14.4263 22.315C16.3183 21.9425 18.0626 21.0315 19.4494 19.6915C20.8362 18.3515 21.8065 16.6395 22.2437 14.7613C20.1838 14.5288 18.4137 14.9325 17.1087 15.9763V15.975ZM12.5 2.50003C10.1702 2.50034 7.9136 3.31381 6.11948 4.80009C4.32536 6.28636 3.10626 8.35223 2.6725 10.6413L2.61875 10.9513L5.38125 10.3988C6.10875 10.2538 6.8 9.87003 7.5725 9.34878L8.16875 8.93378C9.165 8.22628 10.6412 7.50003 12.5 7.50003C14.235 7.50003 15.6363 8.13253 16.625 8.79253L17.4275 9.34878C18.1025 9.80503 18.7175 10.155 19.3475 10.3338L19.6187 10.3988L22.3813 10.9513C22.0115 8.59619 20.8128 6.45058 19.0012 4.90108C17.1895 3.35158 14.8839 2.50009 12.5 2.50003Z" fill="#A24492"/>
                                </svg>
                                <p><%= auto.carrosserie %></p>
                            </li>
                            <li class="type-car">
                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M25 12.5C25 19.4038 19.4037 25 12.5 25C5.59625 25 0 19.4038 0 12.5C0 5.59628 5.59625 3.05176e-05 12.5 3.05176e-05C19.4037 3.05176e-05 25 5.59628 25 12.5ZM7.5 7.81253C7.74864 7.81253 7.9871 7.9113 8.16291 8.08712C8.33873 8.26293 8.4375 8.50139 8.4375 8.75003V11.5625H11.5625V8.75003C11.5625 8.50139 11.6613 8.26293 11.8371 8.08712C12.0129 7.9113 12.2514 7.81253 12.5 7.81253C12.7486 7.81253 12.9871 7.9113 13.1629 8.08712C13.3387 8.26293 13.4375 8.50139 13.4375 8.75003V11.5625H13.75C14.345 11.5625 14.745 11.5625 15.0538 11.5413C15.355 11.52 15.5012 11.4838 15.5975 11.4438C15.9812 11.285 16.285 10.9813 16.4438 10.5975C16.4837 10.5013 16.52 10.355 16.5413 10.0538C16.5625 9.74503 16.5625 9.34503 16.5625 8.75003C16.5625 8.50139 16.6613 8.26293 16.8371 8.08712C17.0129 7.9113 17.2514 7.81253 17.5 7.81253C17.7486 7.81253 17.9871 7.9113 18.1629 8.08712C18.3387 8.26293 18.4375 8.50139 18.4375 8.75003V8.78128C18.4375 9.33753 18.4375 9.80128 18.4125 10.1813C18.3963 10.5697 18.3161 10.9528 18.175 11.315C18.0024 11.7322 17.7493 12.1113 17.4301 12.4307C17.111 12.75 16.7321 13.0034 16.315 13.1763C15.9525 13.3263 15.5775 13.385 15.1813 13.4113C14.8013 13.4375 14.3375 13.4375 13.7812 13.4375H13.4375V16.25C13.4375 16.4987 13.3387 16.7371 13.1629 16.9129C12.9871 17.0888 12.7486 17.1875 12.5 17.1875C12.2514 17.1875 12.0129 17.0888 11.8371 16.9129C11.6613 16.7371 11.5625 16.4987 11.5625 16.25V13.4375H8.4375V16.25C8.4375 16.4987 8.33873 16.7371 8.16291 16.9129C7.9871 17.0888 7.74864 17.1875 7.5 17.1875C7.25136 17.1875 7.0129 17.0888 6.83709 16.9129C6.66127 16.7371 6.5625 16.4987 6.5625 16.25V8.75003C6.5625 8.62692 6.58675 8.50501 6.63386 8.39127C6.68098 8.27752 6.75003 8.17417 6.83709 8.08712C6.92414 8.00006 7.02749 7.93101 7.14123 7.88389C7.25498 7.83678 7.37689 7.81253 7.5 7.81253Z" fill="#A24492"/>
                                </svg>
                                <p><%= auto.brandstof %></p>
                            </li>
                            <li class="km-car">
                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="27" viewBox="0 0 25 27" fill="none">
                                    <path d="M11.7375 11.379L6.875 16.0903L2.0125 11.379C1.05134 10.4466 0.39688 9.25877 0.131868 7.96571C-0.133143 6.67266 0.00319279 5.33245 0.52364 4.11452C1.04409 2.89659 1.92527 1.85564 3.05579 1.12327C4.18631 0.390909 5.51539 1.52588e-05 6.875 1.52588e-05C8.23461 1.52588e-05 9.56369 0.390909 10.6942 1.12327C11.8247 1.85564 12.7059 2.89659 13.2264 4.11452C13.7468 5.33245 13.8831 6.67266 13.6181 7.96571C13.3531 9.25877 12.6987 10.4466 11.7375 11.379ZM6.875 9.08823C7.53804 9.08823 8.17393 8.83284 8.64277 8.37823C9.11161 7.92362 9.375 7.30703 9.375 6.66412C9.375 6.0212 9.11161 5.40462 8.64277 4.95001C8.17393 4.4954 7.53804 4.24 6.875 4.24C6.21196 4.24 5.57608 4.4954 5.10723 4.95001C4.63839 5.40462 4.375 6.0212 4.375 6.66412C4.375 7.30703 4.63839 7.92362 5.10723 8.37823C5.57608 8.83284 6.21196 9.08823 6.875 9.08823ZM22.9875 22.2875L18.125 27L13.2625 22.2863C12.3013 21.3539 11.6469 20.1661 11.3819 18.873C11.1169 17.58 11.2532 16.2398 11.7736 15.0218C12.2941 13.8039 13.1753 12.7629 14.3058 12.0306C15.4363 11.2982 16.7654 10.9073 18.125 10.9073C19.4846 10.9073 20.8137 11.2982 21.9442 12.0306C23.0747 12.7629 23.9559 13.8039 24.4764 15.0218C24.9968 16.2398 25.1331 17.58 24.8681 18.873C24.6031 20.1661 23.9487 21.3551 22.9875 22.2875ZM18.125 19.9967C18.788 19.9967 19.4239 19.7414 19.8928 19.2867C20.3616 18.8321 20.625 18.2156 20.625 17.5726C20.625 16.9297 20.3616 16.3131 19.8928 15.8585C19.4239 15.4039 18.788 15.1485 18.125 15.1485C17.462 15.1485 16.8261 15.4039 16.3572 15.8585C15.8884 16.3131 15.625 16.9297 15.625 17.5726C15.625 18.2156 15.8884 18.8321 16.3572 19.2867C16.8261 19.7414 17.462 19.9967 18.125 19.9967Z" fill="#A24492"/>
                                </svg>
                                <p><%= auto.kilometers.toLocaleString() %> km</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <section class="car-photos" style="background-image: url(/images/auto/<%= auto.afbeelding %>);"></section>
                <section class="car-info">
                    <p> Een auto is een gemotoriseerd voertuig dat wordt gebruikt voor het vervoer van mensen en goederen over de weg. Het bestaat uit verschillende componenten, zoals een chassis, carrosserie, motor, wielen en interieur. Ze zijn een integraal onderdeel geworden van het moderne transport. </p>
                </section>
                <section class="car-price">
                    <p>â‚¬ <%= auto.prijs.toLocaleString() %>,-</p>
                    <!-- <button>Opslaan</button> -->
                    <form id="saveFavorites" action="/bookmark" method="POST" enctype="application/x-www-form-urlencoded">
                        <input type="hidden" name="carId" id="carId" value="<%= auto._id %>">
                        <button type="submit">Opslaan</button>
                    </form>
                </section>
                <section class="car-map">
                    <img src="/images/map.png">
                    <p>Zoek de dichtstbijzijnde autodealer</p>
                    <button>Zoek nu</button>
                </section>
                <% } %>
            </main>

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

        <script src="/scripts/script.js"></script>

    </body>
</html>