@extends('layouts.marketplace', ['title' => 'Marketplace Account - Purchases'])

@section('content')
    <!-- Purchases content -->
    <div class="col-lg-9 pt-2 pt-xl-3">
        <div
            data-filter-list='{"searchClass": "product-search", "listClass": "product-list", "sortClass": "product-sort", "valueNames": ["product", "author", "category", "date", "license"]}'>
            <!-- Header -->
            <div class="d-sm-flex align-items-center justify-content-between gap-3 pb-2 pb-sm-3 mb-md-2">
                <h1 class="h2 text-nowrap mb-sm-0">Purchases (6)</h1>
                <div class="position-relative w-100" style="max-width: 300px">
                    <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
                    <input class="product-search form-control form-icon-start rounded-pill" placeholder="Search"
                        type="search" />
                </div>
            </div>
            <!-- Purchases list (table) -->
            <table class="table align-middle fs-sm mb-0">
                <thead>
                    <tr>
                        <th class="px-0 pe-sm-2" scope="col">
                            <span class="fw-normal text-body">Product</span>
                        </th>
                        <th class="d-none d-md-table-cell" scope="col">
                            <button class="btn fw-normal text-body product-sort p-0" data-sort="date"
                                type="button">Purchase date</button>
                        </th>
                        <th class="d-none d-md-table-cell" scope="col">
                            <span class="fw-normal text-body">License</span>
                        </th>
                        <th class="d-none d-sm-table-cell pe-0" scope="col"></th>
                    </tr>
                </thead>
                <tbody class="product-list">
                    <!-- Item -->
                    <tr>
                        <td class="py-3 px-0 pe-sm-2">
                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
                            <div class="d-none d-xl-block" style="width: 450px"></div>
                            <div
                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/13.jpg" />
                                </div>
                                <div class="ps-2 ps-sm-3 ms-1">
                                    <h6 class="product mb-2">
                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Smart watches series 9 mockup</a>
                                    </h6>
                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/03.png" />
                                                </div>
                                            </div>
                                            MD Studio
                                        </div>
                                        <div class="text-body-secondary">in</div>
                                        <div class="category fs-xs fw-medium text-body">Mockups</div>
                                    </div>
                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
                                            class="text-body-secondary">License:</span> <span
                                            class="license">Standard</span></div>
                                    <div class="fs-xs text-nowrap d-md-none"><span class="text-body-secondary">Date:</span>
                                        July 28, 2024</div>
                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
                                    <button
                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
                                        type="button">
                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                        Download
                                    </button>
                                </div>
                            </div>
                        </td>
                        <!-- Visible on screens > 768px wide (md breakpoint) -->
                        <td class="d-none d-md-table-cell py-3">July 28, 2024<span
                                class="date visually-hidden">1722164400</span></td>
                        <td class="d-none d-md-table-cell py-3">Standard</td>
                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                Download
                            </button>
                        </td>
                    </tr>
                    <!-- Item -->
                    <tr>
                        <td class="py-3 px-0 pe-sm-2">
                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
                            <div class="d-none d-xl-block" style="width: 450px"></div>
                            <div
                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/14.jpg" />
                                </div>
                                <div class="ps-2 ps-sm-3 ms-1">
                                    <h6 class="product mb-2">
                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Gradient glassmorphism icons
                                            set</a>
                                    </h6>
                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/02.png" />
                                                </div>
                                            </div>
                                            Magic FS
                                        </div>
                                        <div class="text-body-secondary">in</div>
                                        <div class="category fs-xs fw-medium text-body">Vectors</div>
                                    </div>
                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
                                            class="text-body-secondary">License:</span> <span
                                            class="license">Standard</span></div>
                                    <div class="fs-xs text-nowrap d-md-none"><span class="text-body-secondary">Date:</span>
                                        July 5, 2024</div>
                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
                                    <button
                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
                                        type="button">
                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                        Download
                                    </button>
                                </div>
                            </div>
                        </td>
                        <!-- Visible on screens > 768px wide (md breakpoint) -->
                        <td class="d-none d-md-table-cell py-3">July 5, 2024<span
                                class="date visually-hidden">1720177200</span></td>
                        <td class="d-none d-md-table-cell py-3">Standard</td>
                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                Download
                            </button>
                        </td>
                    </tr>
                    <!-- Item -->
                    <tr>
                        <td class="py-3 px-0 pe-sm-2">
                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
                            <div class="d-none d-xl-block" style="width: 450px"></div>
                            <div
                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/15.jpg" />
                                </div>
                                <div class="ps-2 ps-sm-3 ms-1">
                                    <h6 class="product mb-2">
                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">A stunning set of tablet pro
                                            mockups</a>
                                    </h6>
                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/04.png" />
                                                </div>
                                            </div>
                                            Fireby
                                        </div>
                                        <div class="text-body-secondary">in</div>
                                        <div class="category fs-xs fw-medium text-body">Mockups</div>
                                    </div>
                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
                                            class="text-body-secondary">License:</span> <span
                                            class="license">Extended</span></div>
                                    <div class="fs-xs text-nowrap d-md-none"><span
                                            class="text-body-secondary">Date:</span> May 30, 2024</div>
                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
                                    <button
                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
                                        type="button">
                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                        Download
                                    </button>
                                </div>
                            </div>
                        </td>
                        <!-- Visible on screens > 768px wide (md breakpoint) -->
                        <td class="d-none d-md-table-cell py-3">May 30, 2024<span
                                class="date visually-hidden">1717066800</span></td>
                        <td class="d-none d-md-table-cell py-3">Extended</td>
                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                Download
                            </button>
                        </td>
                    </tr>
                    <!-- Item -->
                    <tr>
                        <td class="py-3 px-0 pe-sm-2">
                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
                            <div class="d-none d-xl-block" style="width: 450px"></div>
                            <div
                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/16.jpg" />
                                </div>
                                <div class="ps-2 ps-sm-3 ms-1">
                                    <h6 class="product mb-2">
                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">Isometric smartphone mockups</a>
                                    </h6>
                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/03.png" />
                                                </div>
                                            </div>
                                            MD Studio
                                        </div>
                                        <div class="text-body-secondary">in</div>
                                        <div class="category fs-xs fw-medium text-body">Mockups</div>
                                    </div>
                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
                                            class="text-body-secondary">License:</span> <span
                                            class="license">Standard</span></div>
                                    <div class="fs-xs text-nowrap d-md-none"><span
                                            class="text-body-secondary">Date:</span> April 19, 2024</div>
                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
                                    <button
                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
                                        type="button">
                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                        Download
                                    </button>
                                </div>
                            </div>
                        </td>
                        <!-- Visible on screens > 768px wide (md breakpoint) -->
                        <td class="d-none d-md-table-cell py-3">April 19, 2024<span
                                class="date visually-hidden">1713524400</span></td>
                        <td class="d-none d-md-table-cell py-3">Standard</td>
                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                Download
                            </button>
                        </td>
                    </tr>
                    <!-- Item -->
                    <tr>
                        <td class="py-3 px-0 pe-sm-2">
                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
                            <div class="d-none d-xl-block" style="width: 450px"></div>
                            <div
                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/17.jpg" />
                                </div>
                                <div class="ps-2 ps-sm-3 ms-1">
                                    <h6 class="product mb-2">
                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">House plants website template</a>
                                    </h6>
                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/02.png" />
                                                </div>
                                            </div>
                                            Magic FS
                                        </div>
                                        <div class="text-body-secondary">in</div>
                                        <div class="category fs-xs fw-medium text-body">Templates</div>
                                    </div>
                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
                                            class="text-body-secondary">License:</span> <span
                                            class="license">Extended</span></div>
                                    <div class="fs-xs text-nowrap d-md-none"><span
                                            class="text-body-secondary">Date:</span> April 12, 2024</div>
                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
                                    <button
                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
                                        type="button">
                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                        Download
                                    </button>
                                </div>
                            </div>
                        </td>
                        <!-- Visible on screens > 768px wide (md breakpoint) -->
                        <td class="d-none d-md-table-cell py-3">April 12, 2024<span
                                class="date visually-hidden">1712919600</span></td>
                        <td class="d-none d-md-table-cell py-3">Extended</td>
                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                Download
                            </button>
                        </td>
                    </tr>
                    <!-- Item -->
                    <tr>
                        <td class="py-3 px-0 pe-sm-2">
                            <div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
                            <div class="d-none d-xl-block" style="width: 450px"></div>
                            <div
                                class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
                                <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
                                    style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
                                    <img alt="Image" class="hover-effect-target" src="/img/account/products/18.jpg" />
                                </div>
                                <div class="ps-2 ps-sm-3 ms-1">
                                    <h6 class="product mb-2">
                                        <a class="fs-sm fw-medium hover-effect-underline stretched-link"
                                            href="{{ route('second', ['shop', 'product-marketplace']) }}">A collection of colorful items</a>
                                    </h6>
                                    <div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
                                        <div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img alt="Avatar" src="/img/shop/marketplace/avatars/04.png" />
                                                </div>
                                            </div>
                                            Fireby
                                        </div>
                                        <div class="text-body-secondary">in</div>
                                        <div class="category fs-xs fw-medium text-body">3D illustration</div>
                                    </div>
                                    <!-- Visible on screens < 769px wide (md breakpoint) -->
                                    <div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
                                            class="text-body-secondary">License:</span> <span
                                            class="license">Standard</span></div>
                                    <div class="fs-xs text-nowrap d-md-none"><span
                                            class="text-body-secondary">Date:</span> March 3, 2024</div>
                                    <!-- Visible on screens < 500px wide (sm breakpoint) -->
                                    <button
                                        class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
                                        type="button">
                                        <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                        Download
                                    </button>
                                </div>
                            </div>
                        </td>
                        <!-- Visible on screens > 768px wide (md breakpoint) -->
                        <td class="d-none d-md-table-cell py-3">March 3, 2024<span
                                class="date visually-hidden">1709467200</span></td>
                        <td class="d-none d-md-table-cell py-3">Standard</td>
                        <!-- Visible on screens > 500px wide (sm breakpoint) -->
                        <td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
                            <button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
                                <i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
                                Download
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('scripts')
@endsection
