<title> <%= i18n.__('viewArea') %> </title>

<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.__('view') %> </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  method="POST"  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 type="text" name="[<%= lang%>]" class="form-control" placeholder="<%= i18n.__("name_"+lang);%>" value="<%= area.name[lang] %>" readOnly >
                                                            <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">        
                                                        <input type="text" class="form-control" name="translateId" placeholder="<%= i18n.__('city') %>" readonly value="<%= area.translateId.name[lang] %>">
                                                    </div>
                                                </div>
                                            </div>

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

