@extends('front.layouts.app-auth')
@section('content')

<!-- Page Header with Breadcrumb -->
<div class="nft-inventory-header">
    <div class="breadcrumb-wrapper">
        <a href="{{ route('profile') }}" class="breadcrumb-link">Dashboard</a>
        <span class="breadcrumb-separator">›</span>
        <span class="breadcrumb-current">NFT Inventory</span>
    </div>
    
    <div class="page-title-section">
        <div class="page-title-left">
            <h1 class="page-title">NFT Inventory</h1>
            <p class="page-subtitle">Imported NFTs from your wallet - ready to attach to campaigns</p>
        </div>
        <div class="page-title-right">
            <a href="{{ route('profile.nfts.import') }}" class="btn-import-collection" id="importCollectionBtn">
                <i data-lucide="download"></i>
                Import NFTs
            </a>
        </div>
    </div>
</div>

<!-- Empty State -->
<div class="nft-inventory-container">
    <div class="nft-empty-state">
        <div class="empty-state-icon">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- Package/Box Icon -->
                <rect x="15" y="20" width="50" height="45" rx="3" fill="#E5A572" stroke="#C08A5E" stroke-width="2.5"/>
                <path d="M15 25h50v8H15z" fill="#C08A5E"/>
                <circle cx="32" cy="40" r="2.5" fill="#8B6F47"/>
                <path d="M42 36l10 12h-20z" fill="#8B6F47"/>
                <rect x="30" y="52" width="20" height="3" rx="1" fill="#8B6F47"/>
                <path d="M40 20L15 25v5l25-7z" fill="#B8946D" opacity="0.7"/>
                <path d="M40 20L65 25v5l-25-7z" fill="#A07D55" opacity="0.7"/>
                <line x1="40" y1="20" x2="40" y2="30" stroke="#8B6F47" stroke-width="2.5" stroke-linecap="round"/>
            </svg>
        </div>
        
        <h2 class="empty-state-title">No NFTs in Inventory</h2>
        
        <div class="empty-state-description">
            <p>Import NFTs from your wallet to add them to your inventory.</p>
            <p>NFTs stay in your wallet - we just create a listing reference.</p>
        </div>
        
        <a href="{{ route('profile.nfts.import') }}" class="btn-import-collection-large" id="importCollectionBtnLarge">
            <i data-lucide="download"></i>
            Import NFTs
        </a>
    </div>
</div>

@endsection