<!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">Add Competency</h1>
                        <p class="lead">
                            Add the details for the new Competency! Once added you'll be able to edit it to add roles.
                        </p>
                    </div>
                    <div class="p-4 d-flex justify-content-center">
                        <div class="card col-md-6">
                            <form action="/competencies/add" method="POST">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="competency">Competency</label>
                                        <input type="text" class="form-control" id="competency" name="competency"
                                            placeholder="Enter Competency" />
                                    </div>
                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea class="form-control" id="description" name="description"
                                            placeholder="Enter Description" rows="3"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="level">Level</label>
                                        <input type="text" class="form-control" id="level" name="level"
                                            placeholder="Enter Level" />
                                    </div>
                                    <div class="form-group">
                                        <label for="indicator">Indicator</label>
                                        <textarea class="form-control" id="indicator" name="indicator"
                                            placeholder="Enter Indicator" rows="4"></textarea>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button type="submit" class="w-100 btn btn-lg btn-success">Add</button>
                            </form>
                        </div>
                    </div>
                </div>
        </section>
        <%- include('common/footer') -%>
</body>

</html>