@extends('layouts.app')

@section('mobile-title', 'Delete Folder')
@section('mobile-subtitle', $folder->name)
@section('mobile-back', route('documents.folders.show', $folder))

@section('content')
    <div class="mx-auto max-w-2xl">
        <h1 class="text-3xl font-bold">Delete Folder</h1>
        <p class="mt-2 break-words text-sm text-[var(--construct-muted)]">Review the contents of <strong>{{ $folder->name }}</strong> before deleting.</p>

        <div class="mt-6 rounded border border-red-200 bg-red-50 p-5 text-sm text-red-900">
            Permanently deletes this folder, its subfolders, all documents, previous file versions, and shared links. This cannot be undone.
        </div>

        <dl class="mt-5 grid grid-cols-2 gap-4 rounded border border-[var(--construct-border)] bg-white p-5 text-sm">
            <div><dt class="text-[var(--construct-muted)]">Subfolders</dt><dd class="mt-1 text-xl font-bold">{{ $summary['subfolders'] }}</dd></div>
            <div><dt class="text-[var(--construct-muted)]">Documents</dt><dd class="mt-1 text-xl font-bold">{{ $summary['documents'] }}</dd></div>
            <div><dt class="text-[var(--construct-muted)]">Previous file versions</dt><dd class="mt-1 text-xl font-bold">{{ $summary['versions'] }}</dd></div>
            <div><dt class="text-[var(--construct-muted)]">Shared links</dt><dd class="mt-1 text-xl font-bold">{{ $summary['shares'] }}</dd></div>
        </dl>
        <p class="mt-2 text-xs text-[var(--construct-muted)]">Counts include archived documents and subfolders.</p>

        @if ($summary['legal_holds'])
            <div class="mt-5 rounded border border-red-200 bg-red-50 p-4 text-sm font-semibold text-red-900">
                Deletion is blocked: {{ $summary['legal_holds'] }} document(s) are on legal hold. Release their legal holds before deleting this folder.
            </div>
        @endif

        <form method="POST" action="{{ route('documents.folders.destroy', $folder) }}" class="mt-5 rounded border border-[var(--construct-border)] bg-white p-5">
            @csrf
            @method('DELETE')
            <label for="confirmation" class="block text-sm font-semibold">Type the folder name to confirm:</label>
            <div class="mt-2 break-all text-sm font-bold">{{ $folder->name }}</div>
            <input id="confirmation" name="confirmation" value="{{ old('confirmation') }}" required maxlength="255" autocomplete="off" class="mt-3 w-full rounded border border-[var(--construct-border)] px-3 py-2 text-sm">
            @error('confirmation')
                <p class="mt-2 text-sm font-semibold text-red-700">{{ $message }}</p>
            @enderror
            <div class="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                <a href="{{ route('documents.folders.show', $folder) }}" class="rounded border border-[var(--construct-border)] px-4 py-2 text-center text-sm font-bold">Cancel</a>
                <button @disabled($summary['legal_holds'] > 0) class="rounded bg-red-700 px-4 py-2 text-sm font-bold text-white disabled:cursor-not-allowed disabled:opacity-50">Delete Folder Permanently</button>
            </div>
        </form>
    </div>
@endsection