@php

$providers = [
[
'id' => 0,
'name' => 'twitter',
'connected' => true,
],
[
'id' => 1,
'name' => 'facebook',
'connected' => false,
],
[
'id' => 2,
'name' => 'steam',
'connected' => false,
],
[
'id' => 3,
'name' => 'twitch',
'connected' => false,
],
/*
[
'id' => 4,
'name' => 'stripe',
'connected' => true,
],
[
'id' => 5,
'name' => 'paypal',
'connected' => false,
],

[
'id' => 6,
'name' => 'youtube',
'connected' => true,
],
[
'id' => 7,
'name' => 'discord',
'connected' => true,
], */
];

//$account = null;
//$account = $this->accounts->where('provider', $provider['id'])->first();
@endphp

<x-action-section-custom class="">
    <x-slot name="header">
        <x-slot name="title">
            {{__('Connected Accounts')}}
        </x-slot>
        {{-- <x-slot name="description">
            {{__('Connected Accounts')}}
        </x-slot> --}}

        <x-slot name="head_actions">
            <x-button>
                {{__('create')}}
            </x-button>
        </x-slot>
    </x-slot>


    <x-slot name="content">
        <div
            class="p-4 text-sm font-medium text-green-800 border-l-4 border-green-600 rounded dark:text-green-400 bg-green-500/10 dark:bg-green-500/5 dark:border-green-700">
            {{ __('Link your social media accounts and start automating your posts today') }}
        </div>

        <div class="flex w-full mt-6">



            {{-- @foreach ($user->ownedTeams as $team) --}}

            <div class="flex w-full gap-2 p-2 ">
                @foreach ($providers as $provider)
                <x-connected-account-card :provider="$provider" />
                @endforeach
            </div>


            {{-- <x-slot name="footer">
                <x-slot name="actions">
                    <x-button wire:loading.remove wire:click="$toggle('confirmRemoveAccount')">
                        {{__('update')}}
                    </x-button>
                    <x-button wire:loading wire:loading.attr="disabled">
                        <x-fas-spinner class="w-6 h-6 animate-spin" />
                    </x-button>
                </x-slot>
                <x-slot name="footer_messages">
                    <x-action-message class="me-3" on="saved">
                        {{ __('Updated') }}
                    </x-action-message>
                </x-slot>
            </x-slot> --}}



            {{--
            <x-slot name="footer">
                <x-slot name="action">
                    <div class="flex items-center space-x-6">
                        action
                    </div>
                </x-slot>
                <x-slot name="actions">
                    <x-secondary-button wire:click="$toggle('confirmRemoveAccount')" wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-secondary-button>
                    <x-danger-button class="ml-2" wire:click="removeConnectedAccount" wire:loading.attr="disabled">
                        {{ __('Remove') }}
                    </x-danger-button>
                </x-slot>
                <x-slot name="messages">messages</x-slot>
            </x-slot>
            --}}

            {{-- <x-dynamic-button wire:click="confirmingRemoveAccount({{ $account['facebook']['id'] }})"
                wire:loading.attr="disabled"
                class="bg-red-400 hover:bg-red-500 dark:hover:bg-red-600 dark:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-red-400">
                {{ __('leave') }}
            </x-dynamic-button> --}}

            {{-- @endif --}}
        </div>
        {{-- @else --}}
        {{-- <x-dynamic-button href="route('dashboard') route('oauth.redirect'/* , ['provider' => $provider['id']] ) "
            class="bg-red-400 hover:bg-red-500 dark:hover:bg-red-600 dark:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-red-400">
            {{__('Connect')}}
        </x-dynamic-button> --}}
        {{-- @endif --}}



        {{--
        </x-connected-teams> --}}



        {{-- @endforeach --}}

        {{--
        </div> --}}




        <!-- Logout Other Devices Confirmation Modal -->
        <x-dialog-modal wire:model="confirmRemoveAccount">
            <x-slot name="title">
                {{ __('Are you sure you want to remove this account?') }}
            </x-slot>
            <x-slot name="content">
                {{__('Please enter your password to confirm you would like to remove this account')}}

                <div class="mt-4" x-data="{}"
                    x-on:confirming-delete-user.window="setTimeout(() => $refs.password.focus(), 250)">
                    <x-input type="password" class="block w-3/4 mt-1" autocomplete="current-password"
                        placeholder="{{ __('Password') }}" x-ref="password" wire:model="password"
                        wire:keydown.enter="removeConnectedAccount" />
                    <x-input-error for="password" class="mt-2" />
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$toggle('confirmRemoveAccount')" wire:loading.attr="disabled">
                    {{ __('Cancel') }}
                </x-secondary-button>
                <x-danger-button class="ml-2" wire:click="removeConnectedAccount" wire:loading.attr="disabled">
                    {{ __('Remove Account') }}
                </x-danger-button>
            </x-slot>
        </x-dialog-modal>

    </x-slot>

    {{-- </div> --}}
</x-action-section-custom>