<div class="table-responsive">
    <div>
        <table class="table align-items-center table-dark">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">
                        parameters
                    </th>
                    <th scope="col">
                        Count
                    </th>
                </tr>
            </thead>
            <tbody class="list">
                {% for key, value in employeelist.items() %} 
                <tr>
                    
                    <td class="budget">
                        {{key}}
                    </td>
                    {% if key == "Blocked Users" %}
                    {% if blkLength == 0 %}
                    <td class="status">
                        <span>
                            <i class="bg-warning"></i>No Users
                        </span>
                    </td>
                    {% else %}
                    <td class="status">
                        <span a data-id="{{cloudNe}}" class="blockUsers" style="cursor: pointer;">
                            <u><i style="color: green;"></i>{{blkLength | add_comma}}</u>
                        </span>
                    </td>
                    {% endif %}
                    {% elif key == "SoftBlock Users" %}
                    {% if softLen == 0 %}
                    <td class="status">
                        <span>
                            <i class="bg-warning"></i>No Users
                        </span>
                    </td>
                    {% else %}
                    <td class="status">
                        <span a data-id="{{cloudNe}}" class="SoftUsers" style="cursor: pointer;">
                            <u><i style="color: green;"></i>{{softLen | add_comma}}</u>
                        </span>
                    </td>
                    {% endif %}
                    
                    {% elif key == "Deleted Users" %}
                    {% if Del_len == 0 %}
                    <td class="status">
                        <span>
                            <i class="bg-warning"></i>No Users
                        </span>
                    </td>
                    {% else %}
                    <td class="status">
                        <span a data-id="{{cloudNe}}" class="DelUsers" style="cursor: pointer;">
                            <u><i style="color: green;"></i>{{Del_len | add_comma}}</u>
                        </span>
                    </td>
                    {% endif %}
                    
                    
                    {% else %}
                    <td class="status">
                        <span>
                            <i class="bg-warning"></i>{{value[0] | add_comma}}
                        </span>
                    </td>
                    {% endif %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>

<div class="modal fade" id="blockUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <h5 class="modal-title" id="exampleModalLabel">Black List 202 users</h5> -->
        <!-- <button class="btn btn-icon btn-3 btn-primary down202" data-id="{{client}}" type="button"> -->
          <span>Block Users</span>
          <a class="close" id="blockUserMore" aria-label="Close" style="cursor: pointer;">
            <span aria-hidden="true">&times;</span>
          </a>
      </div>
      <div class="blkUser">
        ...
      </div>
      
    </div>
  </div>
</div>

<div class="modal fade" id="SoftUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <h5 class="modal-title" id="exampleModalLabel">Black List 202 users</h5> -->
        <!-- <button class="btn btn-icon btn-3 btn-primary down202" data-id="{{client}}" type="button"> -->
          <span>Soft Block Users</span>
          <a class="close" id="SoftUserMore" aria-label="Close" style="cursor: pointer;">
            <span aria-hidden="true">&times;</span>
          </a>
      </div>
      <div class="SftUser">
        ...
      </div>
      
    </div>
  </div>
</div>


<div class="modal fade" id="deleUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <h5 class="modal-title" id="exampleModalLabel">Black List 202 users</h5> -->
        <!-- <button class="btn btn-icon btn-3 btn-primary down202" data-id="{{client}}" type="button"> -->
          <span>Deleted Users</span>
          <a class="close" id="delUserMore" aria-label="Close" style="cursor: pointer;">
            <span aria-hidden="true">&times;</span>
          </a>
      </div>
      <div class="delUser">
        ...
      </div>
      
    </div>
  </div>
</div>


<script type='text/javascript'>
    $(document).ready(function () {
        $('.blockUsers').click(function () {
            var userid = $(this).data('id');
            $.ajax({
                url: '/BlockUsers',
                type: 'post',
                data: { userid: userid },
                success: function (data) {
                    $('.blkUser').html(data);
                    $('.blkUser').append(data.htmlresponse);
                    // $('#empModal').modal('hide');
                    $('#blockUserModal').modal('show');
                }
            });
        });
        $('#blockUserMore').click(function () {
            console.log("line 83");
            $('#blockUserModal').modal('hide');
        });
    });
  </script>



<script type='text/javascript'>
    $(document).ready(function () {
        $('.SoftUsers').click(function () {
            var userid = $(this).data('id');
            $.ajax({
                url: '/SoftUsers',
                type: 'post',
                data: { userid: userid },
                success: function (data) {
                    $('.SftUser').html(data);
                    $('.SftUser').append(data.htmlresponse);
                    // $('#empModal').modal('hide');
                    $('#SoftUserModal').modal('show');
                }
            });
        });
        $('#SoftUserMore').click(function () {
            console.log("line 83");
            $('#SoftUserModal').modal('hide');
        });
    });
  </script>


<script type='text/javascript'>
    $(document).ready(function () {
        $('.DelUsers').click(function () {
            var userid = $(this).data('id');
            $.ajax({
                url: '/DelUsers',
                type: 'post',
                data: { userid: userid },
                success: function (data) {
                    $('.delUser').html(data);
                    $('.delUser').append(data.htmlresponse);
                    // $('#empModal').modal('hide');
                    $('#deleUserModal').modal('show');
                }
            });
        });
        $('#delUserMore').click(function () {
            console.log("line 83");
            $('#deleUserModal').modal('hide');
        });
    });
  </script>
