<!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') %>

                <% competencies.forEach(competency=> {

                    %>
                    <div class="container bg-light rounded mb-4">
                        <div class="row col-md-12 col-md-offset-2 custyle mx-auto">
                            <div class="col-md-6">
                                <form method="POST">
                                    <div class="form-group mb-3 pt-3">
                                        <label for="competency">Competency</label>
                                        <input value="<%= competency.competency %>" type="text" class="form-control"
                                            id="competency" name="competency" placeholder="Enter Competency" />
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="description">Description</label>
                                        <input value="<%= competency.description %>" type="text" class="form-control"
                                            id="description" name="description" placeholder="Enter Description" />
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="level">Level</label>
                                        <input value="<%= competency.level %>" type="text" class="form-control"
                                            id="level" name="level" placeholder="Enter Level" />
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="indicator">Indicator</label>
                                        <input value="<%= competency.indicator %>" type="text" class="form-control"
                                            id="indicator" name="indicator" placeholder="Enter Indicator" />
                                    </div>
                                    <div class="form-group mb-3">
                                        <input type="hidden" name="id" value="<%= competency._id %>" />
                                        <button type="submit" class="btn btn-success">Update</button>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-6">
                                <div class="col-md-12">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">Career level</th>
                                                <th scope="col">Role</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <% competency.roles.forEach(competencyRole=> {
                                                roles.forEach(role=> {
                                                if(competencyRole.id == role.id) {
                                                %>
                                                <tr>
                                                    <td>
                                                        <%= role.career %>
                                                    </td>
                                                    <td>
                                                        <%= role.role %>
                                                    </td>
                                                    <td>
                                                        <form action="/competencies/role/delete/<%= competency._id %>"
                                                            method="POST">
                                                            <div class="form-group mb-3">
                                                                <input type="hidden" name="roleId"
                                                                    value="<%= role._id %>" />
                                                                <input type="hidden" name="competency"
                                                                    value="<%= competency.competency %>" />
                                                                <button type="submit"
                                                                    class="btn btn-danger">Delete</button>
                                                            </div>
                                                        </form>
                                                    </td>
                                                </tr>
                                                <% }});}); %>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-12">
                                    <form action="/competencies/role/add/<%= competency._id %>" method="POST">
                                        <div class="form-group mb-3">
                                            <label for="career">Career Level</label>
                                            <input type="text" class="form-control" id="career" name="career"
                                                placeholder="Enter Career Level" />
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="role">Role</label>
                                            <input type="text" class="form-control" id="role" name="role"
                                                placeholder="Enter Role" />
                                        </div>
                                        <div class="form-group mb-3">
                                            <input type="hidden" name="competency"
                                                value="<%= competency.competency %>" />
                                            <input type="hidden" name="level" value="<%= competency.level %>" />
                                            <button type="submit" class="btn btn-success">Add Role</button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                    <% }); %>

        </section>

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

</html>