<?php
$esc = fn(string $v): string => htmlspecialchars($v, ENT_QUOTES, 'UTF-8');
$siteName = Setting::get('site_name', 'My Site');
$sepValue = $s['seo_title_separator'];

$tabs = [
    'pages'     => ['label' => 'Pages',     'icon' => 'M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75'],
    'social'    => ['label' => 'Social',    'icon' => 'M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z'],
    'sitemap'   => ['label' => 'Sitemap',   'icon' => 'M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z'],
    'indexing'  => ['label' => 'Indexing',  'icon' => 'M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88'],
    'robots'    => ['label' => 'Robots.txt','icon' => '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.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.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'],
    'advanced'  => ['label' => 'Advanced',  'icon' => 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z'],
    'analytics' => ['label' => 'Analytics', 'icon' => 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z'],
    'help'      => ['label' => 'Help',      'icon' => 'M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z'],
];

$subTabs = [
    'home'      => ['label' => 'Homepage',  'icon' => 'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'],
    'video'     => ['label' => 'Video',     'icon' => 'M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z'],
    'category'  => ['label' => 'Category',  'icon' => 'M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25a2.25 2.25 0 01-2.25-2.25v-2.25z'],
    'tag'       => ['label' => 'Tag',       'icon' => 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z'],
    'performer' => ['label' => 'Pornstar',  'icon' => 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z'],
    'channel'    => ['label' => 'Channel',    'icon' => 'M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0112 18.375m8.625-12.75c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m0-3.75h-7.5A1.125 1.125 0 0012 5.625m8.625 0H12m0 0V5.625m0 0c0-.621-.504-1.125-1.125-1.125H3.375C2.754 4.5 2.25 5.004 2.25 5.625'],
    'album'     => ['label' => 'Album',     'icon' => 'M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5z'],
    'album_listing' => ['label' => 'Albums Page', 'icon' => 'M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5z'],
    'search'    => ['label' => 'Search',    'icon' => 'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'],
    'page'      => ['label' => 'CMS Page',  'icon' => '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.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.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'],
];

$pageTypes = [
    'home' => [
        'title' => 'Homepage', 'desc' => 'Configure how your homepage appears in search results.',
        'titleKey' => 'seo_home_title', 'descKey' => 'seo_home_meta_description',
        'titleVars' => ['{site_name}' => 'Your site name', '{site_description}' => 'Your site tagline', '{count}' => 'Total videos on the site (all types)', '{type}' => 'Video type (Straight, Gay, Hentai)', '{sep}' => 'Title separator'],
        'descVars' => ['{site_name}' => 'Your site name', '{site_description}' => 'Your site tagline', '{count}' => 'Total videos on the site (all types)', '{type}' => 'Video type (Straight, Gay, Hentai)'],
        'sampleUrl' => '/', 'hasPagination' => true,
    ],
    'video' => [
        'title' => 'Video Page', 'desc' => 'Configure how individual video pages appear in search results.',
        'titleKey' => 'seo_pattern_video', 'descKey' => 'seo_desc_video',
        'titleVars' => ['{title}' => 'Video title', '{pornstars}' => 'Pornstar names (comma-separated)', '{categories}' => 'All categories (comma-separated)', '{tags}' => 'All tags (comma-separated)', '{channels}' => 'All channels (comma-separated)', '{category}' => 'Primary category', '{type}' => 'Video type (Straight, Gay, Hentai)', '{sep}' => 'Title separator', '{site_name}' => 'Your site name'],
        'descVars' => ['{title}' => 'Video title', '{description}' => 'Full video description', '{description_short}' => 'First 100 chars of description', '{pornstars}' => 'Pornstar names (comma-separated)', '{categories}' => 'All categories (comma-separated)', '{tags}' => 'All tags (comma-separated)', '{channels}' => 'All channels (comma-separated)', '{category}' => 'Primary category', '{duration}' => 'Duration (e.g. 12:34)', '{views}' => 'View count (e.g. 1.2K)', '{type}' => 'Video type (Straight, Gay, Hentai)', '{site_name}' => 'Your site name'],
        'sampleUrl' => '/video/amazing-video-title', 'hasPagination' => false,
    ],
    'category' => [
        'title' => 'Category Page', 'desc' => 'Configure how category listing pages appear in search results.',
        'titleKey' => 'seo_pattern_category', 'descKey' => 'seo_desc_category',
        'titleVars' => ['{name}' => 'Category name', '{count}' => 'Video count in this category', '{type}' => 'Video type (Straight, Gay, Hentai)', '{sep}' => 'Title separator', '{site_name}' => 'Your site name'],
        'descVars' => ['{name}' => 'Category name', '{description}' => 'Full category description', '{description_short}' => 'First 100 chars of description', '{count}' => 'Video count in this category', '{type}' => 'Video type (Straight, Gay, Hentai)', '{site_name}' => 'Your site name'],
        'sampleUrl' => '/category/category-name', 'hasPagination' => true,
    ],
    'tag' => [
        'title' => 'Tag Page', 'desc' => 'Configure how tag pages appear in search results.',
        'titleKey' => 'seo_pattern_tag', 'descKey' => 'seo_desc_tag',
        'titleVars' => ['{name}' => 'Tag name', '{count}' => 'Video count with this tag', '{type}' => 'Video type (Straight, Gay, Hentai)', '{sep}' => 'Title separator', '{site_name}' => 'Your site name'],
        'descVars' => ['{name}' => 'Tag name', '{count}' => 'Video count with this tag', '{type}' => 'Video type (Straight, Gay, Hentai)', '{site_name}' => 'Your site name'],
        'sampleUrl' => '/tag/tag-name', 'hasPagination' => true,
    ],
    'performer' => [
        'title' => 'Pornstar Page', 'desc' => 'Configure how pornstar pages appear in search results.',
        'titleKey' => 'seo_pattern_performer', 'descKey' => 'seo_desc_performer',
        'titleVars' => ['{name}' => 'Pornstar name', '{count}' => 'Video count for this pornstar', '{type}' => 'Video type (Straight, Gay, Hentai)', '{sep}' => 'Title separator', '{site_name}' => 'Your site name'],
        'descVars' => ['{name}' => 'Pornstar name', '{bio}' => 'Full pornstar bio', '{bio_short}' => 'First 100 chars of bio', '{count}' => 'Video count for this pornstar', '{type}' => 'Video type (Straight, Gay, Hentai)', '{site_name}' => 'Your site name'],
        'sampleUrl' => '/pornstar/pornstar-name', 'hasPagination' => true,
    ],
    'channel' => [
        'title' => 'Channel Page', 'desc' => 'Configure how channel pages appear in search results.',
        'titleKey' => 'seo_pattern_channel', 'descKey' => 'seo_desc_channel',
        'titleVars' => ['{name}' => 'Channel name', '{count}' => 'Video count for this channel', '{type}' => 'Video type (Straight, Gay, Hentai)', '{sep}' => 'Title separator', '{site_name}' => 'Your site name'],
        'descVars' => ['{name}' => 'Channel name', '{description}' => 'Full channel description', '{description_short}' => 'First 100 chars of description', '{count}' => 'Video count for this channel', '{type}' => 'Video type (Straight, Gay, Hentai)', '{site_name}' => 'Your site name'],
        'sampleUrl' => '/channel/channel-name', 'hasPagination' => true,
    ],
    'album' => [
        'title' => 'Album Page', 'desc' => 'Configure how single album (gallery) pages appear in search results.',
        'titleKey' => 'seo_pattern_album', 'descKey' => 'seo_desc_album',
        'titleVars' => ['{title}' => 'Album title', '{count}' => 'Image count', '{type}' => 'Type (Straight, Gay, Hentai)', '{sep}' => 'Title separator', '{site_name}' => 'Your site name'],
        'descVars' => ['{title}' => 'Album title', '{description}' => 'Full description', '{description_short}' => 'First 100 chars of description', '{count}' => 'Image count', '{site_name}' => 'Your site name'],
        'sampleUrl' => '/album/album-name', 'hasPagination' => false,
    ],
    'album_listing' => [
        'title' => 'Albums Listing Page', 'desc' => 'Configure how the /albums listing page appears in search results.',
        'titleKey' => 'seo_pattern_album_listing', 'descKey' => 'seo_desc_album_listing',
        'titleVars' => ['{count}' => 'Total album count', '{sep}' => 'Title separator', '{site_name}' => 'Your site name'],
        'descVars' => ['{count}' => 'Total album count', '{site_name}' => 'Your site name'],
        'sampleUrl' => '/albums', 'hasPagination' => true,
    ],
    'search' => [
        'title' => 'Search Page', 'desc' => 'Configure how search result pages appear in search results.',
        'titleKey' => 'seo_pattern_search', 'descKey' => 'seo_desc_search',
        'titleVars' => ['{query}' => 'Search query', '{count}' => 'Result count', '{type}' => 'Video type (Straight, Gay, Hentai)', '{sep}' => 'Title separator', '{site_name}' => 'Your site name'],
        'descVars' => ['{query}' => 'Search query', '{count}' => 'Result count', '{type}' => 'Video type (Straight, Gay, Hentai)', '{site_name}' => 'Your site name'],
        'sampleUrl' => '/search?q=search+query', 'hasPagination' => false,
    ],
    'page' => [
        'title' => 'CMS Page', 'desc' => 'Default patterns for CMS pages. Individual pages can override these in the page editor.',
        'titleKey' => 'seo_pattern_page', 'descKey' => 'seo_desc_page',
        'titleVars' => ['{title}' => 'Page title', '{type}' => 'Video type (Straight, Gay, Hentai)', '{sep}' => 'Title separator', '{site_name}' => 'Your site name'],
        'descVars' => ['{title}' => 'Page title', '{excerpt}' => 'First 150 chars of page body', '{type}' => 'Video type (Straight, Gay, Hentai)', '{site_name}' => 'Your site name'],
        'sampleUrl' => '/about-us', 'hasPagination' => false,
    ],
];

if (!$multiType) {
    foreach ($pageTypes as &$_pt) {
        unset($_pt['titleVars']['{type}'], $_pt['descVars']['{type}']);
    }
    unset($_pt);
}
?>

<style>
 
.serp-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px; }
.serp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.serp-favicon { width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 1px solid #e8eaed; }
.serp-favicon img { width: 18px; height: 18px; object-fit: contain; }
.serp-favicon svg { width: 14px; height: 14px; color: #70757a; }
.serp-site-info { display: flex; flex-direction: column; min-width: 0; }
.serp-site-name { font-size: 14px; color: #202124; font-family: Arial, sans-serif; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-breadcrumb { font-size: 12px; color: #4d5156; font-family: Arial, sans-serif; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-title { font-size: 20px; color: #1a0dab; font-family: Arial, sans-serif; font-weight: 400; line-height: 1.3; margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.serp-title:hover { text-decoration: underline; }
.serp-desc { font-size: 14px; color: #4d5156; font-family: Arial, sans-serif; line-height: 1.58; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.serp-label { position: absolute; top: -9px; left: 16px; background: #fff; padding: 0 8px; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }

 
.cc { font-size: 11px; color: #9ca3af; font-variant-numeric: tabular-nums; transition: color 0.15s; }
.cc.warn { color: #d97706; }
.cc.over { color: #dc2626; font-weight: 600; }

 
.vtag { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; margin: 2px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 5px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, monospace; color: #475569; cursor: pointer; transition: all 0.12s; user-select: none; }
.vtag:hover { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(99,102,241,0.1); }

 
.subtab { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: all 0.15s; text-decoration: none; }
.subtab--active { background: #4f46e5; color: #fff; box-shadow: 0 1px 3px rgba(79,70,229,0.3); }
.subtab--inactive { background: #f3f4f6; color: #6b7280; }
.subtab--inactive:hover { background: #e5e7eb; color: #374151; }
</style>

<?php if ($saved): ?>
<div class="mb-4 px-4 py-3 rounded-lg text-sm bg-green-50 text-green-800 border border-green-200">Settings saved successfully.</div>
<?php endif; ?>


<div class="border-b border-gray-200 mb-6">
    <nav class="-mb-px flex gap-x-1 flex-wrap" aria-label="Tabs">
        <?php foreach ($tabs as $key => $t): ?>
        <a href="?tab=<?= $key ?>"
           class="flex items-center gap-1.5 whitespace-nowrap border-b-2 px-3 py-2.5 text-sm font-medium transition-colors <?= $tab === $key ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' ?>">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="<?= $t['icon'] ?>"/></svg>
            <?= $t['label'] ?>
        </a>
        <?php endforeach; ?>
    </nav>
</div>


<?php if ($tab === 'pages'):
    $pt = $pageTypes[$sub];
    $titleVal = $s[$pt['titleKey']] ?? '';
    $descVal = $s[$pt['descKey']] ?? '';
?>


<div class="flex flex-wrap gap-1.5 mb-6">
    <?php foreach ($subTabs as $sKey => $sInfo): ?>
    <a href="?tab=pages&sub=<?= $sKey ?>" class="subtab <?= $sub === $sKey ? 'subtab--active' : 'subtab--inactive' ?>">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="<?= $sInfo['icon'] ?>"/></svg>
        <?= $sInfo['label'] ?>
    </a>
    <?php endforeach; ?>
</div>

<?php if ($sub === 'page'): ?>
<div class="mb-4 px-4 py-3 rounded-lg text-sm bg-blue-50 text-blue-800 border border-blue-200 flex items-start gap-2.5">
    <svg class="w-4 h-4 text-blue-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
    <p>These are <strong>default patterns</strong> for CMS pages. Each page can override its own title and meta description in the <a href="/admin/pages" class="font-medium underline hover:no-underline">page editor</a>. The patterns below are only used when a page has no custom SEO fields set.</p>
</div>
<?php endif; ?>


<div class="relative serp-card mb-6">
    <span class="serp-label">Google Search Preview</span>
    <div class="serp-header">
        <div class="serp-favicon" id="serp-fav">
            <?php if ($faviconUrl): ?>
            <img src="<?= $esc($faviconUrl) ?>" alt="">
            <?php else: ?>
            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"/></svg>
            <?php endif; ?>
        </div>
        <div class="serp-site-info">
            <span class="serp-site-name" id="serp-sitename"><?= $esc($siteName) ?></span>
            <span class="serp-breadcrumb" id="serp-url"><?= $esc($siteUrl . $pt['sampleUrl']) ?></span>
        </div>
    </div>
    <div class="serp-title" id="serp-title"><?= $esc($siteName) ?></div>
    <div class="serp-desc" id="serp-desc">No meta description configured. Google will auto-generate a snippet from the page content.</div>
</div>


<form method="POST" action="/admin/seo" id="pages-form">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="pages">
    <input type="hidden" name="_sub" value="<?= $sub ?>">

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">

        
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
            <div class="px-5 py-3.5 border-b border-gray-100 flex items-center justify-between">
                <label for="field_title" class="text-sm font-semibold text-gray-900">Title pattern</label>
                <span class="cc" id="title-cc">0 / 60</span>
            </div>
            <div class="p-5">
                <input type="text" id="field_title" name="<?= $esc($pt['titleKey']) ?>" value="<?= $esc($titleVal) ?>"
                       placeholder="<?= $sub === 'home' ? '{site_name} {sep} {site_description}' : '' ?>"
                       class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none"
                       autocomplete="off">
                <div class="mt-3 flex flex-wrap items-center">
                    <?php foreach ($pt['titleVars'] as $vn => $vd): ?>
                    <span class="vtag" onclick="insertVar('field_title',this.dataset.v)" data-v="<?= $esc($vn) ?>" title="<?= $esc($vd) ?>"><?= $esc($vn) ?><?php if ($vn === '{type}'): ?><button type="button" onclick="event.stopPropagation();window.open('/admin/appearance?sub=videotypes','_blank')" class="ml-1 opacity-70 hover:opacity-100 transition-opacity" title="Configure type labels"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg></button><?php endif; ?></span>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
            <div class="px-5 py-3.5 border-b border-gray-100 flex items-center justify-between">
                <label for="field_desc" class="text-sm font-semibold text-gray-900">Meta description</label>
                <span class="cc" id="desc-cc">0 / 160</span>
            </div>
            <div class="p-5">
                <textarea id="field_desc" name="<?= $esc($pt['descKey']) ?>" rows="3"
                          class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none resize-y"
                          autocomplete="off"><?= $esc($descVal) ?></textarea>
                <div class="mt-3 flex flex-wrap items-center">
                    <?php foreach ($pt['descVars'] as $vn => $vd): ?>
                    <span class="vtag" onclick="insertVar('field_desc',this.dataset.v)" data-v="<?= $esc($vn) ?>" title="<?= $esc($vd) ?>"><?= $esc($vn) ?><?php if ($vn === '{type}'): ?><button type="button" onclick="event.stopPropagation();window.open('/admin/appearance?sub=videotypes','_blank')" class="ml-1 opacity-70 hover:opacity-100 transition-opacity" title="Configure type labels"><svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg></button><?php endif; ?></span>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>

    <?php if ($sub === 'home'): ?>
    
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm mb-5">
        <div class="px-5 py-3.5 border-b border-gray-100">
            <h3 class="text-sm font-semibold text-gray-900">Pagination SEO</h3>
            <p class="text-xs text-gray-500 mt-0.5">Applies to <strong>all</strong> paginated pages (homepage, categories, tags, pornstars, channels).</p>
        </div>
        <div class="p-5 flex flex-wrap items-start gap-6">
            <label class="flex items-start gap-2 cursor-pointer">
                <input type="checkbox" name="seo_pagination_title" value="1" <?= $s['seo_pagination_title'] === '1' ? 'checked' : '' ?>
                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 mt-0.5">
                <div>
                    <span class="text-sm text-gray-700">Append page number to titles on page 2+</span>
                    <p class="text-xs text-gray-400">e.g. "Amateur Videos - My Site<strong> - Page 3</strong>"</p>
                </div>
            </label>
            <div>
                <label for="seo_pagination_suffix" class="block text-xs font-medium text-gray-600 mb-1">Suffix pattern</label>
                <input type="text" id="seo_pagination_suffix" name="seo_pagination_suffix" value="<?= $esc($s['seo_pagination_suffix']) ?>"
                       class="w-48 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                <p class="mt-1 text-xs text-gray-400">Use <code class="text-[11px]">{page}</code> for the number</p>
            </div>
        </div>
    </div>
    <?php endif; ?>

    
    <details class="bg-white rounded-lg border border-gray-200 shadow-sm mb-5 group">
        <summary class="px-5 py-3.5 cursor-pointer select-none flex items-center justify-between hover:bg-gray-50 rounded-lg transition-colors">
            <span class="text-sm font-semibold text-gray-900">Variable reference</span>
            <svg class="w-4 h-4 text-gray-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
        </summary>
        <div class="px-5 pb-5 border-t border-gray-100">
            <table class="min-w-full text-sm mt-3">
                <thead><tr class="text-left text-xs text-gray-500 uppercase tracking-wider">
                    <th class="pb-2 pr-4">Variable</th><th class="pb-2 pr-4">Description</th><th class="pb-2">Used in</th>
                </tr></thead>
                <tbody class="divide-y divide-gray-50">
                    <?php
                    $allVars = $pt['titleVars'] + $pt['descVars'];
                    foreach ($allVars as $vn => $vd):
                        $where = [];
                        if (isset($pt['titleVars'][$vn])) $where[] = 'Title';
                        if (isset($pt['descVars'][$vn])) $where[] = 'Description';
                    ?>
                    <tr>
                        <td class="py-1.5 pr-4 font-mono text-xs text-indigo-600"><?= $esc($vn) ?></td>
                        <td class="py-1.5 pr-4 text-gray-600"><?= $esc($vd) ?></td>
                        <td class="py-1.5 text-gray-400 text-xs"><?= implode(', ', $where) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </details>

    <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">Save changes</button>
    </div>
</form>

<?php if ($multiType): ?>

<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mt-4 flex items-center justify-between gap-4">
    <div class="flex items-center gap-3 text-xs text-gray-600 min-w-0">
        <i class="fa-solid fa-layer-group text-gray-400 shrink-0"></i>
        <span><strong class="text-gray-700">{type}</strong> resolves to:
        <?php $i = 0; foreach (Video::typeLabels() as $code => $label): ?><?= $i++ ? ', ' : '' ?><span class="font-medium text-gray-900"><?= htmlspecialchars($label) ?></span> <span class="text-gray-400">(<?= $code ?>)</span><?php endforeach; ?></span>
    </div>
    <a href="/admin/appearance?sub=videotypes" class="shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors">
        <i class="fa-solid fa-pen-to-square" style="font-size:10px"></i>
        Configure
    </a>
</div>
<?php endif;   ?>

<?php endif;   ?>


<?php if ($tab === 'social'): ?>
<form method="POST" action="/admin/seo" enctype="multipart/form-data">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="social">

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">

        
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
            <div class="px-5 py-3.5 border-b border-gray-100">
                <h3 class="text-sm font-semibold text-gray-900">Title separator</h3>
            </div>
            <div class="p-5">
                <div class="flex items-center gap-3">
                    <select id="sep_select" onchange="if(this.value!=='custom'){document.getElementById('seo_title_separator').value=this.value}"
                            class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                        <?php
                        $seps = [' - '=>'  -  (dash)',' | '=>'  |  (pipe)',' · '=>'  ·  (dot)',' — '=>'  —  (em dash)','custom'=>'Custom...'];
                        $currentSep = $s['seo_title_separator'];
                        $isCustom = !array_key_exists($currentSep, $seps) || $currentSep === 'custom';
                        foreach ($seps as $val => $lbl):
                            $sel = (!$isCustom && $val === $currentSep) || ($isCustom && $val === 'custom') ? ' selected' : '';
                        ?>
                        <option value="<?= $esc($val) ?>"<?= $sel ?>><?= $esc($lbl) ?></option>
                        <?php endforeach; ?>
                    </select>
                    <input type="text" id="seo_title_separator" name="seo_title_separator" value="<?= $esc($currentSep) ?>"
                           class="w-20 px-3 py-2 border border-gray-300 rounded-lg text-sm text-center focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                </div>
                <p class="mt-2 text-xs text-gray-500">Example: Video Title<strong><?= $esc($currentSep) ?></strong>Site Name</p>
            </div>
        </div>

        
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
            <div class="px-5 py-3.5 border-b border-gray-100">
                <h3 class="text-sm font-semibold text-gray-900">Twitter / X</h3>
            </div>
            <div class="p-5 space-y-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-2">Card type</label>
                    <div class="flex gap-4">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="seo_twitter_card" value="summary" <?= $s['seo_twitter_card'] === 'summary' ? 'checked' : '' ?> class="text-primary-600 focus:ring-primary-500">
                            <span class="text-sm text-gray-700">Summary</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="seo_twitter_card" value="summary_large_image" <?= $s['seo_twitter_card'] === 'summary_large_image' ? 'checked' : '' ?> class="text-primary-600 focus:ring-primary-500">
                            <span class="text-sm text-gray-700">Large image</span>
                        </label>
                    </div>
                </div>
                <div>
                    <label for="seo_twitter_handle" class="block text-xs font-medium text-gray-600 mb-1">@handle</label>
                    <input type="text" id="seo_twitter_handle" name="seo_twitter_handle" value="<?= $esc($s['seo_twitter_handle']) ?>" placeholder="@yoursite"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                </div>
            </div>
        </div>
    </div>

    
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm mb-5">
        <div class="px-5 py-3.5 border-b border-gray-100">
            <h3 class="text-sm font-semibold text-gray-900">Default Open Graph image</h3>
            <p class="text-xs text-gray-500 mt-0.5">Fallback image when no page-specific image is available (homepage, search, tags, etc.).</p>
        </div>
        <div class="p-5">
            <?php if ($ctrActive): ?>
            <div class="mb-4 px-3 py-2.5 bg-indigo-50 border border-indigo-200 rounded-lg flex items-start gap-2.5">
                <svg class="w-4 h-4 text-indigo-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z"/></svg>
                <p class="text-xs text-indigo-700"><strong>Smart OG active.</strong> CTR plugin is enabled — listing pages auto-use the highest-performing video thumbnail. The image below is the final fallback.</p>
            </div>
            <?php endif; ?>

            <div class="flex items-start gap-5">
                <div id="og-preview" class="w-44 h-[100px] bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden shrink-0">
                    <?php if ($ogImageUrl): ?>
                    <img src="<?= $esc($ogImageUrl) ?>" class="w-full h-full object-cover" alt="OG Image">
                    <?php else: ?>
                    <span class="text-xs text-gray-400">No image</span>
                    <?php endif; ?>
                </div>
                <div class="space-y-3">
                    <div>
                        <input type="file" id="og_image_input" accept="image/*" class="hidden">
                        <button type="button" onclick="document.getElementById('og_image_input').click()"
                                class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">Upload image</button>
                        <p class="mt-1 text-xs text-gray-400">1200x630px recommended. Max 5 MB.</p>
                    </div>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="seo_og_auto_ctr" value="1" <?= $s['seo_og_auto_ctr'] === '1' ? 'checked' : '' ?>
                               class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                        <span class="text-sm text-gray-700">Auto-use highest CTR video thumbnail</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm mb-5">
        <div class="px-5 py-3.5 border-b border-gray-100">
            <h3 class="text-sm font-semibold text-gray-900">Facebook</h3>
        </div>
        <div class="p-5">
            <label for="seo_fb_app_id" class="block text-xs font-medium text-gray-600 mb-1">App ID</label>
            <input type="text" id="seo_fb_app_id" name="seo_fb_app_id" value="<?= $esc($s['seo_fb_app_id']) ?>" placeholder="123456789012345"
                   class="w-full max-w-xs px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
            <p class="mt-1 text-xs text-gray-500">Used for <code>fb:app_id</code> Open Graph property.</p>
        </div>
    </div>

    <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">Save changes</button>
    </div>
</form>

<script>
document.getElementById('og_image_input').addEventListener('change', function() {
    if (!this.files[0]) return;
    const fd = new FormData();
    fd.append('og_image', this.files[0]);
    fd.append('csrf_token', '<?= Router::csrfToken() ?>');
    fetch('/admin/seo/upload-og', { method: 'POST', headers: { 'X-CSRF-Token': '<?= Router::csrfToken() ?>' }, body: fd })
        .then(r => r.json())
        .then(d => {
            if (d.ok) document.getElementById('og-preview').innerHTML = '<img src="'+d.url+'" class="w-full h-full object-cover" alt="OG">';
            else alert(d.error || 'Upload failed');
        }).catch(() => alert('Upload failed'));
});
</script>
<?php endif; ?>


<?php if ($tab === 'sitemap'): ?>
<form method="POST" action="/admin/seo">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="sitemap">

    
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5 mb-5 flex items-center justify-between">
        <div>
            <h3 class="text-sm font-semibold text-gray-900">Sitemap status</h3>
            <p class="text-xs text-gray-500 mt-0.5">
                Files: <span id="sm-count" class="font-medium text-gray-700"><?= $sitemapCount ?></span>
                <?php if ($sitemapLastGen): ?>
                &middot; Generated: <span id="sm-time" class="font-medium text-gray-700"><?= $esc($sitemapLastGen) ?></span>
                <?php else: ?>
                &middot; <span id="sm-time" class="text-amber-600">Not yet generated</span>
                <?php endif; ?>
            </p>
        </div>
        <button type="button" id="btn-regen" onclick="regenSitemap()"
                class="inline-flex items-center gap-1.5 px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
            <svg class="w-4 h-4" id="regen-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
            Regenerate
        </button>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">
        
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
            <div class="px-5 py-3.5 border-b border-gray-100"><h3 class="text-sm font-semibold text-gray-900">Include in sitemap</h3></div>
            <div class="p-5 space-y-2.5">
                <?php foreach (['seo_sitemap_videos'=>'Videos','seo_sitemap_categories'=>'Categories','seo_sitemap_tags'=>'Tags','seo_sitemap_performers'=>'Pornstars','seo_sitemap_channels'=>'Channels','seo_sitemap_albums'=>'Albums','seo_sitemap_pages'=>'Pages'] as $k=>$l): ?>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="<?= $k ?>" value="1" <?= $s[$k]==='1'?'checked':'' ?> class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    <span class="text-sm text-gray-700"><?= $l ?></span>
                </label>
                <?php endforeach; ?>
            </div>
        </div>

        
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
            <div class="px-5 py-3.5 border-b border-gray-100"><h3 class="text-sm font-semibold text-gray-900">Options</h3></div>
            <div class="p-5 space-y-3">
                <div>
                    <label for="seo_sitemap_max_urls" class="block text-xs font-medium text-gray-600 mb-1">Max URLs per file</label>
                    <input type="number" id="seo_sitemap_max_urls" name="seo_sitemap_max_urls" value="<?= $esc($s['seo_sitemap_max_urls']) ?>" min="1000" max="50000" step="1000"
                           class="w-28 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                </div>
                <?php foreach (['seo_sitemap_video_tags'=>'Include <code>&lt;video:tag&gt;</code>','seo_sitemap_image_tags'=>'Include <code>&lt;image:image&gt;</code>','seo_sitemap_hreflang'=>'Include <code>hreflang</code> alternates'] as $k=>$l): ?>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="<?= $k ?>" value="1" <?= $s[$k]==='1'?'checked':'' ?> class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    <span class="text-sm text-gray-700"><?= $l ?></span>
                </label>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

    <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">Save changes</button>
    </div>
</form>
<script>
function regenSitemap(){const b=document.getElementById('btn-regen'),i=document.getElementById('regen-icon');b.disabled=true;i.classList.add('animate-spin');fetch('/admin/seo/regenerate',{method:'POST',headers:{'X-CSRF-Token':'<?= Router::csrfToken() ?>'}}).then(r=>r.json()).then(d=>{if(d.ok){document.getElementById('sm-count').textContent=d.files;const t=document.getElementById('sm-time');t.textContent=d.time;t.className='font-medium text-gray-700';}else alert('Failed');}).catch(()=>alert('Failed')).finally(()=>{b.disabled=false;i.classList.remove('animate-spin');});}
</script>
<?php endif; ?>


<?php if ($tab === 'indexing'): ?>
<form method="POST" action="/admin/seo">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="indexing">

    
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5 mb-6">
        <div class="flex items-start gap-4">
            <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center shrink-0">
                <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>
            </div>
            <div>
                <h3 class="text-sm font-semibold text-gray-900">What does "Hide from search engines" mean?</h3>
                <p class="mt-1 text-sm text-gray-600 leading-relaxed">
                    When you hide a page type, Google and Bing will <strong>stop showing those pages in search results</strong>.
                    Visitors can still access them normally — they just won't find them via search.
                    This is useful for pages with little unique content that could hurt your overall SEO ranking.
                </p>
            </div>
        </div>
    </div>

    
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm mb-6">
        <div class="px-5 py-3.5 border-b border-gray-100">
            <h3 class="text-sm font-semibold text-gray-900">Choose which pages to hide from search engines</h3>
        </div>
        <div class="divide-y divide-gray-100">
            <?php foreach ([
                'seo_noindex_search' => [
                    'label' => 'Search result pages',
                    'desc'  => 'Pages like /search?q=... — dynamic results generated from user queries.',
                ],
                'seo_noindex_tags' => [
                    'label' => 'Tag pages',
                    'desc'  => 'Pages that list videos by tag.',
                ],
                'seo_noindex_paginated' => [
                    'label' => 'Paginated pages (page 2, 3, 4...)',
                    'desc'  => 'The second, third, etc. pages of any listing. Videos are still discoverable via your sitemap.',
                ],
                'seo_noindex_categories' => [
                    'label' => 'Category pages',
                    'desc'  => 'Pages that list videos by category.',
                ],
                'seo_noindex_performers' => [
                    'label' => 'Pornstar pages',
                    'desc'  => 'Pages that list videos by pornstar.',
                ],
                'seo_noindex_channels' => [
                    'label' => 'Channel pages',
                    'desc'  => 'Pages that list videos by channel.',
                ],
                'seo_noindex_albums' => [
                    'label' => 'Album pages',
                    'desc'  => 'Single album (gallery) pages and the albums listing.',
                ],
            ] as $k => $opt): ?>
            <label class="flex items-center gap-4 px-5 py-4 cursor-pointer hover:bg-gray-50 transition-colors">
                <input type="checkbox" name="<?= $k ?>" value="1" <?= $s[$k]==='1'?'checked':'' ?>
                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 w-4 h-4 shrink-0">
                <div class="flex-1 min-w-0">
                    <span class="text-sm font-medium text-gray-900"><?= $opt['label'] ?></span>
                    <p class="mt-0.5 text-xs text-gray-500 leading-relaxed"><?= $opt['desc'] ?></p>
                </div>
                <div class="shrink-0 w-16 text-right">
                    <?php if ($s[$k] === '1'): ?>
                    <span class="inline-flex items-center gap-1 text-xs font-medium text-amber-700"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/></svg> Hidden</span>
                    <?php else: ?>
                    <span class="inline-flex items-center gap-1 text-xs font-medium text-green-700"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Visible</span>
                    <?php endif; ?>
                </div>
            </label>
            <?php endforeach; ?>
        </div>
    </div>

    <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">Save changes</button>
    </div>
</form>
<?php endif; ?>


<?php if ($tab === 'robots'): ?>
<form method="POST" action="/admin/seo">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="robots">

    <div class="bg-white rounded-lg border border-gray-200 shadow-sm mb-5">
        <div class="px-5 py-3.5 border-b border-gray-100 flex items-center justify-between">
            <h3 class="text-sm font-semibold text-gray-900">robots.txt</h3>
            <button type="button" onclick="document.getElementById('seo_robots_txt').value=document.getElementById('def-robots').value" class="text-xs text-primary-600 hover:text-primary-700 font-medium">Reset to default</button>
        </div>
        <div class="p-5">
            <textarea id="seo_robots_txt" name="seo_robots_txt" rows="10"
                      style="font-family:ui-monospace,SFMono-Regular,monospace"
                      class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none resize-y bg-gray-50"
                      placeholder="Leave empty for default..."><?= $esc($s['seo_robots_txt']) ?></textarea>
            <input type="hidden" id="def-robots" value="<?= $esc($defaultRobots) ?>">
            <p class="mt-2 text-xs text-gray-500">Leave empty to use the default template. Writing here <strong>completely replaces</strong> the default — copy it first with "Reset to default" if you just want to add a few lines. Served at <code>/robots.txt</code>.</p>
        </div>
    </div>

    <div class="bg-gray-50 rounded-lg border border-gray-200 px-5 py-3 mb-5">
        <p class="text-xs font-medium text-gray-600 mb-1">Default template:</p>
        <pre class="text-xs text-gray-500 whitespace-pre-wrap"><?= $esc($defaultRobots) ?></pre>
    </div>

    <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">Save changes</button>
    </div>
</form>
<?php endif; ?>


<?php if ($tab === 'advanced'): ?>
<form method="POST" action="/admin/seo">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="advanced">

    
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm mb-5">
        <div class="px-5 py-3.5 border-b border-gray-100"><h3 class="text-sm font-semibold text-gray-900">Search engine verification</h3></div>
        <div class="p-5">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <?php foreach ([
                    'seo_google_verify'=>['Google Search Console','google-site-verification value'],
                    'seo_bing_verify'=>['Bing Webmaster Tools','msvalidate.01 value'],
                    'seo_pinterest_verify'=>['Pinterest','p:domain_verify value'],
                    'seo_yandex_verify'=>['Yandex Webmaster','yandex-verification value'],
                ] as $k=>$info): ?>
                <div>
                    <label for="<?= $k ?>" class="block text-xs font-medium text-gray-600 mb-1"><?= $info[0] ?></label>
                    <input type="text" id="<?= $k ?>" name="<?= $k ?>" value="<?= $esc($s[$k]) ?>" placeholder="<?= $esc($info[1]) ?>"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                </div>
                <?php endforeach; ?>
            </div>
            <p class="mt-3 text-xs text-gray-500">Paste only the <code>content</code> value, not the full meta tag.</p>
        </div>
    </div>

    
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm mb-5">
        <div class="px-5 py-3.5 border-b border-gray-100"><h3 class="text-sm font-semibold text-gray-900">Custom code injection</h3></div>
        <div class="p-5 space-y-4">
            <div>
                <label for="seo_custom_head" class="block text-xs font-medium text-gray-600 mb-1">Custom <code>&lt;head&gt;</code> code</label>
                <textarea id="seo_custom_head" name="seo_custom_head" rows="4" style="font-family:ui-monospace,SFMono-Regular,monospace"
                          class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none resize-y bg-gray-50"
                          placeholder=""><?= $esc($s['seo_custom_head']) ?></textarea>
            </div>
            <div>
                <label for="seo_custom_body" class="block text-xs font-medium text-gray-600 mb-1">Custom <code>&lt;/body&gt;</code> code</label>
                <textarea id="seo_custom_body" name="seo_custom_body" rows="4" style="font-family:ui-monospace,SFMono-Regular,monospace"
                          class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none resize-y bg-gray-50"
                          placeholder=""><?= $esc($s['seo_custom_body']) ?></textarea>
            </div>
        </div>
    </div>

    <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">Save changes</button>
    </div>
</form>
<?php endif; ?>


<?php if ($tab === 'analytics'): ?>
<form method="POST" action="/admin/seo">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="analytics">

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">
        
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
            <div class="px-5 py-3.5 border-b border-gray-100"><h3 class="text-sm font-semibold text-gray-900">Google Analytics 4</h3></div>
            <div class="p-5">
                <label for="seo_ga4_id" class="block text-xs font-medium text-gray-600 mb-1">Measurement ID</label>
                <input type="text" id="seo_ga4_id" name="seo_ga4_id" value="<?= $esc($s['seo_ga4_id']) ?>" placeholder="G-XXXXXXXXXX"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                <p class="mt-1.5 text-xs text-gray-500">Automatically injects <code>gtag.js</code> in <code>&lt;head&gt;</code>.</p>
            </div>
        </div>

        
        <div class="bg-blue-50 rounded-lg border border-blue-200 p-5 flex items-start gap-3">
            <svg class="w-5 h-5 text-blue-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
            <div>
                <p class="text-sm font-medium text-blue-900">Where is the code injected?</p>
                <p class="text-xs text-blue-700 mt-1">GA4 script goes into <code>&lt;head&gt;</code>. For other providers (Matomo, Plausible, Fathom), use the custom code fields below or in the Advanced tab.</p>
            </div>
        </div>
    </div>

    
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm mb-5">
        <div class="px-5 py-3.5 border-b border-gray-100"><h3 class="text-sm font-semibold text-gray-900">Custom tracking code</h3></div>
        <div class="p-5 space-y-4">
            <div>
                <label for="a_head" class="block text-xs font-medium text-gray-600 mb-1">Custom <code>&lt;head&gt;</code> code</label>
                <textarea id="a_head" name="seo_custom_head" rows="4" style="font-family:ui-monospace,SFMono-Regular,monospace"
                          class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none resize-y bg-gray-50"
                          placeholder=""><?= $esc($s['seo_custom_head']) ?></textarea>
                <p class="mt-1 text-xs text-gray-400">Same field as Advanced > Custom head code.</p>
            </div>
            <div>
                <label for="a_body" class="block text-xs font-medium text-gray-600 mb-1">Custom <code>&lt;/body&gt;</code> code</label>
                <textarea id="a_body" name="seo_custom_body" rows="4" style="font-family:ui-monospace,SFMono-Regular,monospace"
                          class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none resize-y bg-gray-50"
                          placeholder=""><?= $esc($s['seo_custom_body']) ?></textarea>
            </div>
        </div>
    </div>

    <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">Save changes</button>
    </div>
</form>
<?php endif; ?>


<?php if ($tab === 'help'): ?>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">

    <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
        <h3 class="text-sm font-semibold text-gray-900 mb-2">What is SEO?</h3>
        <p class="text-sm text-gray-600 leading-relaxed">SEO (Search Engine Optimization) improves your site's visibility in search results. Good SEO means more organic traffic without paid ads.</p>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
        <h3 class="text-sm font-semibold text-gray-900 mb-2">Title patterns</h3>
        <p class="text-sm text-gray-600">Control the <code>&lt;title&gt;</code> tag — the clickable headline in Google. Use variables like <code>{title}</code> and <code>{site_name}</code> for dynamic titles.</p>
        <p class="text-xs text-amber-700 mt-2 font-medium">Keep under 60 characters to avoid truncation.</p>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
        <h3 class="text-sm font-semibold text-gray-900 mb-2">Meta descriptions</h3>
        <p class="text-sm text-gray-600">The 1-2 line summary below your title in search results. A compelling description increases click-through rates.</p>
        <p class="text-xs text-amber-700 mt-2 font-medium">Aim for 120-160 characters.</p>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
        <h3 class="text-sm font-semibold text-gray-900 mb-2">Noindex</h3>
        <p class="text-sm text-gray-600">Tells search engines not to index a page. Use for thin content (tags, search results) that dilutes overall SEO quality. Pages still work for visitors.</p>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
        <h3 class="text-sm font-semibold text-gray-900 mb-2">Sitemaps</h3>
        <p class="text-sm text-gray-600">XML files listing all important pages. Helps search engines discover and crawl content efficiently. Auto-updates, but regenerate after bulk changes.</p>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
        <h3 class="text-sm font-semibold text-gray-900 mb-2">Open Graph</h3>
        <p class="text-sm text-gray-600">Controls how pages look when shared on social media. Set a default OG image so every shared link has a thumbnail. Smart OG auto-picks your best-performing video.</p>
    </div>
</div>


<div class="bg-white rounded-lg border border-gray-200 shadow-sm mt-5 p-5">
    <h3 class="text-sm font-semibold text-gray-900 mb-3">Variable reference</h3>
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead><tr class="text-left text-xs text-gray-500 uppercase tracking-wider border-b border-gray-200">
                <th class="pb-2 pr-4">Variable</th><th class="pb-2 pr-4">Description</th><th class="pb-2">Available on</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
                <?php
                $helpVars = [
                    ['{site_name}','Your site name','All pages'],
                    ['{site_description}','Your site tagline','Homepage'],
                    ['{sep}','Title separator','All pages'],
                    ['{title}','Video or page title','Video, CMS Page'],
                    ['{name}','Entity name','Category, Tag, Pornstar, Channel'],
                    ['{query}','Search query','Search'],
                    ['{count}','Video count (global on homepage, entity-specific elsewhere)','Homepage, Category, Tag, Pornstar, Channel, Search'],
                    ['{description}','Full description (HTML stripped)','Video, Category, Channel'],
                    ['{description_short}','First 100 chars of description','Video, Category, Channel'],
                    ['{pornstars}','Pornstar names (comma-separated)','Video'],
                    ['{categories}','Category names (comma-separated)','Video'],
                    ['{tags}','Tag names (comma-separated)','Video'],
                    ['{channels}','Channel names (comma-separated)','Video'],
                    ['{category}','Primary (first) category','Video'],
                    ['{bio}','Full pornstar bio (HTML stripped)','Pornstar'],
                    ['{bio_short}','First 100 chars of bio','Pornstar'],
                    ['{excerpt}','First 150 chars of body','CMS Page'],
                    ['{duration}','Video duration (e.g. 12:34)','Video'],
                    ['{views}','View count (e.g. 1.2K)','Video'],
                    ['{page}','Page number','All paginated pages'],
                ];
                if ($multiType) {
                    array_splice($helpVars, 14, 0, [['{type}','Video type (Straight, Gay, Hentai)','All pages']]);
                }
                foreach ($helpVars as $row): ?>
                <tr>
                    <td class="py-1.5 pr-4 font-mono text-xs text-indigo-600"><?= $row[0] ?></td>
                    <td class="py-1.5 pr-4 text-gray-600"><?= $row[1] ?></td>
                    <td class="py-1.5 text-gray-400 text-xs"><?= $row[2] ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>


<div class="bg-white rounded-lg border border-gray-200 shadow-sm mt-5 p-5">
    <h3 class="text-sm font-semibold text-gray-900 mb-3">Learn more</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
        <?php foreach ([
            ['Google SEO Starter Guide','https://developers.google.com/search/docs/fundamentals/seo-starter-guide'],
            ['How title links work','https://developers.google.com/search/docs/appearance/title-link'],
            ['How meta descriptions work','https://developers.google.com/search/docs/appearance/snippet'],
            ['Open Graph Protocol','https://ogp.me/'],
        ] as $link): ?>
        <a href="<?= $link[1] ?>" target="_blank" rel="noopener" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-primary-600 hover:bg-primary-50 transition-colors">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
            <?= $link[0] ?>
        </a>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>


<?php if ($tab === 'pages'): ?>
<script>
(function(){
    const SN = <?= json_encode($siteName, JSON_HEX_TAG) ?>;
    const SEP = <?= json_encode($sepValue, JSON_HEX_TAG) ?>;
    const URL = <?= json_encode($siteUrl, JSON_HEX_TAG) ?>;
    const SUB = <?= json_encode($sub, JSON_HEX_TAG) ?>;

    const samples = {
        '{site_name}':SN, '{site_description}':'Your site description here', '{sep}':SEP,
        '{title}':'Amazing Video Title',
        '{name}':({tag:'Tag Name',performer:'Lisa Ann',channel:'Channel Name'}[SUB]||'Category Name'),
        '{query}':'search query', '{count}':'1,234',
        '{description}':'This is the full video description text that can be quite long and detailed with all the information about the video content and context...',
        '{description_short}':'This is a sample description for preview purposes showing how the text appears...',
        '{pornstars}':'Lisa Ann, Mia Khalifa',
        '{categories}':'Amateur, MILF',
        '{tags}':'blonde, hardcore, HD',
        '{channels}':'Brazzers, Reality Kings',
        '{category}':'Amateur',
        '{type}':<?= json_encode($typeLabels[Video::defaultType()] ?? reset($typeLabels), JSON_HEX_TAG) ?>,
        '{bio}':'Famous pornstar known for her incredible career spanning multiple genres and productions with numerous awards...',
        '{bio_short}':'Famous pornstar known for her incredible career spanning multiple genres...',
        '{excerpt}':'This is sample page content showing how the excerpt will appear in search results...',
        '{duration}':'12:34', '{views}':'1.2K', '{page}':'2'
    };

    const urls = {home:'/',video:'/video/amazing-video-title',category:'/category/category-name',tag:'/tag/tag-name',performer:'/pornstar/lisa-ann',channel:'/channel/channel-name',search:'/search?q=search+query',page:'/about-us'};

    function rep(p){let r=p;for(const[k,v]of Object.entries(samples))r=r.split(k).join(v);return r;}

    function cc(el,id,max){
        const c=document.getElementById(id);if(!c)return;
        const t=rep(el.value),len=t.length;
        c.textContent=len+' / '+max;
        c.className='cc'+(len>max?' over':len>max*.83?' warn':'');
    }

    function preview(){
        const ti=document.getElementById('field_title'),de=document.getElementById('field_desc');
        if(!ti||!de)return;
        const tt=rep(ti.value||ti.placeholder||SN);
        const dd=rep(de.value||'');
        const st=document.getElementById('serp-title'),su=document.getElementById('serp-url'),sd=document.getElementById('serp-desc');
        if(st)st.textContent=tt||SN;
        if(su)su.textContent=URL+(urls[SUB]||'/');
        if(sd)sd.textContent=dd||'No meta description configured. Google will auto-generate a snippet from the page content.';
    }

    function init(){
        const ti=document.getElementById('field_title'),de=document.getElementById('field_desc');
        if(!ti||!de)return;
        ti.addEventListener('input',()=>{cc(ti,'title-cc',60);preview();});
        de.addEventListener('input',()=>{cc(de,'desc-cc',160);preview();});
        cc(ti,'title-cc',60);cc(de,'desc-cc',160);preview();
    }

    window.insertVar=function(fid,v){
        const el=document.getElementById(fid);if(!el)return;
        const s=el.selectionStart,e=el.selectionEnd;
        el.value=el.value.substring(0,s)+v+el.value.substring(e);
        el.selectionStart=el.selectionEnd=s+v.length;
        el.focus();el.dispatchEvent(new Event('input'));
    };

    document.readyState==='loading'?document.addEventListener('DOMContentLoaded',init):init();

     
})();
</script>
<?php endif; ?>
