@extends('layout')

@section('content')
    <h3 class="title is-3 has-text-centered">Device List</h3>
    @can('admin-only')
        <div class="buttons is-right">
            <a class="button is-small" href="devices/create">Create Device</a>
        </div>
    @endcan
    @unless (count($devices) == 0)
        <div class="table-container">
            <table class="table is-narrow is-fullwidth is-striped is-hoverable">
                <thead>
                    <tr>
                        <th>device_title</th>
                        <th>device_type</th>
                        <th>description</th>
                        <th>accessories</th>
                        <th>rz_username_buyer</th>
                        <th>serial_number</th>
                        <th>image_url</th>
                        <th>room_code</th>
                        <th>rz_username</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($devices as $device)
                        <x-device-simple :device="$device" />
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p>No devices found</p>
    @endunless

@endsection