<title>
    <%= i18n.__('editArea') %>
</title>
<link rel="stylesheet" type="text/css" href="/admin/app-assets/css/plugins/forms/validation/form-validation.css">

<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">

        <!--content wrapper -->
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0"></h2>
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/dashboard/areas">
                                        <%= i18n.__('areas') %>
                                    </a></li>
                                <li class="breadcrumb-item active">
                                    <%= i18n.__('common.edit') %>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--end of content wrapper -->
        <!-- // Basic multiple Column Form section start -->
        <section id="multiple-column-form">
            <div class="row match-height">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">
                                <%= area.name[lang] %>
                            </h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                <form id="editArea" method="POST" action="/dashboard/areas/editArea/<%=area._id%>"
                                    class="store form-horizontal" novalidate>
                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                    <div class="form-body">
                                        <div class="row">
                                            <% languages.forEach((lang)=>{%>
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">
                                                        <label for="first-name-column">
                                                            <%= i18n.__("name_"+lang);%>
                                                        </label>
                                                        <div class="controls">
                                                            <input oninput="validateInput(this)" type="text"
                                                                name="[<%= lang%>]" class="form-control"
                                                                placeholder="<%= i18n.__(" name_"+lang);%>" value="<%=
                                                                area.name[lang] %>" required >
                                                                <div class="invalid-feedback">
                                                                    * <%= i18n.__("require");%>
                                                                        <%= i18n.__("name_"+lang);%>
                                                                </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <%})%>

                                                    <div class="col-md-6 col-12">
                                                        <div class="form-group">
                                                            <label for="first-name-column">
                                                                <%= i18n.__('city') %>
                                                            </label>
                                                            <div class="controls">
                                                                <select name="translateId" id="menu_idInput"
                                                                    class="form-control js-example-basic-multiple"
                                                                    required>
                                                                    <option value>
                                                                        <%= i18n.__('city') %>
                                                                    </option>
                                                                    <% cities.map((item)=>{%>
                                                                        <option value="<%= item.id %>"
                                                                            <%=area.translateId.id.toString()===item.id.toString()
                                                                            ? "selected" : "" %>>
                                                                            <%= item.name[lang] %>
                                                                        </option>
                                                                        <%})%>
                                                                </select>
                                                                <div class="invalid-feedback">
                                                                    <%= i18n.__('pleaseEnterCity') %>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 d-flex justify-content-center mt-3">
                                                        <button type="submit"
                                                            class="btn btn-primary mr-1 mb-1 submit_button">
                                                            <%= i18n.__('common.edit') %>
                                                        </button>
                                                        <a href="/dashboard/areas" type="reset"
                                                            class="btn btn-outline-warning mr-1 mb-1">
                                                            <%= i18n.__('common.referer') %>
                                                        </a>
                                                    </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- // Basic Floating Label Form section end -->
    </div>
</div>

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