@extends('layouts.agent')

@section('styles')
{{-- <script src="https://cdn.tailwindcss.com"></script> --}}
{{-- <link href="{{ mix('css/app.css') }}" rel="stylesheet" /> --}}
<style type="text/css">
	.table>tbody>tr>td, .table>tfoot>tr>td{
	    vertical-align: middle;
	}
	@media screen and (max-width: 991px) {
	    table#cart tbody td .form-control{
			width:20%;
			display: inline !important;
		}
		.actions .btn{
			width:36%;
			margin:1.5em 0;
		}
		
		.actions .btn-info{
			float:left;
		}
		.actions .btn-danger{
			float:right;
		}

		.btn-danger{
			margin-top: 1.25rem;
		}
		
		table#cart thead { display: none; }
		table#cart tbody td { display: block; padding: .6rem; min-width:320px;}
		table#cart tbody tr td:first-child { background: #f7bd47; color: #000000; }
		table#cart tbody td:before {
			content: attr(data-th); font-weight: bold;
			display: inline-block; width: 8rem;
		}
		
		
		
		table#cart tfoot td{display:block; }
		table#cart tfoot td .btn{display:block;}
	}
</style>
@endsection

@section('content')
<livewire:agents.carts.cart-list />
@endsection

@section('scripts')
<script src="{{ asset('vendor/livewire-alert/livewire-alert.js') }}"></script> 
<x-livewire-alert::flash />
@endsection