{{-- Subheader V1 --}}

<div class="py-5 pt-6 mb-4 subheader" id="kt_subheader">
    <div
        class="{{ Metronic::printClasses('subheader-container', false) }} d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">

        {{-- Info --}}
        <div class="flex-wrap mr-1 row d-flex align-items-center w-100">

            {{-- Page Title --}}
            <div class="col-auto">
                <h5 class="my-2 mr-5 font-weight-bold" style="color: #001737;font-size: 19px;">
                    {{ @$page_title }}

                    <small class="ml-15 font-weight-normal"
                        style="font-size: 13px;text-shadow: 0 0 black;vertical-align: text-top;">{{ env('APP_DESCRIPTION') }}</small>
                </h5>
            </div>

            @if (Route::currentRouteName() == 'supervisor.index')

                <div class="col">
                    <div class="text-center btn-container">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-light-primary btn-view active"
                                onClick="changeView('table')"><i
                                    class="mb-1 fas fa-align-right fa-sm"></i>&nbsp;Tabelas</button>

                            <button type="button" class="btn btn-light-primary btn-view"
                                onClick="changeView('chart')"><i
                                    class="mb-1 fas fa-chart-area fa-sm"></i>&nbsp;Gráficos</button>
                        </div>
                    </div>
                </div>

                {{-- Toolbar --}}
                <div class="col-1">
                    <div class="d-flex align-items-center">

                        <select class="form-control selectpicker" data-style="btn-light-danger" id="queueActive">
                            @foreach ($queues as $key => $queue)
                                <option value="{{ $queue->name }}" data-queueId="{{ $queue->id }}">
                                    {{ $queue->name }}</option>
                            @endforeach
                        </select>

                    </div>

                    <style>
                        button[data-id='queueActive'] {
                            min-width: 100px;
                        }

                        .dropdown-menu.show {
                            left: unset !important;
                            right: 0px !important;
                        }
                    </style>
                </div>
            @else
                <div class="flex mx-5 col w-100" id="queue-list" style="overflow: hidden;height: 36px;">
                    <div id="carousel-queues" class="row h-100 sliding-animation align-content-start">

                        <!-- Rendered on AJAX::headerDashAgent -->

                    </div>
                </div>

                <style>
                    #queue-list::before,
                    #queue-list::after {
                        background: linear-gradient(to right, #EEF0F8 0%, rgba(255, 255, 255, 0) 50%);
                        content: "";
                        height: 100px;
                        position: absolute;
                        width: 200px;
                        z-index: 2;
                        pointer-events: none;
                    }

                    #queue-list::after {
                        right: 0;
                        top: 0;
                        transform: rotateZ(180deg);
                    }

                    #queue-list::before {
                        left: 0;
                        top: 0;
                    }

                    .inner-item {
                        height: 36px;
                        background-color: white;
                    }

                    .queue-item {
                        /* transition: ease 100ms transform; */
                        cursor: default;
                    }

                    .overlay {
                        z-index: 1;
                        padding: 0;
                        border: none;
                        background: rgba(68, 68, 68, 0.5);
                    }

                    #carousel-queues {
                        width: max-content;
                    }
                </style>

            @endif

        </div>

    </div>
</div>