source: templates/book_details.html

<!DOCTYPE html>
<html lang="mk">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ kniga[1] }} | BiblioPremium</title>

    <link rel="stylesheet"
          href="{{ url_for('static', filename='style.css') }}">
</head>

<body>

<header class="navbar">

    <div class="logo">
        <img src="{{ url_for('static', filename='images/logo.png') }}"
             alt="BiblioPremium">
    </div>

    <nav>

        <a href="{{ url_for('home') }}">
            Почетна
        </a>

        <a href="{{ url_for('home') }}#books">
            Книги
        </a>

        <a href="{{ url_for('recommendations') }}">
            Препораки
        </a>

        {% if session.get('korisnik_id') %}

            <a href="{{ url_for('favorites') }}">
                Омилени
            </a>

            <a href="{{ url_for('orders') }}">
                Мои нарачки
            </a>

            <a href="{{ url_for('preferences') }}">
                Мои преференции
            </a>

        {% endif %}

    </nav>


    <div class="nav-buttons">

        {% if session.get('korisnik_id') %}

            <span class="logged-user">
                👤 {{ session.get('ime') }}
            </span>

            <a href="{{ url_for('logout') }}"
               class="login-btn">
                Одјави се
            </a>

        {% else %}

            <a href="{{ url_for('login') }}"
               class="login-btn">
                Најава
            </a>

            <a href="{{ url_for('register') }}"
               class="register-btn">
                Регистрација
            </a>

        {% endif %}

    </div>

</header>


<section class="book-details">

    <!-- КОРИЦА -->

    <div class="details-cover">

        {% if kniga[1] == 'Atomic Habits' %}

            <img src="{{ url_for('static', filename='images/Atomic Habits.png') }}"
                 alt="Atomic Habits">

        {% elif kniga[1] == 'The Alchemist' %}

            <img src="{{ url_for('static', filename='images/The Alchemist.png') }}"
                 alt="The Alchemist">

        {% elif kniga[1] == 'Ikigai' %}

            <img src="{{ url_for('static', filename='images/Ikigai.png') }}"
                 alt="Ikigai">

        {% elif kniga[1] == 'Deep Work' %}

            <img src="{{ url_for('static', filename='images/Deep Work.png') }}"
                 alt="Deep Work">

        {% elif kniga[1] == 'The Power of Now' %}

            <img src="{{ url_for('static', filename='images/The Power of Now.png') }}"
                 alt="The Power of Now">

        {% elif kniga[1] == 'Mindset' %}

            <img src="{{ url_for('static', filename='images/Mindset.png') }}"
                 alt="Mindset">

        {% elif kniga[1] == 'The Little Prince' %}

            <img src="{{ url_for('static', filename='images/The Little Prince.png') }}"
                 alt="The Little Prince">

        {% elif kniga[1] == 'Think and Grow Rich' %}

            <img src="{{ url_for('static', filename='images/Think and Grow Rich.png') }}"
                 alt="Think and Grow Rich">

        {% else %}

            <span class="book-placeholder">📖</span>

        {% endif %}

    </div>


    <!-- ИНФОРМАЦИИ -->

    <div class="details-info">

        <span class="details-label">
            ДЕТАЛИ ЗА КНИГАТА
        </span>

        <h1>
            {{ kniga[1] }}
        </h1>

        <p class="details-year">
            Година на издавање: {{ kniga[4] }}
        </p>

        <p class="details-description">
            {{ kniga[3] }}
        </p>

        <p class="details-price">
            {{ kniga[2] }} ден.
        </p>


        <!-- КОЛИЧИНА И КОПЧИЊА -->

        <div class="book-purchase-area">

            <form
                method="POST"
                action="{{ url_for('buy_book', kniga_id=kniga[0]) }}"
                class="purchase-form"
            >

                <!-- МОДЕРЕН ИЗБОР НА КОЛИЧИНА -->

                <div class="quantity-box">

                    <span class="quantity-label">
                        Количина
                    </span>

                    <div class="quantity-control">

                        <button
                            type="button"
                            class="quantity-btn"
                            onclick="changeQuantity(-1)"
                        >
                            −
                        </button>

                        <input
                            type="number"
                            id="kolicina"
                            name="kolicina"
                            value="1"
                            min="1"
                            max="5"
                            readonly
                        >

                        <button
                            type="button"
                            class="quantity-btn"
                            onclick="changeQuantity(1)"
                        >
                            +
                        </button>

                    </div>

                </div>


                <!-- КОПЧИЊА -->

                <div class="action-buttons">

                    <button type="submit" class="buy-btn">
                        Купи ја книгата
                    </button>


                    {% if is_favorite %}

                        <button
                            type="button"
                            class="favorite-btn"
                            disabled
                        >
                            ♥ Во омилени
                        </button>

                    {% else %}

                        <button
                            type="submit"
                            class="favorite-btn"
                            formaction="{{ url_for('add_favorite', kniga_id=kniga[0]) }}"
                            formnovalidate
                        >
                            ♡ Додај во омилени
                        </button>

                    {% endif %}

                </div>

            </form>

        </div>

    </div>

</section>


<!-- JAVASCRIPT ЗА КОЛИЧИНАТА -->

<script>

    function changeQuantity(change) {

        const input = document.getElementById("kolicina");

        let quantity = parseInt(input.value);

        let newQuantity = quantity + change;

        if (newQuantity >= 1 && newQuantity <= 5) {
            input.value = newQuantity;
        }

    }

</script>


</body>

</html>