<%-include('../head.ejs')%>

    <body>
        <header>
            <h1>
                <%=title%>
            </h1>
        </header>
        <section id='qualitydo'>
            <h1>Challenges</h1>
            <ul>
            <% if (challenges.length>0) { %>
                <% challenges.forEach(challenge=>{ %>
                    <li id="challenge" data-id = `<%-challenge.id%>` onclick="showDetails(this)">  <%= challenge.challenge %> </li>
                            <% }) %>
                                <% } %>
                    </ul>

            <h1>Actions</h1>
            <ul>
            <% if (actions.length>0) { %>
                <% actions.forEach(action=>{ %>
                        <li id="action">
                            <%= action.action %>
                        </li>
                        <% }) %>
                            <% } %>
                    </ul>
        </section>

        <script>
            function showDetails(challenge){
                const id = challenge.getAttribute('data-id'); 
                alert(`The id is ${id}`)
            }
        </script>
    </body>