@props(['device'])
<h3 class="title is-3 has-text-centered">Device Detail</h3>
<div class="table-container">
    <table class="table is-narrow is-fullwidth">
        <thead>
            <tr>
                <th>Ttile</th>
                <th>device_type</th>
                <th>description</th>
                <th>accessories</th>
                <th>rz_username_buyer</th>
                <th>serial_number</th>
                <th>image_url</th>
                @can('admin-only')
                    <th class="is-narrow">Action</th>
                @endcan
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ $device['title'] }}</td>
                <td>{{ $device['device_type'] }}</td>
                <td>{{ $device['description'] }}</td>
                <td>{{ $device['accessories'] }}</td>
                <td>{{ $device['rz_username_buyer'] }}</td>
                <td>{{ $device['serial_number'] }}</td>
                <td>{{ $device['image_url'] }}</td>
                @can('admin-only')
                    <td>
                        <button><a href="{{ $device->device_id }}/edit">Edit</a></button>
                        <form method="POST" action="{{ $device->device_id }}">
                            @method('DELETE')
                            @csrf
                            <button>Delete</button>
                        </form>
                    </td>
                @endcan
            </tr>
        </tbody>
    </table>
</div>

<h3 class="title is-3 has-text-centered">Purchasing Information</h3>
<x-purchasing-information :device="$device" />



<h3 class="title is-3 has-text-centered">Location Transactions</h3>
<div class="buttons is-right">
    <a class="button is-small" href="{{ $device->device_id }}/locations/create">New Location</a>
</div>
@php
    $locationTransactions = $device->locations;
    $ownerTransactins = $device->owners;
@endphp

<div class="table-container">
    <table class="table is-narrow is-fullwidth is-striped is-hoverable">
        <thead>
            <tr>
                <th>room_code</th>
                <th>timestamp_located_since</th>
                @can('admin-only')
                    <th class="is-narrow">Action</th>
                @endcan
            </tr>
        </thead>
        <tbody>
            @foreach ($locationTransactions as $location)
                <x-location-transaction :location="$location" />
            @endforeach
        </tbody>
    </table>
</div>



<h3 class="title is-3 has-text-centered">Owner Transactions</h3>
<div class="buttons is-right">
    <a class="button is-small" href="{{ $device->device_id }}/owners/create">New Owner</a>
</div>
<div class="table-container">
    <table class="table is-narrow is-fullwidth is-striped is-hoverable">
        <thead>
            <tr>
                <th>rz_username</th>
                <th>timestamp_owner_since</th>
                @can('admin-only')
                    <th class="is-narrow">Action</th>
                @endcan
            </tr>
        </thead>
        <tbody>
            @foreach ($ownerTransactins as $owner)
                <x-owner-transaction :owner="$owner" />
            @endforeach
        </tbody>
    </table>
</div>