Upload web/src/views/browse.php with huggingface_hub

ffc3d8c verified 8 months ago

12.4 kB

<?php
/**
 * Browse / Document Listing
 *
 * Variables:
 *   $collection     - Collection slug (source_section)
 *   $collectionName - Human-readable collection name
 *   $documents      - Array of documents with: id, file_path, pages, file_size, processed_at
 *   $total          - Total document count
 *   $page           - Current page number
 *   $perPage        - Results per page
 *   $sort           - Current sort field (name, pages, size)
 */

$page = $page ?? 1;
$perPage = $perPage ?? 25;
$sort = $sort ?? 'name';
$totalPages = ($perPage > 0) ? (int)ceil(($total ?? 0) / $perPage) : 1;

/**
 * Format bytes to human-readable size
 */
function formatSizeBrowse(int $bytes): string {
    if ($bytes >= 1073741824) {
        return number_format($bytes / 1073741824, 1) . ' GB';
    } elseif ($bytes >= 1048576) {
        return number_format($bytes / 1048576, 1) . ' MB';
    } elseif ($bytes >= 1024) {
        return number_format($bytes / 1024, 1) . ' KB';
    }
    return $bytes . ' B';
}

/**
 * Extract filename from full path
 */
function extractFilename(string $path): string {
    return basename($path);
}

/**
 * Build sort URL preserving current parameters
 */
function sortUrl(string $collection, string $field, string $currentSort): string {
    $dir = 'asc';
    if ($field === $currentSort) {
        $dir = 'desc';
    }
    return '/browse/' . urlencode($collection) . '?sort=' . urlencode($field) . '&dir=' . $dir;
}

/**
 * Sort indicator arrow
 */
function sortIndicator(string $field, string $currentSort): string {
    if ($field === $currentSort) {
        return '<svg class="inline h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>';
    }
    return '<svg class="inline h-4 w-4 ml-1 opacity-0 group-hover:opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></svg>';
}

$title = htmlspecialchars($collectionName ?? 'Browse') . ' - Research Document Archive';
$content = '';
ob_start();
?>

<!-- Header -->
<div class="mb-5">
    <!-- Breadcrumb -->
    <nav class="flex items-center text-xs text-gray-500 mb-3" aria-label="Breadcrumb">
        <a href="/" class="hover:text-gray-700 transition-colors">Home</a>
        <svg class="h-3 w-3 mx-1.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
        </svg>
        <span class="text-gray-900 font-medium"><?= htmlspecialchars($collectionName ?? '') ?></span>
    </nav>
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold text-gray-900"><?= htmlspecialchars($collectionName ?? 'Documents') ?></h1>
            <p class="mt-0.5 text-sm text-gray-600">
                <?= number_format($total ?? 0) ?> document<?= ($total ?? 0) !== 1 ? 's' : '' ?> in this collection
            </p>
        </div>
        <!-- Sort Controls -->
        <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-500">Sort by:</span>
            <div class="inline-flex rounded-lg border border-gray-200 bg-white shadow-sm">
                <a href="<?= sortUrl($collection, 'name', $sort) ?>"
                   class="group px-3 py-2 text-sm font-medium rounded-l-lg transition-colors
                          <?= $sort === 'name' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' ?>">
                    Name<?= sortIndicator('name', $sort) ?>
                </a>
                <a href="<?= sortUrl($collection, 'pages', $sort) ?>"
                   class="group px-3 py-2 text-sm font-medium border-l border-gray-200 transition-colors
                          <?= $sort === 'pages' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' ?>">
                    Pages<?= sortIndicator('pages', $sort) ?>
                </a>
                <a href="<?= sortUrl($collection, 'size', $sort) ?>"
                   class="group px-3 py-2 text-sm font-medium border-l border-gray-200 rounded-r-lg transition-colors
                          <?= $sort === 'size' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' ?>">
                    Size<?= sortIndicator('size', $sort) ?>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- Document Table -->
<?php if (!empty($documents)): ?>
    <!-- Desktop Table -->
    <div class="hidden md:block bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-4 py-2.5 text-left text-[11px] font-semibold text-gray-500 uppercase tracking-wider">
                        Document Name
                    </th>
                    <th scope="col" class="px-4 py-2.5 text-center text-[11px] font-semibold text-gray-500 uppercase tracking-wider w-20">
                        Pages
                    </th>
                    <th scope="col" class="px-4 py-2.5 text-center text-[11px] font-semibold text-gray-500 uppercase tracking-wider w-24">
                        Size
                    </th>
                    <th scope="col" class="px-4 py-2.5 text-center text-[11px] font-semibold text-gray-500 uppercase tracking-wider w-28">
                        Processed
                    </th>
                    <th scope="col" class="relative px-4 py-2.5 w-16">
                        <span class="sr-only">View</span>
                    </th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php foreach ($documents as $doc): ?>
                    <?php $filename = extractFilename($doc['file_path'] ?? ''); ?>
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-2.5">
                            <a href="/document/<?= (int)($doc['id'] ?? 0) ?>" class="group flex items-center">
                                <svg class="flex-shrink-0 h-4 w-4 text-red-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                </svg>
                                <span class="text-xs font-medium text-gray-900 group-hover:text-blue-600 transition-colors truncate max-w-md">
                                    <?= htmlspecialchars($filename) ?>
                                </span>
                            </a>
                            <?php if (!empty($doc['topics'])): ?>
                                <div class="mt-1 flex flex-wrap gap-1">
                                    <?php foreach ($doc['topics'] as $topic => $score):
                                        if ($score < 0.3) continue;
                                    ?>
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-50 text-indigo-700">
                                            <?= htmlspecialchars($topic) ?>
                                        </span>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </td>
                        <td class="px-4 py-2.5 text-center text-xs text-gray-600">
                            <?= number_format($doc['total_pages'] ?? 0) ?>
                        </td>
                        <td class="px-4 py-2.5 text-center text-xs text-gray-600">
                            <?= formatSizeBrowse($doc['file_size'] ?? 0) ?>
                        </td>
                        <td class="px-4 py-2.5 text-center text-xs text-gray-500">
                            <?php if (!empty($doc['processed_at'])): ?>
                                <?= date('M j, Y', strtotime($doc['processed_at'])) ?>
                            <?php else: ?>
                                <span class="text-gray-400">&mdash;</span>
                            <?php endif; ?>
                        </td>
                        <td class="px-4 py-2.5 text-right">
                            <a href="/document/<?= (int)($doc['id'] ?? 0) ?>"
                               class="text-blue-600 hover:text-blue-800 text-xs font-medium transition-colors">
                                View
                            </a>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <!-- Mobile Card List -->
    <div class="md:hidden space-y-3">
        <?php foreach ($documents as $doc): ?>
            <?php $filename = extractFilename($doc['file_path'] ?? ''); ?>
            <a href="/document/<?= (int)($doc['id'] ?? 0) ?>"
               class="block bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
                <div class="flex items-start space-x-3">
                    <svg class="flex-shrink-0 h-5 w-5 text-red-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                    </svg>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-medium text-gray-900 truncate"><?= htmlspecialchars($filename) ?></p>
                        <div class="mt-2 flex items-center space-x-4 text-xs text-gray-500">
                            <span><?= number_format($doc['total_pages'] ?? 0) ?> pages</span>
                            <span><?= formatSizeBrowse($doc['file_size'] ?? 0) ?></span>
                            <?php if (!empty($doc['processed_at'])): ?>
                                <span><?= date('M j, Y', strtotime($doc['processed_at'])) ?></span>
                            <?php endif; ?>
                        </div>
                    </div>
                    <svg class="flex-shrink-0 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                    </svg>
                </div>
            </a>
        <?php endforeach; ?>
    </div>
    <!-- Pagination -->
    <?php
    $currentPage = $page;
    $baseUrl = '/browse/' . urlencode($collection) . '?sort=' . urlencode($sort);
    include __DIR__ . '/partials/pagination.php';
    ?>
<?php else: ?>
    <div class="text-center py-10 bg-white rounded-lg border border-gray-200">
        <svg class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12H9.75m0 0l3-3m-3 3l3 3m2.25-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
        </svg>
        <h3 class="mt-3 text-sm font-medium text-gray-900">No documents found</h3>
        <p class="mt-1 text-xs text-gray-500">This collection does not contain any documents yet.</p>
        <a href="/" class="mt-4 inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors">
            Back to Home
        </a>
    </div>
<?php endif; ?>
<?php
$content = ob_get_clean();
include __DIR__ . '/layout.php';
?>

	<?php
	/**
	* Browse / Document Listing
	*
	* Variables:
	* $collection - Collection slug (source_section)
	* $collectionName - Human-readable collection name
	* $documents - Array of documents with: id, file_path, pages, file_size, processed_at
	* $total - Total document count
	* $page - Current page number
	* $perPage - Results per page
	* $sort - Current sort field (name, pages, size)
	*/

	$page = $page ?? 1;
	$perPage = $perPage ?? 25;
	$sort = $sort ?? 'name';
	$totalPages = ($perPage > 0) ? (int)ceil(($total ?? 0) / $perPage) : 1;

	/**
	* Format bytes to human-readable size
	*/
	function formatSizeBrowse(int $bytes): string {
	if ($bytes >= 1073741824) {
	return number_format($bytes / 1073741824, 1) . ' GB';
	} elseif ($bytes >= 1048576) {
	return number_format($bytes / 1048576, 1) . ' MB';
	} elseif ($bytes >= 1024) {
	return number_format($bytes / 1024, 1) . ' KB';
	}
	return $bytes . ' B';
	}

	/**
	* Extract filename from full path
	*/
	function extractFilename(string $path): string {
	return basename($path);
	}

	/**
	* Build sort URL preserving current parameters
	*/
	function sortUrl(string $collection, string $field, string $currentSort): string {
	$dir = 'asc';
	if ($field === $currentSort) {
	$dir = 'desc';
	}
	return '/browse/' . urlencode($collection) . '?sort=' . urlencode($field) . '&dir=' . $dir;
	}

	/**
	* Sort indicator arrow
	*/
	function sortIndicator(string $field, string $currentSort): string {
	if ($field === $currentSort) {
	return '<svg class="inline h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>';
	}
	return '<svg class="inline h-4 w-4 ml-1 opacity-0 group-hover:opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></svg>';
	}

	$title = htmlspecialchars($collectionName ?? 'Browse') . ' - Research Document Archive';
	$content = '';
	ob_start();
	?>

	<!-- Header -->
	<div class="mb-5">
	<!-- Breadcrumb -->
	<nav class="flex items-center text-xs text-gray-500 mb-3" aria-label="Breadcrumb">
	<a href="/" class="hover:text-gray-700 transition-colors">Home</a>
	<svg class="h-3 w-3 mx-1.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
	<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
	</svg>
	<span class="text-gray-900 font-medium"><?= htmlspecialchars($collectionName ?? '') ?></span>
	</nav>

	<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
	<div>
	<h1 class="text-xl font-bold text-gray-900"><?= htmlspecialchars($collectionName ?? 'Documents') ?></h1>
	<p class="mt-0.5 text-sm text-gray-600">
	<?= number_format($total ?? 0) ?> document<?= ($total ?? 0) !== 1 ? 's' : '' ?> in this collection
	</p>
	</div>

	<!-- Sort Controls -->
	<div class="flex items-center space-x-2">
	<span class="text-sm text-gray-500">Sort by:</span>
	<div class="inline-flex rounded-lg border border-gray-200 bg-white shadow-sm">
	<a href="<?= sortUrl($collection, 'name', $sort) ?>"
	class="group px-3 py-2 text-sm font-medium rounded-l-lg transition-colors
	<?= $sort === 'name' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' ?>">
	Name<?= sortIndicator('name', $sort) ?>
	</a>
	<a href="<?= sortUrl($collection, 'pages', $sort) ?>"
	class="group px-3 py-2 text-sm font-medium border-l border-gray-200 transition-colors
	<?= $sort === 'pages' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' ?>">
	Pages<?= sortIndicator('pages', $sort) ?>
	</a>
	<a href="<?= sortUrl($collection, 'size', $sort) ?>"
	class="group px-3 py-2 text-sm font-medium border-l border-gray-200 rounded-r-lg transition-colors
	<?= $sort === 'size' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' ?>">
	Size<?= sortIndicator('size', $sort) ?>
	</a>
	</div>
	</div>
	</div>
	</div>

	<!-- Document Table -->
	<?php if (!empty($documents)): ?>

	<!-- Desktop Table -->
	<div class="hidden md:block bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-4 py-2.5 text-left text-[11px] font-semibold text-gray-500 uppercase tracking-wider">
	Document Name
	</th>
	<th scope="col" class="px-4 py-2.5 text-center text-[11px] font-semibold text-gray-500 uppercase tracking-wider w-20">
	Pages
	</th>
	<th scope="col" class="px-4 py-2.5 text-center text-[11px] font-semibold text-gray-500 uppercase tracking-wider w-24">
	Size
	</th>
	<th scope="col" class="px-4 py-2.5 text-center text-[11px] font-semibold text-gray-500 uppercase tracking-wider w-28">
	Processed
	</th>
	<th scope="col" class="relative px-4 py-2.5 w-16">
	<span class="sr-only">View</span>
	</th>
	</tr>
	</thead>
	<tbody class="divide-y divide-gray-100">
	<?php foreach ($documents as $doc): ?>
	<?php $filename = extractFilename($doc['file_path'] ?? ''); ?>
	<tr class="hover:bg-gray-50 transition-colors">
	<td class="px-4 py-2.5">
	<a href="/document/<?= (int)($doc['id'] ?? 0) ?>" class="group flex items-center">
	<svg class="flex-shrink-0 h-4 w-4 text-red-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
	<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
	</svg>
	<span class="text-xs font-medium text-gray-900 group-hover:text-blue-600 transition-colors truncate max-w-md">
	<?= htmlspecialchars($filename) ?>
	</span>
	</a>
	<?php if (!empty($doc['topics'])): ?>
	<div class="mt-1 flex flex-wrap gap-1">
	<?php foreach ($doc['topics'] as $topic => $score):
	if ($score < 0.3) continue;
	?>
	<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-50 text-indigo-700">
	<?= htmlspecialchars($topic) ?>
	</span>
	<?php endforeach; ?>
	</div>
	<?php endif; ?>
	</td>
	<td class="px-4 py-2.5 text-center text-xs text-gray-600">
	<?= number_format($doc['total_pages'] ?? 0) ?>
	</td>
	<td class="px-4 py-2.5 text-center text-xs text-gray-600">
	<?= formatSizeBrowse($doc['file_size'] ?? 0) ?>
	</td>
	<td class="px-4 py-2.5 text-center text-xs text-gray-500">
	<?php if (!empty($doc['processed_at'])): ?>
	<?= date('M j, Y', strtotime($doc['processed_at'])) ?>
	<?php else: ?>
	<span class="text-gray-400">—</span>
	<?php endif; ?>
	</td>
	<td class="px-4 py-2.5 text-right">
	<a href="/document/<?= (int)($doc['id'] ?? 0) ?>"
	class="text-blue-600 hover:text-blue-800 text-xs font-medium transition-colors">
	View
	</a>
	</td>
	</tr>
	<?php endforeach; ?>
	</tbody>
	</table>
	</div>

	<!-- Mobile Card List -->
	<div class="md:hidden space-y-3">
	<?php foreach ($documents as $doc): ?>
	<?php $filename = extractFilename($doc['file_path'] ?? ''); ?>
	<a href="/document/<?= (int)($doc['id'] ?? 0) ?>"
	class="block bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
	<div class="flex items-start space-x-3">
	<svg class="flex-shrink-0 h-5 w-5 text-red-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
	<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
	</svg>
	<div class="min-w-0 flex-1">
	<p class="text-sm font-medium text-gray-900 truncate"><?= htmlspecialchars($filename) ?></p>
	<div class="mt-2 flex items-center space-x-4 text-xs text-gray-500">
	<span><?= number_format($doc['total_pages'] ?? 0) ?> pages</span>
	<span><?= formatSizeBrowse($doc['file_size'] ?? 0) ?></span>
	<?php if (!empty($doc['processed_at'])): ?>
	<span><?= date('M j, Y', strtotime($doc['processed_at'])) ?></span>
	<?php endif; ?>
	</div>
	</div>
	<svg class="flex-shrink-0 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
	<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
	</svg>
	</div>
	</a>
	<?php endforeach; ?>
	</div>

	<!-- Pagination -->
	<?php
	$currentPage = $page;
	$baseUrl = '/browse/' . urlencode($collection) . '?sort=' . urlencode($sort);
	include __DIR__ . '/partials/pagination.php';
	?>

	<?php else: ?>
	<div class="text-center py-10 bg-white rounded-lg border border-gray-200">
	<svg class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
	<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12H9.75m0 0l3-3m-3 3l3 3m2.25-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
	</svg>
	<h3 class="mt-3 text-sm font-medium text-gray-900">No documents found</h3>
	<p class="mt-1 text-xs text-gray-500">This collection does not contain any documents yet.</p>
	<a href="/" class="mt-4 inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors">
	Back to Home
	</a>
	</div>
	<?php endif; ?>

	<?php
	$content = ob_get_clean();
	include __DIR__ . '/layout.php';
	?>