<!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 href="css/custom.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

     
</head>

<body class="min-vh-100">
    <%- include('common/header'); -%>
        <section class="gradient-custom">
            <%- include ('./partials/messages') %>
                <div class="container bg-light rounded">



                    <div class=" px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
                        <h1 class="display-4">Competencies</h1>
                        <p class="lead">
                            Here is a view of all of the competencies in the system. Go ahead and view some of them to
                            edit or add more!
                        </p>
                        <p class="lead">
                            <a class="btn btn-primary" role="button" href="/competencies/add">
                                Add Competency
                            </a>
                        </p>
                    </div>
                    <div class="col-md-12 pb-4">
                        <div class="card">
                            <div class="card-body">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Competency</th>
                                            <th scope="col">Description</th>
                                            <th scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <% competencies.forEach(competency=> {

                                            %>

                                            <tr>
                                                <td>
                                                    <%= competency._id %>
                                                </td>
                                                <td>
                                                    <%= competency.description %>
                                                </td>
                                                <td>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="d-grid">
                                                                <a type="button" class="btn btn-primary btn-sm"
                                                                    href="/competencies/view/<%= competency._id %>">View</a>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                                <form action="/competencies/delete" method="POST">
                                                                    <input type="hidden" name="id"
                                                                        value="<%= competency._id %>" />
                                                                        <div class="d-grid">
                                                                    <button type="submit"
                                                                        class="btn btn-danger btn-sm">Delete</button>
                                                                        </div>
                                                                </form>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <% }); %>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>

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

</html>