<link rel="stylesheet" href="/admin/assets/libs/select2/select2.css" />

<section id="multiple-column-form">
    <div class="row match-height">
        <div class="col-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <form class="needs-validation" novalidate action="<%=cfg.base%>/create" method="POST"
                            id="addValue">
                            <%- include('../components/input.ejs',inputAttrs={ type:"hidden", name:"_csrf",
                                value:csrfToken, classes:"", ids:"" })%>

                            <div class="form-body">
                                <div class="row">

                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="attribute"><%= i18n.__('attributes.attribute') %></label>
                                            <select name="attribute" id="attribute" class="form-select select2" required>
                                                <option disabled selected value><%= i18n.__('attributes.chooseAttribute') %></option>
                                                <% attributes.forEach((item) => { %>
                                                    <option value="<%= item._id %>"><%= item.name?.[lang] || item.name?.ar || '' %></option>
                                                <% }) %>
                                            </select>
                                            <div class="invalid-feedback">
                                                <%= i18n.__('common.{{field}}Required',{field:i18n.__('attributes.attribute')}) %>
                                            </div>
                                        </div>
                                    </div>

                                    <%- include('../components/input.ejs',inputAttrs={ type:"text",
                                        name:"nameAr", label:i18n.__('attributes.valueNameAr'), required:true,
                                        invalidMsg:i18n.__('common.{{field}}Required',{field:i18n.__('attributes.valueNameAr')}),
                                        placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('attributes.valueNameAr')}),
                                        classes:["form-control"], ids:["name-ar"], oninput:"validateInput(this)" })%>

                                    <%- include('../components/input.ejs',inputAttrs={ type:"text",
                                        name:"nameEn", label:i18n.__('attributes.valueNameEn'),
                                        placeholder:i18n.__('common.{{field}}Placeholder',{field:i18n.__('attributes.valueNameEn')}),
                                        classes:["form-control"], ids:["name-en"] })%>

                                    <% if (cfg.hasColor) { %>
                                        <%- include('../components/input.ejs',inputAttrs={ type:"color",
                                            name:"colorCode", label:i18n.__('attributes.colorCode'), value:"#000000", required:true,
                                            classes:["form-control"], ids:["colorCode"] })%>
                                    <% } %>

                                </div>

                                <div class="col-12 d-flex justify-content-center mt-3">
                                    <button type="submit" class="btn btn-primary me-sm-3 me-1 waves-effect waves-light submit_button">
                                        <%= i18n.__('common.add') %>
                                    </button>
                                    <a class="btn btn-label-dribbble waves-effect" href="<%=referer%>">
                                        <%= i18n.__('common.referer') %>
                                    </a>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<%- include('includes.ejs') %>
