<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="<?php $this->options->charset(); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?php $this->archiveTitle(['', ' - ', ' - ', ' - '], '', ' - '); ?><?php $this->options->title(); ?></title>

    <!-- ---------- فراخوانی هدر تایپچو (برای پلاگین‌ها) ---------- -->
    <?php $this->header(); ?>
    
    <!-- ---------- فاویکون ---------- -->
    <?php if ($this->options->favicon): ?>
        <link rel="icon" href="<?php $this->options->favicon(); ?>" type="image/x-icon">
        <link rel="shortcut icon" href="<?php $this->options->favicon(); ?>" type="image/x-icon">
    <?php else: ?>
        <link rel="icon" href="<?php $this->options->themeUrl('img/favicon.ico'); ?>" type="image/x-icon">
        <link rel="shortcut icon" href="<?php $this->options->themeUrl('img/favicon.ico'); ?>" type="image/x-icon">
    <?php endif; ?>
    
    <!-- ---------- استایل‌های اصلی ---------- -->
    <link rel="stylesheet" href="<?php $this->options->themeUrl('css/style.css'); ?>">
    
    <!-- ---------- فونت وزیرمتن (آفلاین) ---------- -->
    <link rel="stylesheet" href="<?php $this->options->themeUrl('css/fonts.css'); ?>">

    <!-- ---------- فونت‌آسام (آفلاین) ---------- -->    
    <link rel="stylesheet" href="<?php $this->options->themeUrl('css/all.css'); ?>">

    <!-- ---------- اسکریپت‌های منوی موبایل ---------- -->
    <script>
        function toggleMenu() {
            var sidebar = document.querySelector('.mobile-menu-sidebar');
            var overlay = document.querySelector('.mobile-menu-overlay');
            sidebar.classList.toggle('active');
            overlay.classList.toggle('active');
            closeSearch();
        }
        function closeMenu() {
            var sidebar = document.querySelector('.mobile-menu-sidebar');
            var overlay = document.querySelector('.mobile-menu-overlay');
            sidebar.classList.remove('active');
            overlay.classList.remove('active');
        }

        function toggleSearch() {
            var panel = document.querySelector('.mobile-search-panel');
            var overlay = document.querySelector('.mobile-search-overlay');
            panel.classList.toggle('active');
            overlay.classList.toggle('active');
            closeMenu();
            
            if (panel.classList.contains('active')) {
                setTimeout(() => document.querySelector('.mobile-search-input').focus(), 300);
            }
        }
        function closeSearch() {
            var panel = document.querySelector('.mobile-search-panel');
            var overlay = document.querySelector('.mobile-search-overlay');
            panel.classList.remove('active');
            overlay.classList.remove('active');
        }
    </script>
</head>
<body class="farsi-digits">

    <!-- ---------- لایه تاریک منوی موبایل ---------- -->
    <div class="mobile-menu-overlay" onclick="closeMenu()"></div>
    
    <!-- ---------- لایه تاریک جستجوی موبایل ---------- -->
    <div class="mobile-search-overlay" onclick="closeSearch()"></div>
    
    <!-- ---------- پنل جستجوی موبایل ---------- -->
    <div class="mobile-search-panel">
        <div class="close-search-btn" onclick="closeSearch()">
            <i class="fa-solid fa-xmark"></i>
        </div>
        
        <div class="container" style="text-align: center;">
            <h2 style="margin-bottom: 10px; color: var(--dark);">جستجو در سایت</h2>
            <p style="color: var(--gray); margin-bottom: 30px;">کلیدواژه مورد نظر خود را وارد کنید</p>
            
            <form action="<?php $this->options->siteUrl(); ?>" method="get" class="mobile-search-form">
                <input type="text" name="s" placeholder="جستجو..." class="mobile-search-input">
                <button type="submit">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- ---------- سایدبار منوی موبایل ---------- -->
    <aside class="mobile-menu-sidebar">
        <div class="close-menu-btn" onclick="closeMenu()">
            <i class="fa-solid fa-xmark"></i>
        </div>

        <div class="mobile-sidebar-logo">
            <a href="<?php $this->options->siteUrl(); ?>" class="logo-link" style="text-decoration: none; flex-direction: column; align-items: center;">
                
                <?php
                // ---------- لوگوی موبایل ----------
                if ($this->options->logoUrl) {
                    echo '<img src="' . $this->options->logoUrl . '" alt="' . '" class="logo-img">';
                } elseif (file_exists(__TYPECHO_ROOT_DIR__ . '/usr/themes/' . basename(__DIR__) . '/img/logo.png')) {
                    echo '<img src="' . $this->options->themeUrl('img/logo.png') . '" class="logo-img">';
                } else {
                ?>
                    <div class="logo-icon"><i class="fa-solid fa-pen-nib"></i></div>
                <?php } ?>
                
                <?php if (!$this->options->logoUrl && !file_exists(__TYPECHO_ROOT_DIR__ . '/usr/themes/' . basename(__DIR__) . '/img/logo.png')): ?>
                    <div class="logo-text" style="margin-top: 10px;">
                        <span class="logo-main"><?php $this->options->title(); ?></span>
                        <span class="logo-sub"><?php $this->options->description(); ?></span>
                    </div>
                <?php endif; ?>
            </a>
        </div>

        <!-- ---------- لینک‌های منوی موبایل ---------- -->
        <div class="mobile-nav-links">
            <a href="<?php $this->options->siteUrl(); ?>" onclick="closeMenu()"><i class="fa-solid fa-house" style="margin-left:8px;"></i> خانه</a>
            
            <?php
            // ---------- دسته‌بندی‌های انتخاب شده در منوی موبایل ----------
            $selectedCats = $this->options->navCategories;
            if (!empty($selectedCats) && is_array($selectedCats)):
                $this->widget('Widget_Metas_Category_List')->to($navCats);
                while($navCats->next()):
                    if (in_array($navCats->slug, $selectedCats)):
            ?>
                        <a href="<?php $navCats->permalink(); ?>" onclick="closeMenu()"><i class="fa-solid fa-layer-group" style="margin-left:8px;"></i> <?php $navCats->name(); ?></a>
            <?php
                    endif;
                endwhile;
            endif;
            ?>

            <?php
            // ---------- صفحات انتخاب شده در منوی موبایل ----------
            $selectedPages = $this->options->navPages;
            if (!empty($selectedPages) && is_array($selectedPages)):
                $this->widget('Widget_Contents_Page_List')->to($pages);
                while($pages->next()):
                    if (in_array($pages->permalink, $selectedPages)):
            ?>
                        <a href="<?php $pages->permalink(); ?>" onclick="closeMenu()"><i class="fa-regular fa-file-lines" style="margin-left:8px;"></i> <?php $pages->title(); ?></a>
            <?php
                    endif;
                endwhile;
            endif;
            ?>

            <!-- ---------- لینک دانلود تایپچو (CTA) ---------- -->
            <a href="https://example.com" target="_blank" onclick="closeMenu()" class="nav-cta" style="margin-top: 20px; text-align: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 12px; border-radius: 50px; text-decoration: none; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px;" >
                <i class="fas fa-user-plus"></i> من را دنبال کنید
            </a>
        </div>
    </aside>

    <!-- ---------- ناوبری اصلی (دسکتاپ) ---------- -->
    <nav class="main-nav">
        <div class="container nav-container">
            
            <!-- ---------- بخش چپ: لوگو ---------- -->
            <div class="nav-left">
                <div class="logo">
                    <a href="<?php $this->options->siteUrl(); ?>" class="logo-link">
                        
                        <?php
                        // ---------- لوگوی دسکتاپ ----------
                        if ($this->options->logoUrl) {
                            echo '<img src="' . $this->options->logoUrl . '" alt="'  . '" class="logo-img">';
                        } elseif (file_exists(__TYPECHO_ROOT_DIR__ . '/usr/themes/' . basename(__DIR__) . '/img/logo.png')) {
                            echo '<img src="' . $this->options->themeUrl('img/logo.png') . '" class="logo-img">';
                        } else {
                        ?>
                            <div class="logo-icon">
                                <i class="fa-solid fa-pen-nib"></i> 
                            </div>
                        <?php } ?>
                        
                        <?php if (!$this->options->logoUrl && !file_exists(__TYPECHO_ROOT_DIR__ . '/usr/themes/' . basename(__DIR__) . '/img/logo.png')): ?>
                            <div class="logo-text">
                                <span class="logo-main"><?php $this->options->title(); ?></span>
                                <span class="logo-sub"><?php $this->options->description(); ?></span>
                            </div>
                        <?php endif; ?>
                    </a>
                </div>
            </div>

            <!-- ---------- بخش وسط: منوی اصلی ---------- -->
            <div class="nav-center">
                <div class="nav-links">
                    <a href="<?php $this->options->siteUrl(); ?>" class="<?php if($this->is('index')): ?>active<?php endif; ?>">
                        <i class="fa-solid fa-house"></i> خانه
                    </a>
                    
                    <?php
                    // ---------- دسته‌بندی‌های منوی دسکتاپ ----------
                    $selectedCats = $this->options->navCategories;
                    if (!empty($selectedCats) && is_array($selectedCats)):
                        $this->widget('Widget_Metas_Category_List')->to($navCats);
                        while($navCats->next()):
                            if (in_array($navCats->slug, $selectedCats)):
                    ?>
                                <a href="<?php $navCats->permalink(); ?>" class="<?php if($this->is('category', $navCats->slug)): ?>active<?php endif; ?>">
                                    <i class="fa-solid fa-layer-group"></i> <?php $navCats->name(); ?>
                                </a>
                    <?php
                            endif;
                        endwhile;
                    endif;
                    ?>

                    <?php
                    // ---------- صفحات منوی دسکتاپ ----------
                    $selectedPages = $this->options->navPages;
                    if (!empty($selectedPages) && is_array($selectedPages)):
                        $this->widget('Widget_Contents_Page_List')->to($pages);
                        while($pages->next()):
                            if (in_array($pages->permalink, $selectedPages)):
                    ?>
                                <a href="<?php $pages->permalink(); ?>" class="<?php if($this->is('page', $pages->slug)): ?>active<?php endif; ?>">
                                    <i class="fa-regular fa-file-lines"></i> <?php $pages->title(); ?>
                                </a>
                    <?php
                            endif;
                        endwhile;
                    endif;
                    ?>
                </div>
            </div>
            
            <!-- ---------- بخش راست: دکمه CTA و کنترل‌های موبایل ---------- -->
            <div class="nav-right">
                <a href="https://example.com" target="_blank" class="nav-cta">
                    <i class="fas fa-user-plus"></i>من را دنبال کنید
                </a>
                
                <!-- ---------- دکمه‌های کنترلی موبایل ---------- -->
                <div class="mobile-actions">
                    <div class="mobile-menu-btn" onclick="toggleMenu()">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                    <div class="mobile-search-btn" onclick="toggleSearch()">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- ---------- بخش هیرو (هدر صفحه) ---------- -->
    <header class="page-header">
        <div class="container">
            
            <!-- ---------- بردکرامب (مسیر ناوبری) ---------- -->
            <div class="breadcrumb">
                <?php if ($this->is('index')): ?>
                    <i class="fa-solid fa-house"></i> <span>خانه</span>
                <?php else: ?>
                    <a href="<?php $this->options->siteUrl(); ?>"><i class="fa-solid fa-house"></i> خانه</a>
                    <i class="fa-solid fa-chevron-left" style="font-size: 0.8rem;"></i>
                    <span><?php $this->archiveTitle(' &raquo; ', '', ''); ?></span>
                <?php endif; ?>
            </div>

            <!-- ---------- عنوان اصلی صفحه (فقط در صفحه اصلی از H1 استفاده می‌شود) ---------- -->
            <?php if ($this->is('index')): ?>
                <h1 class="page-title">پوسته <span style="font-size: 2.5rem; color: var(--primary);">اسکایلر</span></h1>
            <?php else: ?>
                <div class="page-title"><?php $this->archiveTitle(['', ' - ', ' - ', ' - '], '', ''); ?></div>
            <?php endif; ?>

            <!-- ---------- زیرعنوان و توضیحات ---------- -->
            <p class="page-subtitle">
                <?php if ($this->is('post')): ?>
                    نویسنده: <?php $this->author(); ?> | تاریخ: <?php echo getLocalizedDate($this->created); ?>
                <?php elseif ($this->is('category')): ?>
                    مشاهده تمام نوشته‌های دسته‌بندی <?php $this->archiveTitle(' &raquo; ', '', ''); ?>
                <?php elseif ($this->is('index')): ?>
                    <!-- ---------- توضیحات کوتاه پوسته اسکایلر در صفحه اصلی ---------- -->
                    یک پوسته مدرن، زیبا و بهینه برای تایپچو با طراحی مینیمال و ریسپانسیو
                <?php elseif ($this->is('page')): ?>
                    <!-- ---------- صفحه استاتیک - عنوان H1 در خود صفحه نمایش داده می‌شود ---------- -->
                    &nbsp;
                <?php else: ?>
                    مرور محتویات سایت
                <?php endif; ?>
            </p>
        </div>
    </header>

    <!-- ---------- شروع محتوای اصلی ---------- -->
    <?php if ($this->is('page')): ?>
    <div class="container page-content-wrapper" id="posts">
    <?php else: ?>
    <div class="container content-wrapper" id="posts">
    <?php endif; ?>
        <main class="main-content">