@model ContactUsModel
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_SingleColumn";

    //title
    pagebuilder.AddTitleParts(Loc["Title.ContactUs"]);
}
<div class="page contact-page">
    <h1 class="generalTitle h2">@Loc["Title.ContactUs"]</h1>
    <div class="generalMarginSupporter text-left">
        @await Component.InvokeAsync("PageBlock", new { systemName = "ContactUs" })
        @await Component.InvokeAsync("Widget", new { widgetZone = "contactus_top" })
        @if (Model.SuccessfullySent)
        {
            <div class="alert alert-info">
                @Model.Result
            </div>
        }
        else
        {
            <validation-observer v-slot="{ handleSubmit }">
                <form asp-route="ContactUs" method="post" id="contactus-form" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
                    <div asp-validation-summary="ModelOnly" class="message-error"></div>
                    <div class="form-fields">
                        <div class="form-group">
                            <validation-provider tag="div" rules="required" name="FullName" v-slot="{ errors, classes }">
                                <label asp-for="FullName" class="col-form-label">@Loc["ContactUs.FullName"]:</label>
                                <span class="required">*</span>
                                <input asp-for="FullName" v-model="contactus.FullName" placeholder="@Loc["ContactUs.FullName.Hint"]" v-bind:class="[classes , 'form-control']" />
                                <span class="field-validation-error">{{ errors[0] }}</span>
                                <span asp-validation-for="FullName"></span>
                            </validation-provider>
                        </div>
                        <div class="form-group">
                            <validation-provider tag="div" rules="required|email" name="Email" v-slot="{ errors, classes }">
                                <label asp-for="Email" class="col-form-label">@Loc["ContactUs.Email"]:</label>
                                <span class="required">*</span>
                                <input asp-for="Email" v-model="contactus.Email" placeholder="@Loc["ContactUs.Email.Hint"]" v-bind:class="[classes , 'form-control']" />
                                <span class="field-validation-error">{{ errors[0] }}</span>
                                <span asp-validation-for="Email"></span>
                            </validation-provider>
                        </div>
                        @if (Model.SubjectEnabled)
                        {
                            <div class="form-group">
                                <validation-provider tag="div" rules="required" name="Subject" v-slot="{ errors, classes }">
                                    <label asp-for="Subject" class="col-form-label">@Loc["ContactUs.Subject"]:</label>
                                    <span class="required">*</span>
                                    <input asp-for="Subject" v-model="contactus.Subject" placeholder="@Loc["ContactUs.Subject.Hint"]" v-bind:class="[classes , 'form-control']" />
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="Subject"></span>
                                </validation-provider>
                            </div>
                        }
                        <div class="form-group">
                            <validation-provider tag="div" rules="required" name="Enquiry" v-slot="{ errors, classes }">
                                <label asp-for="Enquiry" class="col-form-label">@Loc["ContactUs.Enquiry"]:</label>
                                <span class="required">*</span>
                                <textarea asp-for="Enquiry" v-model="contactus.Enquiry" placeholder="@Loc["ContactUs.Enquiry.Hint"]" v-bind:class="[classes , 'form-control']" rows="4"></textarea>
                                <span class="field-validation-error">{{ errors[0] }}</span>
                                <span asp-validation-for="Enquiry"></span>
                            </validation-provider>
                        </div>
                    </div>
                    <partial name="Partials/ContactAttributes" model="Model.ContactAttributes" />
                    @if (Model.DisplayCaptcha)
                    {
                        <div class="captcha-box">
                            <captcha />
                        </div>
                    }
                    <div class="buttons mt-1 mb-1">
                        <input type="submit" name="send-email" class="btn btn-info contact-us-button" value="@Loc["ContactUs.Button"]" />
                    </div>
                </form>
            </validation-observer>
            <script asp-location="Footer" asp-order="300">
                var contactus = new Vue({
                    data: () => ({
                        @{
                            <text>
                                FullName: '@Html.Raw(Model.FullName)',
                                Email: '@Html.Raw(Model.Email)',
                                Subject: '@Html.Raw(Model.Subject)',
                                Enquiry: '@Html.Raw(Model.Enquiry)',
                            </text>
                        }
                    })
                });
            </script>
        }
        @await Component.InvokeAsync("Widget", new { widgetZone = "contactus_bottom" })
    </div>
</div>