@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Programs List</title>
@endsection

@section('subcontent')
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Programs List</h2>
    </div>

    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 flex flex-wrap sm:flex-nowrap items-center mt-2">
            <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-device" class="btn btn-primary">New Device</a>
        </div>
        <!-- BEGIN: Data List -->
        <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

            <div class="overflow-x-auto">
                <table class="table table-hover">
                    <thead>
                        <tr class="bg-primary text-white">
                            <th class="whitespace-nowrap">#</th>
                            <th class="whitespace-nowrap">Name</th>
                            <th class="whitespace-nowrap">IP</th>
                            <th class="whitespace-nowrap" style="text-align: center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($devices as $row)
                        <tr>
                            <td>{{ ++$loop->index }}</td>
                            <td>{{ $row->name }}</td>
                            <td>{{ $row->ip }}</td>
                            <td class="table-report__action w-56">
                                <div class="flex justify-center items-center">
                                    <a class="flex items-center mr-3" href="javascript:;">
                                        <i data-lucide="check-square" class="w-4 h-4 mr-1"></i> Edit
                                    </a>
                                    <a class="flex items-center text-danger" href="javascript:;" data-tw-toggle="modal" data-tw-target="#delete-confirmation-modal">
                                        <i data-lucide="trash-2" class="w-4 h-4 mr-1"></i> Delete
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <!-- END: Data List -->
    </div>
    @include('../pages/program/delete')
    @include('../pages/bio_devices/create')
@endsection