@extends('web.layouts.main')

@push('stylesheets')
<link rel="stylesheet" type="text/css" href="{{ asset('assets_web/libraries/slick-1.8.1/slick.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets_web/libraries/slick-1.8.1/slick-theme.min.css') }}">
@endpush

@section('content')

@include('web.components.page-header', ['heading' => trans('text.my-account')])

<div class="container mb-5">
	@include('web.layouts.header.my-account-nav')

	<div class="bg-quaternary custom-card">
		<div class="table-responsive">
			<table width="100%" class="my-account-table">
				<colgroup>
					<col span="1" style="width: 60px;">
					<col span="1" style="width: 15%;">
					<col span="1" style="width: 50%;">
					<col span="1">
				</colgroup>
				<thead>
					<th></th>
					<th>{{ trans('text.order') }} #</th>
					<th>{{ trans('text.subscription-date') }}</th>
					<th>{{ trans('text.#-of-draws') }}</th>
				</thead>
				<tbody>
					@foreach($subscriptions as $subscription)
					<tr>
						<td><img src="{{ asset('assets_web/images/icons/doodle-red.svg') }}"></td>
						<td>{{ $subscription->order_code }}</td>
						<td class="font-weight-light">{{ $subscription->created_at }}</td>
						<td class="text-primary">{{ $subscription->number_of_draws }}</td>
					</tr>
					@endforeach
				</tbody>
			</table>
		</div>
	</div>
</div>

<div class="mb-5">
	@include('web.components.shortcuts')
</div>

<div class="mb-5 pb-5">
	@include('web.components.are-you-a-winner')
</div>

@endsection

@push('scripts')
<script type="text/javascript" src="{{ asset('assets_web/libraries/slick-1.8.1/slick.min.js') }}"></script>
@endpush