@props(['network'])

<div x-data="{ showMoreProperties: false}" class="p-4 rounded-lg shadow-md border border-lightBlue">
    <table class="w-full text-left border-collapse">
        <tbody>
            <tr class="border-b border-lightGrey">
                <td class="py-3 px-2 text-primary font-semibold">{{ __('Interface') }}</td>
                <td class="py-3 px-2">{{ $network->modem_virtual_interface }}</td>
            </tr>
            <tr class="border-b border-lightGrey">
                <td class="py-3 px-2 text-primary font-semibold">{{ __('IPv4') }}</td>
                <td class="py-3 px-2">
                    <template x-if="!showMoreProperties">
                        <span>100.78.102.97</span>
                    </template>
                    <template x-if="showMoreProperties">
                        <div class="space-y-1">
                            <div class="flex justify-between"><span>{{ __('Address:') }}</span><span>100.78.102.97</span></div>
                            <div class="flex justify-between"><span>{{ __('Subnet:') }}</span><span>255.255.255.252</span></div>
                            <div class="flex justify-between"><span>{{ __('Gateway:') }}</span><span>{{ $network->modem_gateway }}</span></div>
                            <div class="flex justify-between"><span>{{ __('DNS 1:') }}</span><span>198.224.173.135</span></div>
                            <div class="flex justify-between"><span>{{ __('DNS 2:') }}</span><span>198.224.174.135</span></div>
                            <div class="flex justify-between"><span>{{ __('MTU:') }}</span><span>1500</span></div>
                        </div>
                    </template>
                </td>
            </tr>
            <tr class="border-b border-lightGrey">
                <td class="py-3 px-2 text-primary font-semibold">{{ __('IPv6') }}</td>
                <td class="py-3 px-2">
                    <template x-if="!showMoreProperties">
                        <span>0:0:0:0:0:0:0:0</span>
                    </template>
                    <template x-if="showMoreProperties">
                        <div class="space-y-1">
                            <div class="flex justify-between font-semibold"><span>{{ __('Address:') }}</span><span>0:0:0:0:0:0:0:0</span></div>
                            <div class="flex justify-between font-semibold"><span>{{ __('Prefix:') }}</span><span>-</span></div>
                            <div class="flex justify-between font-semibold"><span>{{ __('Gateway:') }}</span><span>{{ $network->modem_gateway_6 }}</span></div>
                            <div class="flex justify-between font-semibold"><span>{{ __('DNS 1:') }}</span><span>0:0:0:0:0:0:0:0</span></div>
                            <div class="flex justify-between font-semibold"><span>{{ __('DNS 2:') }}</span><span>0:0:0:0:0:0:0:0</span></div>
                            <div class="flex justify-between font-semibold"><span>{{ __('MTU:') }}</span><span>-</span></div>
                        </div>
                    </template>
                </td>
            </tr>
            <tr class="border-b border-lightGrey">
                <td class="py-3 px-2 text-primary font-semibold">{{ __('Source Port Range') }}</td>
                <td class="py-3 px-2">2000-65000</td>
            </tr>
            <tr>
                <td class="py-3 px-2 text-primary font-semibold">{{ __('Modem Class') }}</td>
                <td class="py-3 px-2">3</td>
            </tr>
        </tbody>
    </table>
    <button 
        @click="showMoreProperties = !showMoreProperties" 
        class="group flex flex-col items-center justify-center w-full mt-4 px-2 transition-all text-xs">
        <template x-if="!showMoreProperties">
            <span>{{ __('Show More') }}</span>
        </template>
        <template x-if="showMoreProperties">
            <span>{{ __('Show Less') }}</span>
        </template>
        <img  
            src="{{ asset('icons/menu/arrow-right.svg') }}" 
            class="w-4 h-4 transition-transform" 
            :class="showMoreProperties ? 'rotate-[-90deg]' : 'rotate-90'">
    </button>
</div>