@local <!-- views/dashboard.blade.php --> @endlocal
<x-app-layout>
    <x-slot name="js">
        <script src="{{ asset('js/lib/jquery.min.js') }}"></script>
    </x-slot>
    <!-- Hero -->
    <x-page.hero-section pageTitle="Dashboard" breadcrumbItem="App" breadcrumbActive="Dashboard"/>
    <!-- END Hero -->
    <script src="{{ asset('js/lib/jquery.min.js') }}"></script>
    <!-- Page Content -->
    <x-page.content-section>
        <div class="d-flex justify-content-between flex-wrap connection-wrap">
            <div class="col-3 d-flex justify-content-start">
                        <span class="nav-logo">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 28" role="img" aria-hidden="true"><path fill="#14a800" d="M28.18,19.06A6.54,6.54,0,0,1,23,16c.67-5.34,2.62-7,5.2-7s4.54,2,4.54,5-2,5-4.54,5m0-13.34a7.77,7.77,0,0,0-7.9,6.08,26,26,0,0,1-1.93-5.62H12v7.9c0,2.87-1.3,5-3.85,5s-4-2.12-4-5l0-7.9H.49v7.9A8.61,8.61,0,0,0,2.6,20a7.27,7.27,0,0,0,5.54,2.35c4.41,0,7.5-3.39,7.5-8.24V8.77a25.87,25.87,0,0,0,3.66,8.05L17.34,28h3.72l1.29-7.92a11,11,0,0,0,1.36,1,8.32,8.32,0,0,0,4.14,1.28h.34A8.1,8.1,0,0,0,36.37,14a8.12,8.12,0,0,0-8.19-8.31"></path> <path fill="#14a800" d="M80.8,7.86V6.18H77.2V21.81h3.65V15.69c0-3.77.34-6.48,5.4-6.13V6c-2.36-.18-4.2.31-5.45,1.87"></path> <polygon fill="#14a800" points="55.51 6.17 52.87 17.11 50.05 6.17 45.41 6.17 42.59 17.11 39.95 6.17 36.26 6.17 40.31 21.82 44.69 21.82 47.73 10.71 50.74 21.82 55.12 21.82 59.4 6.17 55.51 6.17"></polygon> <path fill="#14a800" d="M67.42,19.07c-2.59,0-4.53-2.05-4.53-5s2-5,4.53-5S72,11,72,14s-2,5-4.54,5m0-13.35A8.1,8.1,0,0,0,59.25,14,8.18,8.18,0,1,0,75.6,14a8.11,8.11,0,0,0-8.18-8.31"></path> <path fill="#14a800" d="M91.47,14.13h.84l5.09,7.69h4.11l-5.85-8.53a7.66,7.66,0,0,0,4.74-7.11H96.77c0,3.37-2.66,4.65-5.3,4.65V0H87.82V21.82h3.64Z"></path></svg>
                        </span>
            </div>
            <div class="col-5">
                <span class="d-inline-flex justify-content-center align-items-center accounts-counter">{{$num_accounts}}</span>
                @if($num_accounts == 1)
                    <span class="d-inline-block ms-2">Account connected</span>
                @else
                    <span class="d-inline-block ms-2">Account(s) connected</span>
                @endif
            </div>
            <div class="col-4 d-flex justify-content-end">
                @if($num_accounts > 0)
                <button id="view-details" class="hidden btn btn-outline-primary" >View</button>

                <button id="hide-details" class="hidden btn btn-outline-primary" >Hide</button>
                @endif

                <livewire:connect-account />

            </div>
            <div class="w-100"></div>
            @foreach ($connections as $connection)
                <section id="account-details-wrap" class="col-12 col-md-4 offset-md-3">
                    <hr>
                    <div class="mt-3 d-flex justify-content-between align-items-center">
                        <span class="d-inline-block ms-2">{{$connection['full_name']}}</span>
                        <!--<span class="trash-wrap d-inline-flex justify-center align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
                                                <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
                                            </svg>
                                        </span>-->
                    </div>
                    <div class="w-100"></div>
                    <div class="modal fade" id="removeModal_424142682814005248" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body">
                                    Are you sure that you want to remove the {{$connection['full_name']}} account?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Yes</button>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </section>
            @endforeach
            <div class="modal fade" id="connection-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        @if(session()->has('upwork_message'))
                            <div class="modal-body">
                                {{ session()->get('upwork_message') }}
                            </div>
                        @endif
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Got it</button>
                        </div>
                    </div>
                </div>
            </div>
            @if(session()->has('upwork_message'))
                <script>
                    //let modal = new window.bootstrap.Modal(document.getElementById('connection-modal'));
                    //modal.show();
                    alert('A new account has been successfully connected')
                </script>
            @endif
        </div>
    </x-page.content-section>
    <!-- END Page Content -->
</x-app-layout>