@extends('layouts.app2')

@section('dynamic_css')
<style>

	@media (max-width: 768px)
	{
        .container_layout {
            padding-top: 0px;
            padding-bottom: 10px;
        }
	}
</style>
@endsection

@section('content')
<div class="container">    
    <div class="row container_layout card_hover"> 
            <div class="col-md-12 mobile_view">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('adminhome')}}">
                                    <i class="material-icons">home</i>
                                </a>
                            </li>
                            <li class="breadcrumb-item active"><a href="{{ route('usermanagement') }}">User Management</a></li>
                        </ol>
                    </nav>
            </div>
             @can('view_users')
                <div class="col-md-3 card_row">
                     <a href="{{ route('employeeusers.display') }}" style="    text-decoration: none;">
                            <div class="card animated zoomIn">
                                <div class="card-body" style="padding:35px;"> 
                                    <div class="text-center" style="">
                                         <img src="{{ asset('media/icons/people.svg') }}" style="width: 35%;display: block;margin: auto;" class="img img-responsive">
                                    </div>
                                    <div class="text-center" style="width: 100%;padding: 5px;margin-top: 28px;font-size: 15px;font-variant: petite-caps;">
                                        Users
                                    </div>
                                </div>
                            </div>
                     </a>
                </div>  
              @endcan
     @can('view_roles')
        <div class="col-md-3 card_row">
           <a href="{{ route('roles.index') }}">
            <div class="card animated zoomIn">
                <div class="card-body" style="padding:35px;">
                   
                        <div class="text-center" style="">
                             <img src="{{ asset('media/icons/networking.svg') }}" style="width: 35%;display: block;margin: auto;" class="img img-responsive">
                        </div>
                        <div class="text-center" style="width: 100%;padding: 5px;margin-top: 28px;font-size: 15px;font-variant: petite-caps;">
                              Roles & Permission
                     </div>                    
                </div>
            </div>
          </a>
        </div>
    @endcan 
    @can('view_permissions')   
        <div class="col-md-3 card_row">
          <a href="{{ route('permissions.index') }}">
            <div class="card animated zoomIn">
                <div class="card-body" style="padding:35px;">
                   
                        <div class="text-center" style="">
                             <img src="{{ asset('media/icons/padlock.svg') }}" style="width: 35%;display: block;margin: auto;" class="img img-responsive">
                        </div>
                        <div class="text-center" style="width: 100%;padding: 5px;margin-top: 28px;font-size: 15px;font-variant: petite-caps;">
                           Permissions
                        </div>
                    
                </div>
            </div>
          </a>
        </div>
     @endcan    
        
        <div class="col-md-3 card_row">
          <a href="#">
            <div class="card animated zoomIn">
                <div class="card-body" style="padding:35px;">
                   
                        <div class="text-center" style="">
                             <img src="{{ asset('media/icons/user.svg') }}" style="width: 35%;display: block;margin: auto;" class="img img-responsive">
                        </div>
                        <div class="text-center" style="width: 100%;padding: 5px;margin-top: 28px;font-size: 15px;font-variant: petite-caps;">
                           Nothing
                        </div>
                    
                </div>
            </div>
          </a>
        </div>
     </div>
</div>
@endsection