<!DOCTYPE html>
<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>SKINFT</title>
    <link rel='stylesheet' type='text/css' href='/public.css'>
    <link rel='stylesheet' type='text/css' href='/item.css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <%- include('header', {
        user: locals.user
    }) %>
    <div id="bigContainer">
        <p class='name'>
            <%- item.name %>
        </p>
        <img class='betterImg' src=<%- 'data:image/png;base64,' + item.skin %>></img>
        <span class='priceContainer'>
            <p class='priceUsd'>
                $<%- item.priceUsd %> <button class='cartButton' <% if (!item.status) { %> <%= "disabled" %> <% } %> >ADD TO CART</button>
            </p>
        </span>
        <p class='description'>
            <%- item.description %>
        </p>
    </div>
    <%- include('footer', {
        user: locals.user
    }) %>
    <script>
        const name = "<%- item.name %>";
        $('.cartButton').click(() => {
            $.ajax({
                type: "POST",
                url: "/add-item/" + name,
                data: null,
                success: function(html) { 
                    alert(html);
                    update();
                }
            });
        });

    </script>
</body>
</html>