{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
    <title>Lost and Found</title>
</head>
<body class="bg-dark">

    <!--Navbar-->

    <nav
        class="navbar navbar-expand-sm navbar-dark bg-dark"
    >
        <div class="container">
            <span class="navbar-toggler-icon me-sm-2"data-bs-toggle="offcanvas"
            data-bs-target="#Id1"
            aria-controls="Id1"></span>
            <a class="navbar-brand" href="{% url "lostandfound:home" %}">Lost and Found Items</a>
            <button
                class="navbar-toggler d-lg-none"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapsibleNavId"
                aria-controls="collapsibleNavId"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="/home" aria-current="page"
                            >Home
                            <span class="visually-hidden">(current)</span></a
                        >
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url "newsroom:home" %}">News Room</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a
                            class="nav-link dropdown-toggle"
                            href="#"
                            id="dropdownId"
                            data-bs-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                            >More Seetings</a
                        >
                        <div
                            class="dropdown-menu"
                            aria-labelledby="dropdownId"
                        >
                            <a class="dropdown-item" href="#"
                                >Action 1</a
                            >
                            <a class="dropdown-item" href="#"
                                >Action 2</a
                            >
                        </div>
                    </li>
                </ul>
               
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row" id="card-container">
            
        </div>
    </div>
    


    <!--Off canvas/ Sidebar-->

    
    <div
        class="offcanvas offcanvas-start"
        data-bs-scroll="true"
        tabindex="-1"
        id="Id1"
        aria-labelledby="Enable both scrolling & backdrop"
    >
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="Enable both scrolling & backdrop">
                Controls
            </h5>
            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="offcanvas"
                aria-label="Close"
            ></button>
        </div>
        <div class="offcanvas-body">
            <button class="btn btn-light border-dark w-100"
            data-bs-toggle="modal"
            data-bs-target="#modalId">Add Lost Item</button>
        </div>
    </div>
    

    <script src="{% static "js/bootstrap.bundle.js" %}"></script>

    <script>
        const cardContainer = document.getElementById('card-container');
        async function getLostItemsData() {
            const response = await fetch('http://127.0.0.1:8000/api/lost-item/');
            const data = await response.json();
            data.forEach(item => {
                const card = document.createElement('div');
                card.className = "col-md-3 mt-sm-3";
                card.innerHTML = `
                    <div class="card">
                        <div class="card-body">
                            <img src="${item.image}" class="card-img-top" alt="...">
                            <h5 class="card-title">${item.title}</h5>
                            <p class="card-text">${item.description}</p>
                            <small class="bg-dark text-light border-dark p-1 text-light rounded">+233 23 456 7892</small>
                        </div>
                    </div>
                `;
                cardContainer.appendChild(card);
            });
        }

        getLostItemsData();


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

{% include "lostandfound/lostandfound_modal.html" %}

From the codebase given, Add a delete button to the card to remove the Item. In the API I specified the destroy function.