@extends('layouts.opac')

@section('title', 'Tag Cloud › MTU Library Catalog')

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

@section('sidebar')
    <div class="sidebar-section">
        <div class="sidebar-title">What are Tags?</div>
        <div style="padding:10px; font-size:11px; line-height:1.4; color:#555;">
            Tags are subject keywords added by library patrons to catalog resources. Click on any keyword below to find related books in the system.
        </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;">
            🏷️ Subject Tag Cloud
        </h2>

        <div style="background: #fafafa; border: 1px dashed #ccc; padding: 30px; border-radius: 4px; text-align: center; line-height: 2.8; margin-top: 15px;">
            @foreach($tags as $tag)
                @php
                    // Map weight (3 to 12) to font size in pixels (from 11px to 28px)
                    $size = 10 + ($tag->weight * 1.5);
                @endphp
                <a href="{{ route('opac.search', ['q' => $tag->name, 'idx' => 'su']) }}" 
                   style="font-size: {{ $size }}px; font-weight: bold; margin: 0 10px; color: #1b4880; text-decoration: none; display: inline-block; transition: transform 0.2s;"
                   onmouseover="this.style.color='#c32d2d'; this.style.transform='scale(1.1)';" 
                   onmouseout="this.style.color='#1b4880'; this.style.transform='scale(1.0)';">
                    {{ $tag->name }}
                </a>
            @endforeach
        </div>

        <div style="margin-top: 25px; padding: 15px; background: #f4f7f6; border: 1px solid #e2e8e5; border-radius: 4px;">
            <h4 style="margin: 0 0 10px 0; color: #2e2e4e;">Add a Tag to the Catalog</h4>
            <p style="font-size: 11px; color: #666; margin-bottom: 12px;">Help tag catalog listings so other students can find them easily.</p>
            <form onsubmit="alert('Please log in to your library account to tag items.'); return false;">
                <input type="text" placeholder="e.g. marine-conservation" style="padding: 5px; border: 1px solid #aaa; font-size: 12px; width: 220px;" disabled>
                <button type="submit" style="padding: 5px 12px; background: #aaa; color: #fff; border: none; border-radius: 2px; font-size: 12px; cursor: not-allowed;" disabled>Add Tag</button>
            </form>
        </div>
    </div>
@endsection