{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content.extended')

<div class="row">
    <div class="col">
        <div class="card card-custom bg-white {{ @$class }} shadow-none">

            {{-- Header --}}
            <div class="card-header border-0 d-flex align-items-center justify-content-end">
                <div class="card-toolbar">
                    <button id="newReasonGroup" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalNewReasonGroup">+ Novo Grupo</button>
                </div>
            </div>

            {{-- Body --}}
            <div class="card-body d-flex align-items-center p-6">
                <table class="table table-striped w-100" id="kt_datatable">
                    <thead>
                    </thead>

                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@include($components_path.'.modalNewGroup')
@include($components_path.'.modalDeleteGroup')

@endsection

@section('scripts')
    <script src="{{ asset('js/pages/widgets.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/custom/gestor/reasonsGroup/index.js') }}" type="text/javascript"></script>
@endsection

<style>
    .editar_grupo {
        color: black;
        cursor: pointer;
        background: #2826261a;
        border-radius: 5px;
    }

    .deletar_grupo {
        color: #f03232;
        cursor: pointer;
        background: #e35c5c24;
        border-radius: 5px;
    }

    .sizeIcon {
        font-size: 14px;
    }
</style>