{% extends "layout.html.twig" %}

{% block title %}Our Lendables Dashboard - Local Lendables{% endblock %}

{% block content %}
<!-- Welcome Alert -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: "Welcome to our Local Lendables Demo",
                text: "You are now logged in as {% if user.showName %}{{ user.showName }}{% else %}{{ user.firstName }} {{ user.lastName }}{% endif %}!",
                icon: 'success',
                confirmButtonText: 'Start Exploring',
                confirmButtonColor: '#28a745'
            });
        }
    });

    // Logout function with browser history prevention
    function performLogout() {
        Swal.fire({
            title: 'Logout Confirmation',
            text: 'Are you sure you want to logout?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, Logout',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // Clear browser history and redirect to demo
                window.location.replace('/logout');
            }
        });
    }
</script>


    <div class="container d-block py-2 border-top border-bottom border-success">
        <div class="row flex-nowrap align-items-center g-0" style="height: 80px;">
            <div class="col-auto pe-2">
                <!-- Hamburger Menu -->
                <div class="dropdown">
                    <button class="btn btn-link text-white p-1" type="button" id="hamburgerMenu" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-bars" style="font-size: 1.5rem;"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-start" aria-labelledby="hamburgerMenu" style="min-width: 300px;">
                        <!-- Back to Dashboard -->
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-2" href="/dashboard">
                                <div class="rounded-circle bg-primary text-white me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <i class="fas fa-tachometer-alt"></i>
                                </div>
                                <span>Back to My Dashboard</span>
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        
                        <!-- My Lendables Actions -->
                        <li class="dropdown-header fw-bold">My Lendables Actions:</li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/browse">
                                <div class="rounded-circle bg-success text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-search"></i>
                                </div>
                                <span>Find an Item to Borrow or Lend</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/create-item?userId={{ user.id }}">
                                <div class="rounded-circle bg-success text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-plus"></i>
                                </div>
                                <span>Create a Lendable Item</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/create-wish" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-success text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-heart"></i>
                                </div>
                                <span>Create a Wish List Item</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/return-item" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-success text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-undo"></i>
                                </div>
                                <span>Return a Borrowed Item</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/send-reminder" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-success text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-bell"></i>
                                </div>
                                <span>Send a Reminder</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/edit-profile" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-success text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-user-edit"></i>
                                </div>
                                <span>Edit My Profile</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/my-statistics" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-success text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-chart-bar"></i>
                                </div>
                                <span>See My Statistics</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/logout">
                                <div class="rounded-circle bg-success text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-sign-out-alt"></i>
                                </div>
                                <span>Log Out</span>
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        
                        <!-- My Lendables Inventory -->
                        <li class="dropdown-header fw-bold">My Lendables Inventory</li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/my-borrowed" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-info text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-arrow-down"></i>
                                </div>
                                <span>Items I have Borrowed</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/my-loaned" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-info text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-arrow-up"></i>
                                </div>
                                <span>My Loaned-Out Items</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/my-items">
                                <div class="rounded-circle bg-info text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-list"></i>
                                </div>
                                <span>My Lendable Items on Offer</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/my-drafts" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-info text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-edit"></i>
                                </div>
                                <span>My Lendable Item Drafts</span>
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        
                        <!-- All Listed Lendables -->
                        <li class="dropdown-header fw-bold">All Listed Lendables (Items & Wishes)</li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/categories" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-warning text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-tags"></i>
                                </div>
                                <span>View Categories</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/browse">
                                <div class="rounded-circle bg-warning text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-random"></i>
                                </div>
                                <span>All Items, Random Browse</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/browse?sort=alphabetic">
                                <div class="rounded-circle bg-warning text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-sort-alpha-down"></i>
                                </div>
                                <span>All Items, Listed Alphabetically</span>
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        
                        <!-- Our Local Lendables -->
                        <li class="dropdown-header fw-bold">Our Local Lendables</li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/about-community" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-secondary text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-users"></i>
                                </div>
                                <span>About Our Community</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/our-manager" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-secondary text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-user-tie"></i>
                                </div>
                                <span>Our Manager</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/how-supported" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-secondary text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-life-ring"></i>
                                </div>
                                <span>How Lendables is Supported</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/invite-member" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-secondary text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-user-plus"></i>
                                </div>
                                <span>How to Invite a new Member</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/handshake-agreement" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-secondary text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-handshake"></i>
                                </div>
                                <span>View Lendable Handshake Agreement</span>
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        
                        <!-- General Local Lendables -->
                        <li class="dropdown-header fw-bold">General Local Lendables</li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/what-are-we" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-dark text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-question"></i>
                                </div>
                                <span>What are we?</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/ethical-model" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-dark text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-balance-scale"></i>
                                </div>
                                <span>Our Ethical Business Model</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/faq" style="text-decoration: line-through;">
                                <div class="rounded-circle bg-dark text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-question-circle"></i>
                                </div>
                                <span>Frequently Asked Questions</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center py-1" href="/demo">
                                <div class="rounded-circle bg-dark text-white me-3 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                    <i class="fas fa-play"></i>
                                </div>
                                <span>Local Lendables Demo</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col col-lg-3 d-flex align-items-center">
                <a href="/dashboard" class="navbar-brand me-0 onlycavolini d-flex align-items-center">
                    <img src="/local_circle_logo.png" 
                         class="img-fluid me-2" 
                         height="76" 
                         width="76"
                         alt="Local Lendables Logo">
                    <span class="headertitle text-white" style="line-height: 100%;">Local Lendables<br>&nbsp;&nbsp;Demo</span>
                </a>
            </div>
            <div class="col col-lg-9 d-flex align-items-center justify-content-end">

                <div class="d-flex align-items-center">
                    <!-- User Profile Dropdown -->
                    <div class="dropdown me-3">
                        <button class="btn btn-link text-white p-0 d-flex align-items-center" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="/ll_images/{{ user.avatar }}" 
                                 width="32" height="32" 
                                 class="rounded-circle border border-white me-2" 
                                 alt="{{ user.showName ?: (user.first_name ~ ' ' ~ user.last_name) }}"
                                 onerror="this.src='/ll_images/default-avatar.png'">
                            <span class="text-white small d-none d-lg-inline">{{ user.showName ?: (user.first_name ~ ' ' ~ user.last_name) }}</span>
                            <i class="fas fa-chevron-down text-white ms-1"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li>
                                <a class="dropdown-item d-flex align-items-center" href="/profile/{{ user.id }}">
                                    <i class="fas fa-user me-2"></i>
                                    My Profile
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item d-flex align-items-center" href="/edit-profile" style="text-decoration: line-through;">
                                    <i class="fas fa-user-edit me-2"></i>
                                    Edit Profile
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item d-flex align-items-center" href="/my-statistics" style="text-decoration: line-through;">
                                    <i class="fas fa-chart-bar me-2"></i>
                                    My Statistics
                                </a>
                            </li>
                        </ul>
                    </div>
                    <button class="btn btn-outline-danger btn-sm px-2" onclick="performLogout()" title="Logout">
                        <i class="fas fa-power-off me-1"></i>Logout
                    </button>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Breadcrumb -->
<nav class="container pt-1 my-1" aria-label="breadcrumb">
    <ol class="breadcrumb py-0 my-0">
        <li class="breadcrumb-item"><a href="/demo">Demo Home</a></li>
        <li class="breadcrumb-item active small" aria-current="page">{{ user.firstName }}'s Dashboard</li>
    </ol>
</nav>

<!-- Main Content -->
<main class="content-wrapper">
    <section class="container pt-1 mt-1 mt-sm-3">
        <div class="row row-cols-2 row-cols-md-1 g-4">
            
            <!-- Left Column - Actions and User Items -->
            <div class="col-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                
                <!-- Actions Section -->
                <div class="row border border-success rounded-4 pt-2 px-2 lh-1 mt-0 text-center">
                    <span class="h5 lh-1">Actions:<br></span>
                    
                    <!-- Create New Item -->
                    <div class="col py-0 my-0 border border-success border-dotted bg-dotted" style="--cz-bg-color: var(--bs-success-bg-subtle); --cz-dot-color: var(--bs-success)">
                        <div class="d-flex flex-column flex-xxl-row align-items-center justify-content-center">
                            <a class="hover-effect-scale rounded overflow-hidden" href="/create-item">
                                <img src="/lendables/logo_create.png" 
                                     class="hover-effect-target" alt="Create New" style="display: block !important; width: 100%; height: auto; max-width: 150px;" 
                                     title="Create a New Lendable Item to Offer to our Community">
                            </a>
                        </div>
                    </div>
                    
                    <!-- Return Item -->
                    <div class="col py-0 my-0 border border-success border-dotted bg-dotted" style="--cz-bg-color: var(--bs-dark-bg-subtle); --cz-dot-color: var(--bs-dark)">
                        <div class="d-flex flex-column flex-xxl-row align-items-center justify-content-center">
                            <a class="hover-effect-scale rounded overflow-hidden" href="#" onclick="alert('Return Item feature coming soon!')">
                                <img src="/lendables/logo_return.png" 
                                     class="hover-effect-target" alt="Return Item" style="display: block !important; width: 100%; height: auto; max-width: 150px;" 
                                     title="Return a Lendable Item that You've Borrowed">
                            </a>
                        </div>
                    </div>
                    
                    <!-- Request Item -->
                    <div class="col py-0 my-0 border border-success border-dotted bg-dotted" style="--cz-bg-color: var(--bs-info-bg-subtle); --cz-dot-color: var(--bs-info)">
                        <div class="d-flex flex-column flex-xxl-row align-items-center justify-content-center">
                            <a class="hover-effect-scale rounded overflow-hidden" href="#" onclick="alert('Request Item feature coming soon!')">
                                <img src="/lendables/logo_askfor_600.png" 
                                     class="hover-effect-target" alt="Request a Lendable Item" style="display: block !important; width: 100%; height: auto; max-width: 150px;" 
                                     title="Request a Wished-for Lendable Item (no guarantees!)">
                            </a>
                        </div>
                    </div>
                    
                    <!-- Browse All -->
                    <div class="col py-0 my-0 border border-success border-dotted bg-dotted" style="--cz-bg-color: var(--bs-dark-bg-subtle); --cz-dot-color: var(--bs-dark)">
                        <div class="d-flex flex-column flex-xxl-row align-items-center justify-content-center">
                            <a class="hover-effect-scale rounded overflow-hidden" href="/browse">
                                <img src="/lendables/logo_browse.png" 
                                     class="hover-effect-target" alt="Browse All Lendables" style="display: block !important; width: 100%; height: auto; max-width: 150px;" 
                                     title="Browse (and Sort, and Filter) the Community's Lendables, to find what you need!">
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Accordion Sections -->
                <div class="row row-cols-1 row-cols-md-1 g-4 pt-3">
                    
                    <!-- Items I've Borrowed -->
                    <div class="col">
                        <div class="accordion" id="accordion1Example">
                            <div class="accordion-item">
                                <h3 class="accordion-header bg-primary-subtle px-3" id="heading1">
                                    <button type="button" class="accordion-button animate-underline" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                                        <span class="animate-target me-2">Items I've Borrowed (-)</span>
                                    </button>
                                </h3>
                                <div class="accordion-collapse collapse" id="collapse1" aria-labelledby="heading1" data-bs-parent="#accordion1Example">
                                    <div class="accordion-body pb-0">
                                        <span class="h6">You have no Borrowed Items. Do you want to <a href="/browse">Browse the Available Items</a>?</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- My Lendables Offered -->
                    <div class="col mt-2">
                        <div class="accordion" id="accordion2Example">
                            <div class="accordion-item">
                                <h3 class="accordion-header bg-primary-subtle px-3" id="heading2">
                                    <button type="button" class="accordion-button animate-underline" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                        <span class="animate-target me-2">My ({{ userItems|length }}) Lendables, Offered to Others</span>
                                    </button>
                                </h3>
                                <div class="accordion-collapse collapse" id="collapse2" aria-labelledby="heading2" data-bs-parent="#accordion2Example">
                                    <div class="accordion-body pb-0">
                                        {% if userItems and userItems|length > 0 %}
                                            <div class="row g-3">
                                                {% for item in userItems %}
                                                <div class="col-md-6 col-lg-4">
                                                    <div class="card border-0 shadow-sm h-100">
                                                        <div class="card-body p-3">
                                                            <div class="d-flex align-items-start mb-2">
                                                                {% set itemImage = item.primaryLogo ?: item.imageUrl %}
                                                                {% if itemImage %}
                                                                <img src="/lendable_items/{{ itemImage }}" 
                                                                     class="rounded me-3" 
                                                                     width="60" height="60" 
                                                                     style="object-fit: cover;"
                                                                     alt="{{ item.title }}"
                                                                     onerror="this.style.display='none'">
                                                                {% endif %}
                                                                <div class="flex-grow-1">
                                                                    <h6 class="card-title mb-1">{{ item.title }}</h6>
                                                                    <p class="text-muted small mb-1">{{ item.category }}</p>
                                                                    <span class="badge bg-{{ item.availability == 'available' ? 'success' : 'warning' }}">
                                                                        {{ item.availability|capitalize }}
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            <p class="card-text small text-truncate">{{ item.description }}</p>
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <small class="text-muted">${{ item.dailyRate }}/day</small>
                                                                <a href="/item/{{ item.id }}" class="btn btn-outline-primary btn-sm">View</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        {% else %}
                                            <div class="text-center py-4">
                                                <i class="fas fa-box-open text-muted mb-3" style="font-size: 3rem;"></i>
                                                <h6 class="text-muted">No items shared yet</h6>
                                                <p class="small text-muted">Create your first lendable item to start sharing with the community!</p>
                                                <a href="/create-item" class="btn btn-primary">Create First Item</a>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- My Items Out on Loan -->
                    <div class="col mt-2">
                        <div class="accordion" id="accordion3Example">
                            <div class="accordion-item">
                                <h3 class="accordion-header bg-primary-subtle px-3" id="heading3">
                                    <button type="button" class="accordion-button animate-underline" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                                        <span class="animate-target me-2">My Items Out on Loan (-)</span>
                                    </button>
                                </h3>
                                <div class="accordion-collapse collapse" id="collapse3" aria-labelledby="heading3" data-bs-parent="#accordion3Example">
                                    <div class="accordion-body pb-0">
                                        <span class="h6">You have nothing out on Loan. Do you want to <a href="#" onclick="alert('Create New Lendable Item feature coming soon!')">Create a Lendable Item</a>?</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- My Wish List -->
                    <div class="col mt-2">
                        <div class="accordion" id="accordion4Example">
                            <div class="accordion-item">
                                <h3 class="accordion-header bg-primary-subtle px-3" id="heading4">
                                    <button type="button" class="accordion-button animate-underline" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
                                        <span class="animate-target me-2">My Wish List (-)</span>
                                    </button>
                                </h3>
                                <div class="accordion-collapse collapse" id="collapse4" aria-labelledby="heading4" data-bs-parent="#accordion4Example">
                                    <div class="accordion-body pb-0">
                                        <span class="h6">You have no Wish List. Do you want to <a href="#" onclick="alert('Request Item feature coming soon!')">Create a Requested Item</a>?</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- My Draft Items -->
                    <div class="col mt-2">
                        <div class="accordion" id="accordion5Example">
                            <div class="accordion-item">
                                <h3 class="accordion-header bg-primary-subtle px-3" id="heading5">
                                    <button type="button" class="accordion-button animate-underline" data-bs-toggle="collapse" data-bs-target="#collapse5" aria-expanded="false" aria-controls="collapse5">
                                        <span class="animate-target me-2">My Draft Items (-)</span>
                                    </button>
                                </h3>
                                <div class="accordion-collapse collapse" id="collapse5" aria-labelledby="heading5" data-bs-parent="#accordion5Example">
                                    <div class="accordion-body pb-0">
                                        <span class="h6">You have no Drafts. Do you want to <a href="#" onclick="alert('Create Draft Item feature coming soon!')">Create a Draft Item</a>?</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Right Column - Newest Lendables -->
            <div class="col-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                <div class="row border border-success rounded-4 pt-2 px-2 table-responsive">
                    <div class="col-12 py-0 my-0 align-self-center text-center">
                        <div class="d-flex flex-column align-items-center justify-content-center">
                            <span class="h5 lh-1">Newest Lendables:<br></span>
                        </div>
                    </div>
                </div>
                
                <!-- Newest Items List -->
                {% if allItems and allItems|length > 0 %}
                    <div class="row g-2 mt-2">
                        {% for item in allItems|slice(0, 6) %}
                        <div class="col-md-6 col-lg-4">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-2">
                                    <div class="d-flex align-items-start mb-2">
                                        {% set itemImage = item.primaryLogo ?: item.imageUrl %}
                                        {% if itemImage %}
                                        <img src="/lendable_items/{{ itemImage }}" 
                                             class="rounded me-2" 
                                             width="40" height="40" 
                                             style="object-fit: cover;"
                                             alt="{{ item.title }}"
                                             onerror="this.style.display='none'">
                                        {% endif %}
                                        <div class="flex-grow-1">
                                            <h6 class="card-title mb-1 small">{{ item.title }}</h6>
                                            <p class="text-muted small mb-1">by {% if item.ownerShowName %}{{ item.ownerShowName }}{% else %}{{ item.ownerFirstName }}{% endif %}</p>
                                            <span class="badge bg-success small">Available</span>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">${{ item.dailyRate }}/day</small>
                                        <a href="/item/{{ item.id }}" class="btn btn-outline-primary btn-sm">View</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-search text-muted mb-3" style="font-size: 2rem;"></i>
                        <h6 class="text-muted">No items available</h6>
                        <p class="small text-muted">Check back later for new items from the community!</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </section>
</main>

{% endblock %}

{% block styles %}
<style>
.hover-effect-scale:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.border-dotted {
    border-style: dotted !important;
}

.bg-dotted {
    background-image: radial-gradient(circle, var(--cz-dot-color, #ccc) 1px, transparent 1px);
    background-size: 8px 8px;
}

.animate-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--bs-primary);
    transition: width 0.3s ease;
}

.animate-underline:hover::after {
    width: 100%;
}

.accordion-button {
    position: relative;
}

@media (max-width: 768px) {
    .col {
        padding: 0.5rem;
    }
    
    .accordion-body {
        padding: 1rem 0.75rem;
    }
}

/* Force action button images to display consistently across all browsers */
img[src*="/lendables/logo_"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 150px !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    background: transparent !important;
}

/* Ensure action button containers are visible */
.hover-effect-scale {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
}

.hover-effect-target {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
</style>

<!-- SweetAlert2 for Welcome Message -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- FontAwesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
{% endblock %}