@extends('layouts.app')

@section('title', 'Changes · ' . $document->title . ' · ' . config('app.name'))
@section('page-title', 'Version Changes')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h2 class="h5 fw-semibold mb-1">{{ $document->title }} &middot; Version {{ $currentVersion->version_number }}</h2>
            <span class="text-secondary small">
                Saved by {{ $currentVersion->editor->name }} &middot; {{ $currentVersion->created_at->format('d M Y, h:i A') }}
            </span>
        </div>
        <a href="{{ route('documents.show', $document) }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left"></i> Back to Document</a>
    </div>

    <div class="d-flex align-items-center gap-3 small text-secondary mb-2">
        <span><span class="d-inline-block rounded-1" style="width:.7rem;height:.7rem;background:#1e824c;"></span> Added</span>
        <span><span class="d-inline-block rounded-1" style="width:.7rem;height:.7rem;background:#c0392b;"></span> Removed</span>
        <span class="fst-italic">Only changes made in the in-browser editor are tracked — versions uploaded as a file show no markup.</span>
    </div>

    <div id="changes-status" class="text-secondary small mb-2">Loading document&hellip;</div>
    <div id="changes-root"
         class="border rounded bg-white"
         style="height: 75vh; overflow: auto;"
         data-document-url="{{ route('documents.download', [$document, $currentVersion->version_number]) }}"
         data-file-name="{{ \Illuminate\Support\Str::slug($document->title) }}.docx"
    ></div>

    @push('scripts')
        @vite(['resources/js/document-changes.js'])
    @endpush
@endsection