@model IList<Grand.Web.Models.Customer.CustomerAttributeModel>
@using Grand.Domain.Catalog;
@foreach (var attribute in Model)
{
    string controlId = string.Format("customer_attribute_{0}", attribute.Id);
    string textPrompt = attribute.Name;
    string required = attribute.IsRequired ? "required" : "";
    string readonlyAttr = attribute.IsReadOnly ? "disabled=\"disabled\"" : "";

    <div class="row">
        <div class="col-12 form-group custom-attributes">
            <label class="col-form-label" for="@(controlId)">@textPrompt:</label>
            @if (attribute.IsRequired)
            {
                <span class="required">*</span>
            }
            @switch (attribute.AttributeControlType)
            {
                case AttributeControlType.DropdownList:
                    {

                        <validation-provider @if (attribute.IsRequired) { <text> rules="required" </text> } name="@(controlId)" v-slot="{ errors, classes }">
                            <select v-model="customer.@(controlId)" data-val-required="@(string.Format(Loc["Fields.IsRequired"], textPrompt))" v-bind:class="[classes , 'custom-select form-control']" name="@(controlId)" id="@(controlId)">
                                @if (!attribute.IsRequired)
                                {
                                    <option value="">---</option>
                                }
                                @foreach (var attributeValue in attribute.Values)
                                {
                                    @if (attributeValue.IsPreSelected)
                                    {
                                        <option selected value="@attributeValue.Id">@attributeValue.Name</option>
                                    }
                                    else
                                    {
                                        <option value="@attributeValue.Id">@attributeValue.Name</option>
                                    }
                                }
                            </select>
                            <span class="field-validation-error">{{ errors[0] }}</span>
                        </validation-provider>
                    }
                    break;
                case AttributeControlType.RadioList:
                    {
                        <ul class="option-list mb-0 px-0">
                            <validation-provider tag="li"
                                                 v-slot="{ errors, classes }"
                                                 @if (attribute.IsRequired) { <text>
                                                 rules="required|exact_length:1,@(string.Format(Loc["Fields.IsRequired"], textPrompt))"
                                                 </text> }>
                                <div class="checks">
                                    @foreach (var attributeValue in attribute.Values)
                                    {
                                        <label class="custom-control custom-radio">
                                            <input class="custom-control-input" type="radio" id="@(controlId)_@(attributeValue.Id)" name="@(controlId)" value="@(attributeValue.Id)" v-model="customer.@(controlId)" @if (attributeValue.IsPreSelected) { <text> data-checked="true" </text> }>
                                            <span class="custom-control-label"></span>
                                            <span class="custom-control-description">@attributeValue.Name</span>
                                        </label>
                                    }
                                    <span class="field-validation-error d-flex w-100" v-if="errors[0]">{{ errors[0] }}</span>
                                </div>
                            </validation-provider>
                        </ul>
                    }
                    break;
                case AttributeControlType.Checkboxes:
                case AttributeControlType.ReadonlyCheckboxes:
                    {
                        <ul class="option-list px-0 mb-0">
                            <validation-provider tag="li"
                                                 v-slot="{ errors, classes }"
                                                 @if (attribute.IsRequired) { <text>
                                                 rules="required|exact_length:1,@(string.Format(Loc["Fields.IsRequired"], textPrompt))"
                                                 </text> }>
                                <div class="checks">
                                    @foreach (var attributeValue in attribute.Values)
                                    {
                                        <label class="custom-control custom-checkbox">
                                            <input class="custom-control-input" type="checkbox" id="@(controlId)_@(attributeValue.Id)" name="@(controlId)" value="@(attributeValue.Id)" v-model="customer.@(controlId)" @(attribute.AttributeControlType == AttributeControlType.ReadonlyCheckboxes ? Html.Raw(" disabled=\"disabled\"") : null)>
                                            <span class="custom-control-label"></span>
                                            <span class="custom-control-description">@attributeValue.Name</span>
                                        </label>
                                    }
                                    <span class="field-validation-error d-flex w-100" v-if="errors[0]">{{ errors[0] }}</span>
                                </div>
                            </validation-provider>
                        </ul>
                    }
                    break;
                case AttributeControlType.TextBox:
                    {
                        <validation-provider @if (attribute.IsRequired) { <text> rules="required" </text> } name="@(controlId)" v-slot="{ errors, classes }">
                            <input name="@(controlId)" type="text"
                                   id="@(controlId)" v-model="customer.@(controlId)" data-val-required="@(string.Format(Loc["Fields.IsRequired"], textPrompt))" v-bind:class="[classes , 'form-control textbox']" />
                            <span class="field-validation-error">{{ errors[0] }}</span>
                        </validation-provider>
                    }
                    break;
                case AttributeControlType.MultilineTextbox:
                    {
                        <validation-provider @if (attribute.IsRequired) { <text> rules="required" </text> } name="@(controlId)" v-slot="{ errors, classes }">
                            <textarea name="@(controlId)"
                                      id="@(controlId)" v-model="customer.@(controlId)" data-val-required="@(string.Format(Loc["Fields.IsRequired"], textPrompt))" v-bind:class="[classes , 'form-control']"></textarea>
                            <span class="field-validation-error">{{ errors[0] }}</span>
                        </validation-provider>
                    }
                    break;
                case AttributeControlType.Datepicker:
                case AttributeControlType.FileUpload:
                case AttributeControlType.ColorSquares:
                case AttributeControlType.ImageSquares:
                    {
                        //not support attribute type
                    }
                    break;
            }
        </div>
    </div>
}
