<title><%= title %> </title>

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

<form id="createRole" action="/dashboard/roles" method="POST">
    
    <%- include('../components/input.ejs', inputAttrs = {
        type: "hidden",
        name:"_csrf",
        value:csrfToken,
        classes: "",
        ids:""
      }) %>    
    <div>
        
            <div class="container mt-2">
                <div style="display: flex; flex-direction: row-reverse; align-items: center">
                    <p class="selectP"><%= i18n.__("checkAll");%></p>
                    <label class="container-checkbox p-0 m-0">

                        <%- include('../components/input.ejs', inputAttrs = {
                            type: "checkbox",
                            classes: ["checkSingle"],
                            ids:["checkedAll"]
                          }) %>

                        <span class="checkmark"></span>
                    </label>
                </div>
            </div>
            <div class="row">
                <% languages.forEach((item)=>{%>
                   
                                <%- include('../components/input.ejs', inputAttrs = {
                                    type: "text",
                                    name:`name[${item.value}]`,
                                    Placeholder:i18n.__("name_"+item.value),
                                    label:i18n.__("name_"+item.value),
                                    invalidMsg: i18n.__("name_"+item.value),
                                    required:true,
                                    classes: ["form-control"],
                                    ids:"",
                                    oninput: "validateInput(this)"
                                  }) %>

                              
                <%})%>
            </div>
            <div class="row mt-5">
                <% permissions.parent.forEach((parentModule, index) => { %>
                    <div class="col-md-4 mt-2">
                      <div class="card permissionCard package shadow">
                        <div class="role-title text-white" style="display: flex; justify-content: space-between;">
                          <div style="display: flex; flex-direction: row; align-items: center; gap: 4px">
                            <label class="container-checkbox p-0 m-0">
                              <%- include('../components/input.ejs', inputAttrs = {
                                  type: "checkbox",
                                  name:"permission",
                                  value:parentModule,
                                  classes: ["checkSingle", "roles-parent"],
                                  ids: ["gtx_"+index]
                                }) %>
                              <span class="checkmark"></span>
                            </label>
                            <p class="text-white m-0"><%= i18n.__(parentModule) %></p>
                          </div>
                          <div style="display: flex; flex-direction: row-reverse; align-items: center; gap: 4px">
                            <p class="text-white m-0"><%= i18n.__("checkAll"); %></p>
                            <label class="container-checkbox p-0 m-0">
                              <%- include('../components/input.ejs', inputAttrs = {
                                  type: "checkbox",
                                  "data-parent": "gtx_"+index,
                                  classes: ["checkSingle", "checkChilds", "checkChilds_gtx_"+index],
                                  ids: ""
                                }) %>
                              <span class="checkmark"></span>
                            </label>
                          </div>
                        </div>
                  
                        <ul class="list-unstyled">
                            <% permissions.forEach((permission) => { %>
                              <% if (permission.module === parentModule) { %>
                                <li style="margin-right: 10px;">
                                  <div class="form-group clearfix d-flex align-items-center">
                                    <label class="container-checkbox p-0 m-1">
                                      <%- include('../components/input.ejs', inputAttrs = {
                                          type: "checkbox",
                                          name: "permissions",
                                          value: permission._id,
                                          "data-parent": "gtx_"+index,
                                          classes: ["checkSingle", "childs", "gtx_"+index],
                                          ids: [permission.action + index]
                                        }) %>
                                      <span class="checkmark"></span>
                                    </label>
                                    <label class="title_label" for="<%= permission.action + index %>"> 
                                      <%= i18n.__(permission.action) %>
                                    </label>
                                  </div>
                          
                                  <% if (permission.conditions) { %>
                                    <div class="conditions mt-2 ml-4">
                                      <% Object.keys(permission.conditions).forEach((conditionType) => { %>
                                        <strong><%= i18n.__(conditionType) %>:</strong>
                                        <% permission?.conditions[conditionType]?.forEach((conditionValue) => { %>
                                          <div class="form-group clearfix d-flex align-items-center">
                                            <label class="container-checkbox p-0 m-1">
                                              <input type="checkbox" 
                                                     name="conditions[<%= permission._id %>][<%= conditionType %>][]"
                                                     value="<%= conditionValue %>" 
                                                     class="condition-checkbox" 
                                                     data-permission="<%= permission._id %>" 
                                                     data-condition="<%= conditionType %>">
                                              <span class="checkmark"></span>
                                            </label>
                                            <label class="ml-1"><%= i18n.__(conditionValue) %></label>
                                          </div>
                                        <% }) %>
                                      <% }) %>
                                    </div>
                                  <% } %>
                                </li>
                              <% } %>
                            <% }) %>
                          </ul>
                          
                      </div>
                    </div>
                  <% }) %>
                  
           
                <div class="col-sm-12">
                    <button type="submit" class="btn btn-primary mr-1 mb-1 submit_button"><%=i18n.__('common.add');%></button>
                </div>
            </div>

</form>
</div>
<!-- END: Content-->

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