@page
@model IndexModel
@{
    ViewData["Title"] = "Vacancy Submitter";
}

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h6>Start Here</h6>
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="posting_id">Vacancy ID: </label>
                        <input asp-for="Posting_ID" type="text" id="posting_id" class="form-control" />
                        <small id="postingHelp" class="form-text text-muted">You can get this from the URL or from
                            the vacancy review. This is NOT the Box #.</small>
                    </div>
                    <div class="form-group">
                        <h6>Skills for Cover Letter</h6>
                        @for (int i = 0; i < Model.userData.skillOptions.Count(); i++)
                        {
                            <div class="form-check">
                                <input type="checkbox" id="skill_@i" name="skill_@i" class="form-check-input">
                                <label for="skill_@i">@Model.userData.skillOptions[i]</label><br>
                            </div>
                        }
                        <label for="new_skill">New Skill: </label>
                        <input type="text" id="new_skill" class="form-control" />
                    </div>
                    <br />
                    <button type="submit" class="btn btn-primary">Generate Application</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h6>Preview</h6>
            </div>
            <div class="card-body">
                <p>Cover Letter</p>
                <textarea style="width: 100%"
                    name="cover_letter">Nothing yet, this is where the Cover Letter would go!</textarea>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-secondary">Submit</button> <button type="submit"
                    class="btn btn-secondary">Download</button>
            </div>
        </div>

    </div>
</div>