@component('components.portlets', [
    'title' => 'Detalhamento Agentes',
    'initial_col' => false,
    'data_parent' => 'accordion-rel-cart',
    'id_panel_collapse' => 'collapseDetalhamentoAgentes',
    'bg' => 'bg-portlets-header',
    'open_close' => false,
])

    <div class="row m-t-20">
        <div class="col-12">
            <table class="table table-striped table-sm table-hover nowrap" id="table-detalhamento-agentes">
                <thead>
                    <tr>
                        <th class="text-center"></th>
                        <th class="text-center">Agentes Logados</th>
                        <th class="text-center">Tempo Trabalhado</th>
                        <th class="text-center">Total de Pausas</th>
                        <th class="text-center">Pausas Produtivas</th>
                        <th class="text-center">Pausas Improdutivas</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-center text-warning font-18">Previsão</td>
                        <td class="text-center">27</td>
                        <td class="text-center">15:00:00</td>
                        <td class="text-center">600:00</td>
                        <td class="text-center">400:00</td>
                        <td class="text-center">200:00</td>
                    </tr>
                    <tr>
                        <td class="text-center text-warning font-18">Real</td>
                        <td class="text-center">27</td>
                        <td class="text-center">15:00:00</td>
                        <td class="text-center">600:00</td>
                        <td class="text-center">400:00</td>
                        <td class="text-center">200:00</td>
                    </tr>
                    <tr>
                        <td class="text-center text-warning font-18">Delta</td>
                        <td class="text-center">27</td>
                        <td class="text-center">15:00:00</td>
                        <td class="text-center">600:00</td>
                        <td class="text-center">400:00</td>
                        <td class="text-center">200:00</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

@endcomponent