import { cats } from "./catSeeder.js";
import { html, render } from 'https://unpkg.com/lit-html?module';
function loadCats() {
    let allCats = document.getElementById("allCats")
    
    //create array of li
    const itemTemplates = [];
    for (const c of cats) {
        itemTemplates.push(html`<li><img src="./images/${c.imageLocation}.jpg" width="250" height="250" alt="Card image cap">
    <div class="info">
        <button class="showBtn" @click=${function (e) {
                showStatus(c.statusCode, e.target)
            }}>Show status code</button>
        <div class="status" style="display: none" id="${c.statusCode}">
            <h4>Status Code: ${c.statusCode}</h4>
            <p>Continue</p>
        </div>
    </div>
    </li>`);
    }
    //render ul
    let ul = html`<ul> ${itemTemplates}</ul>`;
    //append it
    render(ul, allCats)

}

function showStatus(statusCode, button) {
    let statusDiv = document.getElementById(statusCode);
    if (statusDiv.style.display == "none") {
        statusDiv.style.display = "block";
        button.textContent = "Hide status code";
    } else {
        statusDiv.style.display = "none";
        button.textContent = "Show status code";
    }
}

loadCats();