<!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">


                    <% competency.forEach(competency=> {

                        %>

                        <div class=" px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
                            <h1 class="display-4">
                                <%= competency._id %>
                            </h1>
                            <p class="lead">
                                <%= competency.description %>
                            </p>
                        </div>
                        <div class="d-flex justify-content-center">
                            <div class="col-md-10 pb-4">
                                <div class="card">
                                    <div class="card-body">

                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Level</th>
                                                    <th scope="col">Indicator</th>
                                                    <th scope="col">Role</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <% competency.levels.forEach(level=> {

                                                    %>
                                                    <tr>
                                                        <td>
                                                            <%= level.level %>
                                                        </td>
                                                        <td>
                                                            <%= level.indicator %>
                                                        </td>
                                                        <td>
                                                            <% level.roles.forEach(role=> {

                                                                %>
                                                                <b>
                                                                    <%= role.career %>
                                                                </b> : <%= role.role %>
                                                                    <br>

                                                                    <% }); %>
                                                        </td>
                                                    </tr>
                                                    <% }); %>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="card-footer">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="d-grid">
                                                    <a type="button" class="btn btn-primary btn-sm"
                                                        href="/competencies/edit/<%= competency._id %>">Edit</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>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <% }); %>

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

</html>