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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <title>Job Competency System</title>



    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/album/" />

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

    <link href="../../css/custom.css" rel="stylesheet" />
</head>

<body class="min-vh-100">
    <%- include('common/header'); -%>
        <section class="gradient-custom">
            <%- include ('./partials/messages') %>
                <div class="container bg-light rounded">
                    <div class="row col-md-12 col-md-offset-2 custyle mx-auto">

                        <div class=" px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
                            <h1 class="display-4">Dashboard - Edit</h1>
                            <p class="lead">
                                Here you can remove any of your current competencies and add new ones.
                            </p>
                        </div>


                        <div class="col-md-12 pb-4">
                            <div class="card">
                                <div class="card-body">
                                    <p class="card-text">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">Level</th>
                                                <th scope="col">Indicator</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            <% competencies.forEach(competency=> {

                                                %>

                                                <tr>
                                                    <td>
                                                        <%= competency.competency %>
                                                    </td>
                                                    <td>
                                                        <%= competency.level %>
                                                    </td>
                                                    <td>
                                                        <a role="button" class="btn btn-danger"
                                                            href="/dashboard/delete/<%= competency._id %>">delete</a>
                                                    </td>
                                                </tr>

                                                <% }); %>
                                        </tbody>
                                    </table>
                                    <a role="button" class="btn btn-success" href="/dashboard/add/">Add Competency</a>

                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>

        <%- include('common/footer') -%>
</body>

</html>