@model AddOrderNoteModel
<b-modal id="ModalAddOrderNote" ref="ModalAddOrderNote" :dark-theme="darkMode" size="xl" centered hide-footer hide-header>
    <a class="modal-close" @@click="$bvModal.hide('ModalAddOrderNote')"><b-icon icon="x"></b-icon></a>
    <h1 class="generalTitle h2 text-center">@Loc["Order.AddOrdernote"]</h1>
    <validation-observer v-slot="{ handleSubmit }">
        <form asp-route="AddOrderNote"  asp-route-OrderId="@Model.OrderId" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
            <input asp-for="OrderId" type="hidden" />
            <div asp-validation-summary="ModelOnly" class="message-error alert alert-info my-3"></div>
            <fieldset>
                <div class="form-fields">
                    <div class="form-group">
                        <validation-provider tag="div" rules="required" name="Note" v-slot="{ errors, classes }">
                            <label asp-for="Note" class="col-form-label">@Loc["OrderNote.Fields.Title"]:</label>
                            <textarea asp-for="Note" v-model="ordernote.Note" v-bind:class="[classes , 'form-control']" autofocus="autofocus" rows="4"></textarea>
                            <span class="field-validation-error">{{ errors[0] }}</span>
                        </validation-provider>
                    </div>
                </div>
            </fieldset>
            <div class="buttons text-left my-3">
                <input type="submit" class="btn btn-info write-product-review-button" value="@Loc[" OrderNote.SubmitButton"]" />
            </div>
        </form>
    </validation-observer>
</b-modal>
<script asp-location="Footer" asp-order="300">
    var ordernote = new Vue({
        data: () => ({
            @{
                <text>
                    Note: '',
                </text>
            }
        })
    });
</script>