{{-- <x-model-view-section>

    <x-slot name="content"> --}}

        {{-- <x-filament::section class="p-2 border border-gray-700 rounded-sm dark:border-gray-800"> --}}

            <x-form-section-custom submit="updateTeamName">

                <x-slot name="header">

                    <x-slot name="icon">
                        <x-fas-people-roof class="w-14 h-14 text-emerald-600" />
                    </x-slot>

                    <x-slot name="title">
                        {{__($this->team->name)}}
                    </x-slot>

                    <x-slot name="description">
                        <span class="text-sm text-gray-500">updated</span>
                        <span class="text-sm text-gray-300 ms-1" wire:model="$this->team->updated_at">
                            {{\Carbon\Carbon::parse($this->team->updated_at)->diffForHumans() }}
                        </span>
                    </x-slot>

                </x-slot>


                <x-slot name="form">

                    {{--
                    <div x-data="{photoName: null, photoPreview: null}"
                        class="flex flex-col items-center justify-center w-6/12 gap-2 p-4 py-5 rounded-sm bg-gray-950 ">
                        <input type="file" id="photo" class="hidden" wire:model.live="photo" x-ref="photo" x-on:change="
                        photoName = $refs.photo.files[0].name;
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            photoPreview = e.target.result;
                        };
                        reader.readAsDataURL($refs.photo.files[0]);
                    " />
                        <div class="" x-show="! photoPreview">
                            <img src="{{ $this->user->profile_photo_url }}" alt="{{ $this->user->name }}"
                                class="object-cover rounded-full w-36 h-36">
                        </div>
                        <div class="" x-show="photoPreview" style="display: none;">
                            <span class="block bg-center bg-no-repeat bg-cover rounded-full w-36 h-36"
                                x-bind:style="'background-image: url(\'' + photoPreview + '\');'">
                            </span>
                        </div>
                        <div class="flex gap-2">
                            <button class="px-3 py-1 text-xs font-semibold uppercase bg-green-800 rounded-sm"
                                type="button" x-on:click.prevent="$refs.photo.click()">
                                {{ __('upload') }}
                            </button>
                            @if ($this->user->profile_photo_path)
                            <button type="button"
                                class="px-3 py-1 text-xs font-semibold uppercase bg-orange-800 rounded-sm"
                                wire:click="deleteProfilePhoto">
                                {{ __('Remove') }}
                            </button>
                            @endif
                            <x-input-error for="photo" class="mt-2" />
                        </div>
                    </div>
                    --}}

                    {{-- <div class="w-1/12">
                        <div class="flex items-center justify-start gap-2 p-2">
                            <x-label for="id" value="{{ __('Id') }}" />
                            <x-input id="id" placeholder="id" type="text" class="block w-full mt-1"
                                wire:model="state.id" :disabled="true" />
                            <x-input-error for="id" class="mt-2" />
                        </div>
                    </div> --}}

                    <div class="flex justify-center w-full gap-1">


                        {{-- <div class="w-1/12 p-2 rounded-sm bg-gray-950">
                            <div class="flex w-full p-1">
                                <x-label for="id" value="{{ __('ID') }}" />
                            </div>
                            <div class="flex w-full p-1">
                                <x-input type="text" id="name" wire:model="state.id"
                                    class="flex w-full p-2 text-sm text-gray-800 bg-gray-900 dark:text-gray-200"
                                    autocomplete="id" wire:loading.attr="disabled" :disabled="true" placeholder="id" />
                            </div>
                        </div> --}}

                        <div class="w-4/12 rounded-sm bg-gray-950">
                            <div class="flex w-full">
                                <x-label for="tag" value="{{ __('TAG') }}" />
                            </div>
                            <div class="flex w-full p-1">

                                <x-input type="text" id="tag" wire:model="state.tag"
                                    class="flex w-full p-2 text-sm text-gray-800 bg-gray-900 dark:text-gray-200"
                                    autocomplete="tag" wire:loading.attr="disabled"
                                    :disabled="! Gate::check('update', $team)" placeholder="team tag" />

                                <div class="" wire:loading>
                                    Shown on loading only
                                </div>

                                <x-button type="submit" wire:loading.attr="disabled" wire:loading.remove
                                    :disabled="! Gate::check('update', $team)"
                                    class="flex items-center justify-center px-1 text-sm font-medium text-white bg-green-600">
                                    <x-fas-floppy-disk aria-hidden="true" class="w-6 h-6 text-gray-950" />
                                </x-button>

                                <x-button type="submit" wire:loading.attr="disabled" :disabled="true" wire:loading
                                    class="flex items-center justify-center px-1 text-sm font-medium text-white bg-orange-600">
                                    <x-fas-spinner aria-hidden="true" class="w-6 h-6 animate-spin text-gray-950" />
                                </x-button>


                            </div>
                        </div>


                        {{-- <div class="w-4/12 p-2 rounded-sm bg-gray-950">
                            <div class="flex w-full p-1">
                                <x-label for="name" value="{{ __('NAME') }}" />
                            </div>
                            <div class="flex w-full p-1">
                                <x-input type="text" id="name" wire:model="state.name"
                                    class="flex w-full p-2 text-sm text-gray-800 bg-gray-900 dark:text-gray-200"
                                    autocomplete="name" wire:loading.attr="disabled"
                                    :disabled="! Gate::check('update', $team)" placeholder="name" />
                                <x-button type="submit" wire:loading.attr="disabled" wire:loading.remove
                                    :disabled="! Gate::check('update', $team)"
                                    class="flex items-center justify-center px-3 text-sm font-medium text-white bg-green-600">
                                    <x-fas-floppy-disk aria-hidden="true" class="w-6 h-6 text-gray-950" />
                                </x-button>
                                <x-button type="submit" wire:loading.attr="disabled" :disabled="true" wire:loading
                                    class="flex items-center justify-center px-3 text-sm font-medium text-white bg-orange-600">
                                    <x-fas-spinner aria-hidden="true" class="w-6 h-6 animate-spin text-gray-950" />
                                </x-button>
                            </div>
                        </div> --}}

                        {{-- <div class="w-3/12 p-2 rounded-sm bg-gray-950">
                            <div class="flex w-full p-1">
                                <x-label for="description" value="{{ __('ABOUT') }}" />
                            </div>
                            <div class="flex w-full p-1">
                                <x-input type="text" id="description" wire:model="state.description"
                                    class="flex w-full p-2 text-sm text-gray-800 bg-gray-900 dark:text-gray-200"
                                    autocomplete="description" wire:loading.attr="disabled"
                                    :disabled="! Gate::check('update', $team)" placeholder="description" />

                                <x-button type="submit" wire:loading.attr="disabled" wire:loading.remove
                                    :disabled="! Gate::check('update', $team)"
                                    class="flex items-center justify-center px-3 text-sm font-medium text-white bg-green-600">
                                    <x-fas-floppy-disk aria-hidden="true" class="w-6 h-6 text-gray-950" />
                                </x-button>
                                <x-button type="submit" wire:loading.attr="disabled" :disabled="true" wire:loading
                                    class="flex items-center justify-center px-3 text-sm font-medium text-white bg-orange-600">
                                    <x-fas-spinner aria-hidden="true" class="w-6 h-6 animate-spin text-gray-950" />
                                </x-button>

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

                    </div>

                    {{-- <div class="w-5/12">
                        <div class="flex items-center justify-start gap-2 p-2"> --}}
                            {{--
                            <x-label for="description" value="{{ __('About') }}" /> --}}
                            {{--
                            <x-input id="description" placeholder="description" type="text" class="block w-full mt-1"
                                wire:model="state.description" :disabled="!Gate::check('update', $team)" /> --}}
                            {{-- <input type="text" id="description" wire:model="state.description"
                                class="flex w-full p-2 text-sm text-gray-800 bg-gray-900 dark:text-gray-200"
                                autocomplete="description" wire:loading.attr="disabled"
                                :disabled="!$user->hasVerifiedEmail()" placeholder="description" /> --}}
                            {{-- <button type="submit"
                                class="flex items-center justify-center px-3 text-sm font-medium text-white bg-green-600">
                                <x-fas-floppy-disk aria-hidden="true" class="w-6 h-6 text-gray-950" />
                            </button>
                            <x-input-error for="description" class="mt-2" /> --}}
                            {{--
                        </div>
                    </div> --}}
                </x-slot>

                {{-- <x-slot name="footer">
                    <x-slot name="foot_actions">
                        <div class="">
                            <x-button wire:loading.attr="disabled" wire:loading.remove
                                :disabled="! Gate::check('update', $team)"
                                class="text-gray-900 bg-green-600 rounded-none">
                                <div class="flex items-center ">
                                    <x-fas-floppy-disk class="w-6 h-6 mr-2 text-gray-950" /> update
                                </div>
                            </x-button>
                            <x-button wire:loading wire:loading.attr="disabled" :disabled="true"
                                class="text-gray-900 bg-orange-600 rounded-none bg-opacity-15">
                                <div class="flex items-center ">
                                    <x-fas-spinner class="w-6 h-6 mr-2 animate-spin text-gray-950" /> saving
                                </div>
                            </x-button>
                        </div>
                    </x-slot>
                    <x-slot name="messages">
                        <x-action-message class="" on="saved">
                            <div class="font-semibold text-emerald-400 ">
                                {{__('updated team tag')}}
                            </div>
                        </x-action-message>
                    </x-slot>
                </x-slot> --}}

            </x-form-section-custom>