{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}
<!-- 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext');

.dropdown.bootstrap-select {
    width: 100% !IMPORTANT;
    background: transparent !important;
    border: 1px solid #dbdbdb !important;
    padding: 3px;
    margin-bottom: 20px;
}
button.btn.dropdown-toggle {
    background: transparent !IMPORTANT;
}
</style>
         <!--Content body start-->
          <title>Beni | Add Role</title>
         <div class="content-body">
            <div class="container-fluid">
                <div class="row page-titles  mx-0">
                    <div class="col">
                        <h2 class="fs-32 mb-0">Add Role</h2>
                    </div>
                </div>
             
                <div class="row add-maincats mt-4">
                    <div class="col-lg-12 col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                <form method="POST" action='add-role-admin' class="form-catAdd" id="add_role" enctype="multipart/form-data">                           
                                  {% csrf_token %}
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                                <label>Role</label>
                                            </div>
                                            <div class="col-12 col-md-10 ps-col position-relative">
                                                <input type="text" name="role_name" id="role_name"  placeholder="Enter Title">                                                  
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                                <label>Permissions</label>
                                            </div>
                                            <div class="col-12 col-md-10 ps-col position-relative">
                                               <!-- <div class="multiSelect">
                                                <select multiple class="multiSelect_field" data-placeholder="Select Permissions" name="permission_data">
                                                {% for permission in permission_obj %}
                                                  <option value="{{permission.id}}">{{ permission.name }}</option>
                                                  {% endfor %}
                                                </select>
                                              </div>
                                              
                                              
                                              
                                              <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                                <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="iconX">
                                                  <g stroke-linecap="round" stroke-linejoin="round">
                                                      <line x1="18" y1="6" x2="6" y2="18"></line>
                                                      <line x1="6" y1="6" x2="18" y2="18"></line>
                                                  </g>
                                                </symbol>
                                              </svg>
                                            </div> -->
                                            <select class="selectpicker" multiple data-live-search="true" name="permission_data">
                                                {% for permission in permission_obj %}
                                                <option value="{{permission.id}}">{{ permission.name }}</option>
                                                {% endfor %}
                                              </select>
                                            <label id="permission_data-error" class="error" for="permission_data" style="margin-top: -16px;"></label>

                                        </div>
                                    </div>   
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                                <label></label>
                                            </div>
                                            <div class="col-12 col-md-10 ps-col position-relative">
                                                <div class="d-flex align-items-center justify-content-center">
                                                    <button class="btn btn-primary">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>  
                                    
                                </form>
                            </div>
                        </div>
        
        
                    </div>
                </div>
            </div>
        </div>
         <!--Content body end-->
         {% comment %} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> {% endcomment %}

         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
         <script>
            $('select').selectpicker();
         </script>


{% endblock %}