<div class="card-body">
  <div class="row">
    <div class="col-12 col-md-7">
      <div class="lang-card-box">
        <div class="title-box">
          <h3>
            <%= trans.global.title %> <span class="text-danger">*</span>
          </h3>
        </div>
        <div class="lang-form-input-group">
          <div class="row w-100">
            <div class="form-group mb-3">
              <label class="form-label" for="role_title_en">
                <%= trans.global.english %>
              </label>
              <input class="form-control" type="text" id="role_title_en" name="title_en" value="<%= role?.title?.en || '' %>" placeholder="<%= trans.global.enter_your +' '+ trans.global.title %>">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-5">
      <div class="form-group mb-3">
        <label class="form-label text-center w-100" for="role_title_ar">
          <%= trans.global.arabic %>
        </label>
        <input class="form-control" type="text" id="role_title_ar" name="title_ar" value="<%= role?.title?.ar || '' %>" placeholder="<%= trans.global.enter_your +' '+ trans.global.title %>">
      </div>
    </div>
  </div>

  <!-- permissions -->

  <div class="row">
    <div class="col-12 col-md-12">
      <div class="lang-card-box box-wrapper-space">
        <div class="title-box">
          <h3>
            <%= trans.cruds.ROLE.fields.permissions %> <span class="text-danger">*</span>
          </h3>
        </div>
        <div class="lang-form-input-group">
          <div class="row w-100">
            <div class="form-group">
              <select class="select2 form-control" name="permissions[]" id="permissions" multiple="multiple">
                <% for (const module in groupedPermissions) { %>
                  <optgroup label="<%= module %>">
                    <% groupedPermissions[module].forEach(permission => { %>
                      <option value="<%= permission._id %>"
                        <%= assignedPermissions.includes(permission._id.toString()) ? 'selected' : '' %>>
                        <%= permission.title %>
                      </option>
                    <% }) %>
                  </optgroup>
                <% } %>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>
</div>
