@extends('layouts.opac')

@section('title', 'Virtual Shelves / Lists › MTU Library Catalog')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('opac.home') }}">Home</a>
    <span class="sep">›</span>
    <span>Lists</span>
@endsection

@section('sidebar')
    <div class="sidebar-section">
        <div class="sidebar-title">What are Lists?</div>
        <div style="padding:10px; font-size:11px; line-height:1.4; color:#555;">
            Lists (also known as Virtual Shelves) are collections of library items that you can curate. Public lists are visible to all patrons, while private lists are only visible to their creator.
        </div>
    </div>
@endsection

@section('content')
    <div style="width: 100%;">
        <h2 style="font-size: 16px; color: #2e2e4e; margin-bottom: 12px; border-bottom: 1px solid #d5d5d5; padding-bottom: 6px;">
            📚 Virtual Shelves / Public Lists
        </h2>

        @if(count($shelves) > 0)
            <table style="width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px;">
                <thead>
                    <tr style="background: #e8eef5; text-align: left;">
                        <th style="padding: 8px; border: 1px solid #ccc;">List Name</th>
                        <th style="padding: 8px; border: 1px solid #ccc;">Created By</th>
                        <th style="padding: 8px; border: 1px solid #ccc;">Type</th>
                        <th style="padding: 8px; border: 1px solid #ccc;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($shelves as $shelf)
                        <tr style="border-bottom: 1px solid #ddd;">
                            <td style="padding: 8px; border: 1px solid #ddd;">
                                <strong style="font-size: 13px; color: #1b4880;">{{ $shelf->shelfname }}</strong>
                            </td>
                            <td style="padding: 8px; border: 1px solid #ddd;">
                                {{ $shelf->firstname ?? 'System' }} {{ $shelf->surname ?? '' }}
                            </td>
                            <td style="padding: 8px; border: 1px solid #ddd;">
                                {{ $shelf->public ? 'Public' : 'Private' }}
                            </td>
                            <td style="padding: 8px; border: 1px solid #ddd;">
                                <a href="#" onclick="alert('Viewing list details is a prototype feature'); return false;" style="color: #4f7fb5; font-weight: bold;">View List</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div style="padding: 20px; background: #f9f9f9; border: 1px dashed #ccc; text-align: center; color: #777; font-size: 13px;">
                No public lists are currently available. Log in to create your own private or public virtual shelves.
            </div>
        @endif

        <div style="margin-top: 20px; padding: 15px; background: #f4f7f6; border: 1px solid #e2e8e5; border-radius: 4px;">
            <h4 style="margin: 0 0 10px 0; color: #2e2e4e;">Create a New Virtual Shelf</h4>
            <p style="font-size: 11px; color: #666; margin-bottom: 12px;">You must be logged in to create a list.</p>
            <form onsubmit="alert('Please log in to your library account to create shelves.'); return false;">
                <div style="margin-bottom: 8px;">
                    <label style="display: block; font-size: 12px; font-weight: bold; margin-bottom: 4px;">List Name:</label>
                    <input type="text" placeholder="e.g. My Study Books" style="width: 100%; max-width: 300px; padding: 5px; border: 1px solid #aaa; font-size: 12px;" disabled>
                </div>
                <button type="submit" style="padding: 6px 12px; background: #aaa; color: #fff; border: none; border-radius: 2px; font-size: 12px; cursor: not-allowed;" disabled>Create Shelf</button>
            </form>
        </div>
    </div>
@endsection