@extends('layouts.master')

@section('content')

<style>
    .material-symbols-outlined {
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
    }

    .terminal-bg {
        background: linear-gradient(180deg, #10141a 0%, #0d1117 100%);
    }

    .bg-primary {
        background-color: #00ff9d;
    }

    .text-surface {
        color: #000;
    }

    .neon-border {
        border: 1px solid rgba(0, 255, 157, 0.15);
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>

<main class="pt-8 p-12 min-h-screen terminal-bg text-white">

    <!-- HEADER -->
    <div class="flex justify-between items-end mb-12">

        <div>

            <nav class="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 mb-4">

                <span>ADMIN</span>

                <span class="material-symbols-outlined text-[10px]">
                    chevron_right
                </span>

                <span class="text-primary underline decoration-primary/30 underline-offset-4">
                    PAGE_MANAGEMENT
                </span>

            </nav>

            <h1 class="text-5xl font-black tracking-tight mb-3">
                Page Registry
            </h1>

            <p class="text-gray-400 text-sm">
                Manage multilingual dynamic application pages.
            </p>

        </div>

        <!-- CREATE BUTTON -->
        <a href="{{ route('pages.create') }}"
            class="group flex items-center gap-2 px-8 py-4 bg-primary text-black rounded-2xl font-black shadow-[0_0_20px_rgba(0,255,157,0.35)] hover:shadow-[0_0_30px_rgba(0,255,157,0.55)] transition-all duration-300">

            <span class="material-symbols-outlined group-hover:rotate-90 transition-transform duration-300">
                add_circle
            </span>

            Create Page

        </a>

    </div>

    <!-- LANGUAGE SWITCH -->
    <div class="flex gap-3 mb-10">

        @foreach($languages as $l)

        <a href="{{ request()->fullUrlWithQuery(['lang' => $l->code]) }}"
            class="
                px-5
                py-2.5
                rounded-xl
                text-xs
                font-black
                uppercase
                tracking-[0.2em]
                border
                transition-all
                duration-300

                {{ $lang == $l->code
                    ? 'bg-primary text-black border-primary shadow-[0_0_15px_rgba(0,255,157,0.4)]'
                    : 'text-gray-300 border-gray-700 hover:border-primary hover:text-primary'
                }}
            ">

            {{ strtoupper($l->code) }}

        </a>

        @endforeach

    </div>

    <!-- PAGE GRID -->
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">

        @forelse($pages as $page)

        <!-- CARD -->
        <div class="bg-[#111827] rounded-3xl neon-border p-6 hover:-translate-y-1 hover:border-primary/30 transition-all duration-300">

            <!-- TOP -->
            <div class="flex items-start justify-between mb-5">

                <div>

                    <h2 class="text-2xl font-black mb-2 tracking-tight">
                        {{ $page->page_name }}
                    </h2>

                    <p class="text-[11px] uppercase tracking-[0.25em] text-primary">
                        {{ $page->page_slug }}
                    </p>

                </div>

                <span class="px-3 py-1 text-[10px] rounded-full bg-primary/10 text-primary border border-primary/20 font-bold uppercase tracking-wider">
                    Active
                </span>

            </div>

            <!-- CONTENT -->
            <div class="mb-6 min-h-[60px]">

                <p class="text-sm text-gray-400 leading-relaxed line-clamp-2">

                    {{ $page->preview ?: 'No preview available for this language.' }}

                </p>

            </div>

            <!-- FOOTER -->
            <div class="flex items-center justify-between pt-4 border-t border-gray-800">

                <span class="text-[10px] uppercase tracking-[0.2em] text-gray-500">

                </span>

                <a href="{{ route('pages.edit', $page->id) }}"
                    class="inline-flex items-center gap-2 text-primary hover:text-white transition-all duration-200 font-bold">

                    <span>Edit</span>

                    <span class="material-symbols-outlined text-[18px]">
                        arrow_forward
                    </span>

                </a>

            </div>

        </div>

        @empty

        <!-- EMPTY -->
        <div class="col-span-full">

            <div class="rounded-3xl border border-dashed border-gray-700 bg-[#111827]/40 p-20 text-center">

                <span class="material-symbols-outlined text-7xl text-gray-600 mb-5">
                    description
                </span>

                <h3 class="text-3xl font-black text-gray-300 mb-3">
                    No Pages Found
                </h3>

                <p class="text-gray-500 mb-8">
                    Create your first multilingual dynamic page.
                </p>

                <a href="{{ route('pages.create') }}"
                    class="inline-flex items-center gap-3 px-8 py-4 bg-primary text-black rounded-2xl font-black shadow-[0_0_25px_rgba(0,255,157,0.35)] hover:shadow-[0_0_35px_rgba(0,255,157,0.55)] transition-all duration-300">

                    <span class="material-symbols-outlined">
                        add
                    </span>

                    Create Page

                </a>

            </div>

        </div>

        @endforelse

    </div>

</main>

@endsection