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

<div class="row">
    <div class="col-md-3">
        <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-6">
        <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>
    @if (Model.posting != null)
    {
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h6>Posting Info</h6>
                </div>
                <div class="card-body">
                    <p>Title: @Model.posting.Title</p>
                    <p>Grade @Model.posting.SalaryGrade</p>
                    <p>Agency: @Model.posting.Agency</p>
                    <p>Union: @Model.posting.BargainingUnit</p>
                    <p>Contact Name: @Model.posting.ContactName</p>
                    <p>Contact Email: <a href="mailto:@Model.posting.ContactEmailAddress?subject=Box # @Model.posting.BoxNumber Vacancy ID @Model.posting.VacancyID">@Model.posting.ContactEmailAddress</a> </p>
                </div>
            </div>
        </div>
    }
</div>