{{--Name	$Sold / $Req.	# Sold / # Req.	Stock Level	Action--}}
<div class="dashboard-item row">
    <div class="col-12">
        <div class="card card-default">
            <div class="datatable-card-header card-header d-flex col-12">
                <h1 class="d-flex">Wine List (@{{ itemCount() }})</h1>
                <div class="d-flex flex-grow-1 justify-content-center budget-text">@{{ total('required') | currency(2) }}</div>
                <div class="d-flex justify-content-end">
                    <button class="select-btn no-carat"
                            @click="go('/admin/registry/{registry}/wines', {registry: '{{ $registry->id }}' })"
                    >@{{ itemCount() ? 'Edit' : 'Add' }} Wine
                    </button>
                </div>
                <div class="d-flex justify-content-end">
                    <button class="select-btn no-carat justify-content-center"
                            @click="go('/{registry}/preview', {registry: '{{ $registry->id }}'}, true)"
                    >Preview</button>
                </div>
            </div>
            <div class="card-body">
                <ajax-datatable id="statuses-table" route="{{ route('admin.load.wines', compact('registry')) }}">
                    {{--                    :initial-params="{ status: {{ \App\Models\Registry::$STATUS_NEW }} }"--}}
                    {{--   <el-table-column type="selection" width="40" sortable></el-table-column>--}}
                    <el-table-column prop="title" label="Name" sortable show-overflow-tooltip></el-table-column>
                    <el-table-column prop="price" label="$Sold / $Req" width="140" class-name="col-center"
                                     label-class-name="col-center">
                        <template slot-scope="scope">
                            @{{ ((scope.row.pivot.received || 0) * scope.row.price) | currency(0) }} / @{{
                            ((scope.row.pivot.required || scope.row.pivot.recommended || 0) * scope.row.price) | currency(0) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="#Sold / #Req" width="140" class-name="col-center"
                                     label-class-name="col-center">
                        <template slot-scope="scope">
                            @{{ scope.row.pivot.received || 0 }} / @{{ scope.row.pivot.required || scope.row.pivot.recommended || 0 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="#Recom / $Recom" width="140" class-name="col-center"
                                     label-class-name="col-center">
                        <template slot-scope="scope">
                            @{{ (scope.row.pivot.recommended || 0) }} / @{{
                            ((scope.row.pivot.recommended || 0) * scope.row.price) | currency(0) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stock" label="Stock Level" sortable width="140"></el-table-column>
                </ajax-datatable>
            </div>
        </div>
    </div>
</div>