<!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">Roles</h1>
                        <p class="lead">
                            Explore the current Career Roles and the competencies required to reach them. If there are
                            any missing add them!
                        </p>
                        <p class="lead">
                            <button class="btn btn-primary" type="button" data-bs-toggle="collapse"
                                data-bs-target="#addRole" aria-expanded="false" aria-controls="collapseExample">
                                Add Role
                            </button>
                        </p>
                    </div>

                    <div class="collapse" id="addRole">
                        <div class="d-flex justify-content-center pb-4">
                            <div class="card col-md-6">
                                <form action="/roles/add" method="POST">
                                    <div class="card-body">
                                        <p>Add a new Role. Link competencies to it by editing the competencies on the
                                            competency page or adding new ones.</p>
                                        <div class="form-group">
                                            <label for="career">Career</label>
                                            <input type="text" class="form-control" id="career" name="career"
                                                placeholder="Enter Career" />
                                        </div>
                                        <div class="form-group">
                                            <label for="role">Role</label>
                                            <input type="text" class="form-control" id="role" name="role"
                                                placeholder="Enter Role" />
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <button type="submit" class="w-100 btn btn-lg btn-success">Add</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="row row-cols-1 row-cols-md-4 g-4">
                        <% roles.forEach(role=> {

                            %>
                            <div class="col-md-4">
                                <div class="card mb-4 rounded-3 shadow-sm">
                                    <div class="card-header py-3">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <h4>
                                                    <%= role._id %>
                                                </h4>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="d-grid">
                                                    <a role="button" class="btn btn-danger"
                                                        href="/roles/deleteLevel/<%= role._id %>">
                                                        Delete
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <%= role.role %>
                                        </h5>
                                        <p class="card-text">
                                            <% role.competencies.forEach(competency=> {

                                                %>
                                                <div class="row">
                                                    <div class="col-md-6">

                                                        <%= competency.competency %>

                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="progress">
                                                            <% if (competency.level=='Entry' ) { %>
                                                                <div class="progress-bar" role="progressbar"
                                                                    style="width: 25%;" aria-valuenow="25"
                                                                    aria-valuemin="0" aria-valuemax="100">Entry
                                                                </div>
                                                                <% } %>
                                                                    <% if (competency.level=='Intermediate' ) { %>
                                                                        <div class="progress-bar" role="progressbar"
                                                                            style="width: 50%;" aria-valuenow="50"
                                                                            aria-valuemin="0" aria-valuemax="100">
                                                                            Intermediate
                                                                        </div>
                                                                        <% } %>
                                                                            <% if (competency.level=='Advanced' ) { %>
                                                                                <div class="progress-bar"
                                                                                    role="progressbar"
                                                                                    style="width: 75%;"
                                                                                    aria-valuenow="75" aria-valuemin="0"
                                                                                    aria-valuemax="100">Advanced
                                                                                </div>
                                                                                <% } %>
                                                                                    <% if (competency.level=='Expert' )
                                                                                        { %>
                                                                                        <div class="progress-bar"
                                                                                            role="progressbar"
                                                                                            style="width: 100%;"
                                                                                            aria-valuenow="100"
                                                                                            aria-valuemin="0"
                                                                                            aria-valuemax="100">
                                                                                            Expert
                                                                                        </div>
                                                                                        <% } %>
                                                        </div>
                                                    </div>

                                                </div>

                                                <% }); %>
                                        </p>
                                    </div>
                                    <div class="card-footer">
                                        <button type="button" class="w-100 btn btn-lg btn-outline-primary"
                                            data-bs-toggle="modal" data-bs-target="#<%= role._id %>">Edit</button>
                                    </div>
                                </div>
                            </div>
                            <% }); %>
                    </div>

                    <!-- Modal -->
                    <% roles.forEach(role=> {

                        %>

                        <div class="modal fade" id="<%= role._id %>" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">
                                            <%= role._id %> - <%= role.role %>
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <% role.competencies.forEach(competency=> {

                                            %>
                                            <div class="row p-2">
                                                <div class="col-md-4">

                                                    <%= competency.competency %>

                                                </div>
                                                <div class="col-md-4">
                                                    <div class="progress" style="height: 31px;">
                                                        <% if (competency.level=='Entry' ) { %>
                                                            <div class="progress-bar" role="progressbar"
                                                                style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
                                                                aria-valuemax="100">Entry
                                                            </div>
                                                            <% } %>
                                                                <% if (competency.level=='Intermediate' ) { %>
                                                                    <div class="progress-bar" role="progressbar"
                                                                        style="width: 50%;" aria-valuenow="50"
                                                                        aria-valuemin="0" aria-valuemax="100">
                                                                        Intermediate
                                                                    </div>
                                                                    <% } %>
                                                                        <% if (competency.level=='Advanced' ) { %>
                                                                            <div class="progress-bar" role="progressbar"
                                                                                style="width: 75%;" aria-valuenow="75"
                                                                                aria-valuemin="0" aria-valuemax="100">
                                                                                Advanced
                                                                            </div>
                                                                            <% } %>
                                                                                <% if (competency.level=='Expert' ) { %>
                                                                                    <div class="progress-bar"
                                                                                        role="progressbar"
                                                                                        style="width: 100%;"
                                                                                        aria-valuenow="100"
                                                                                        aria-valuemin="0"
                                                                                        aria-valuemax="100">
                                                                                        Expert
                                                                                    </div>
                                                                                    <% } %>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="d-grid">
                                                                <a role="button" class="btn btn-danger btn-sm"
                                                                    href="/roles/delete/<%= competency.roleId %>">Delete</a>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="d-grid">
                                                                <a role="button" class="btn btn-primary btn-sm"
                                                                    href="/update-role/<%= competency.roleId %>">Update</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <% }); %>

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





                </div>
        </section>

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

</html>