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

        <!-- Display Name (EN) -->
        <div class="col-sm-6 col-md-6">
            <div class="form-group mb-3">
                <label class="form-label" for="display_name_en">
                    <%= trans.cruds.SETTING.fields.title %> (EN) <span class="text-danger">*</span>
                </label>
                <input class="form-control" type="text" id="display_name_en" name="display_name_en"
                       value="<%= setting.display_name?.en || '' %>"
                       placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.SETTING.fields.title + ' (EN)' %>">
            </div>
        </div>

        <!-- Display Name (AR) -->
        <div class="col-sm-6 col-md-6">
            <div class="form-group mb-3">
                <label class="form-label" for="display_name_ar">
                    <%= trans.cruds.SETTING.fields.title %> (AR)
                </label>
                <input class="form-control" type="text" id="display_name_ar" name="display_name_ar"
                       value="<%= setting.display_name?.ar || '' %>"
                       placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.SETTING.fields.title + ' (AR)' %>">
            </div>
        </div>

        <input type="hidden" id="setting_type" value="<%= setting.type %>">

        <!-- TYPE SWITCH -->
        <% if (setting.type === 'string') { %>

            <!-- STRING VALUE EN -->
            <div class="col-sm-6 col-md-6">
                <div class="form-group mb-3">
                    <label class="form-label" for="value_en">
                        <%= trans.cruds.SETTING.fields.value %> (EN) <span class="text-danger">*</span>
                    </label>
                    <input class="form-control" type="text" id="value_en" name="value_en"
                           value="<%= setting.value?.en || '' %>"
                           placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.SETTING.fields.value + ' (EN)' %>">
                </div>
            </div>

            <!-- STRING VALUE AR -->
            <div class="col-sm-6 col-md-6">
                <div class="form-group mb-3">
                    <label class="form-label" for="value_ar">
                        <%= trans.cruds.SETTING.fields.value %> (AR)
                    </label>
                    <input class="form-control" type="text" id="value_ar" name="value_ar"
                           value="<%= setting.value?.ar || '' %>"
                           placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.SETTING.fields.value + ' (AR)' %>">
                </div>
            </div>

        <% } else if (setting.type === 'text') { %>

            <!-- TEXT EDITOR EN -->
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label class="form-label" for="value_en">
                        <%= trans.cruds.SETTING.fields.content %> (EN) <span class="text-danger">*</span>
                    </label>
                    <div class="input-group">
                        <div class="description_editor_en" id="value_en"><%- setting.value?.en || '' %></div>
                    </div>
                    <span class="error_editor_column_en text-danger d-none"><%= trans.global.enter_your_some_content %></span>
                </div>
            </div>

            <!-- TEXT EDITOR AR -->
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label class="form-label" for="value_ar">
                        <%= trans.cruds.SETTING.fields.content %> (AR)
                    </label>
                    <div class="input-group">
                        <div class="description_editor_ar" id="value_ar"><%- setting.value?.ar || '' %></div>
                    </div>
                    <span class="error_editor_column_ar text-danger d-none"><%= trans.global.enter_your_some_content %></span>
                </div>
            </div>

        <% } else if (setting.type === 'image') { %>

            <!-- IMAGE UPLOAD -->
            <div class="col-sm-6 col-md-6">
                <div class="d-flex gap-3 mb-3 align-items-end">
                    <div class="flex-grow-1">
                        <div class="form-group">
                            <label class="form-label" for="formFile">
                                <%= trans.global.choose_file %> <span class="text-danger">*</span>
                            </label>
                            <input class="form-control" id="formFile" type="file" name="value"
                                   accept=".jpeg,.jpg,.png,.gif"
                                   onchange="document.getElementById('imagePreview').src = window.URL.createObjectURL(this.files[0])">
                        </div>
                    </div>

                    <img class="img-40" id="imagePreview" alt=""
                         src="<%= (setting && setting.uploads.length > 0 && setting.uploads[0].file_path)
                                ? '/' + setting.uploads[0].file_path
                                : '/backend/images/dummy-image.jpg' %>">
                </div>
            </div>

        <% } else if (setting.type === 'number') { %>

            <!-- NUMBER EN -->
            <div class="col-sm-6 col-md-6">
                <div class="form-group mb-3">
                    <label class="form-label" for="value_en">
                        <%= trans.cruds.SETTING.fields.value %> (EN) <span class="text-danger">*</span>
                    </label>
                    <input class="form-control" type="number" id="value_en" name="value_en"
                           value="<%= setting.value?.en || '0' %>"
                           placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.SETTING.fields.value + ' (EN)' %>">
                </div>
            </div>

            <!-- NUMBER AR -->
            <div class="col-sm-6 col-md-6">
                <div class="form-group mb-3">
                    <label class="form-label" for="value_ar">
                        <%= trans.cruds.SETTING.fields.value %> (AR)
                    </label>
                    <input class="form-control" type="number" id="value_ar" name="value_ar"
                           value="<%= setting.value?.ar || '0' %>"
                           placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.SETTING.fields.value + ' (AR)' %>">
                </div>
            </div>

        <% } else if (setting.type === 'boolean') { %>

            <!-- BOOLEAN EN -->
            <div class="col-sm-6 col-md-6">
                <div class="form-group mb-3">
                    <label class="form-label" for="value_en">
                        <%= trans.cruds.SETTING.fields.value %> (EN) <span class="text-danger">*</span>
                    </label>
                    <select class="form-control" id="value_en" name="value_en">
                        <option value="true" <%= setting.value?.en === 'true' ? 'selected' : '' %>>True</option>
                        <option value="false" <%= setting.value?.en === 'false' ? 'selected' : '' %>>False</option>
                    </select>
                </div>
            </div>

            <!-- BOOLEAN AR -->
            <div class="col-sm-6 col-md-6">
                <div class="form-group mb-3">
                    <label class="form-label" for="value_ar">
                        <%= trans.cruds.SETTING.fields.value %> (AR)
                    </label>
                    <select class="form-control" id="value_ar" name="value_ar">
                        <option value="true" <%= setting.value?.ar === 'true' ? 'selected' : '' %>>True</option>
                        <option value="false" <%= setting.value?.ar === 'false' ? 'selected' : '' %>>False</option>
                    </select>
                </div>
            </div>

        <% } %>

    </div>
</div>