@if ( $devices['count'] == 0 )
    <p class="text-center">You do not have any devices</p>
    <p class="text-center">
        <button type="button" id="add-device-btn" class="btn btn-primary" >Add Device</button>
    </p>
@else
    
    <div class="py-2 mb-2">
        <button type="button" id="add-device-btn" class="btn btn-primary" >Add Device</button>
    </div>

    <div class="row">
        @foreach ($devices['data'] as $device)
            <div class="col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-9">
                                <i class="fas fa-microchip" style="font-size: 2rem;"></i>
                                <h4>{{ $device['device_nickname'] }}</h4>
                            </div>
                            <div class="col-3">
                                <input type="checkbox" {{ ( $device['device_status'] == 'on' ? ' checked ' : '' ) }} data-url="{{ webPermalink('devices/ajax/switch-device/'.$device['device_id']) }}" data-size="small" class="js-switch" />
                            </div>
                        </div>
                        
                        <p>Device Type: {{ ucwords($device['device_type']) }}</p>
                        <p>UID <code>{{ $device['device_uid'] }}</code></p>
                        <p>Location <code>{{ $device['location']['location_name'] }} / {{ $device['location']['room_name'] }}</code></p>
                        <p>
                            <button data-url="{{ webPermalink('devices/ajax/show-device/'.$device['device_id']) }}" class="edit-btn btn btn-sm btn-light" style="margin-right: 10px;">Edit</button> 
                            <button data-url="{{ webPermalink('devices/ajax/show-reading/'.$device['device_id'].'/1') }}" class="reading-btn btn btn-sm btn-light" style="margin-right: 10px;">Readings</button> 
                            <button data-url="{{ webPermalink('devices/ajax/show-triggers/'.$device['device_id']) }}" class="triggers-btn btn btn-sm btn-light" style="margin-right: 10px;">Triggers</button> 
                        </p>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

@endif