{% load static %}

<!-- فایل: includes/header.html -->
<header class="site-header">
    <div class="header-container">
        <!-- لوگو سمت راست -->
        <div class="header-right">
            <div class="logo-mn">
                <span class="logo-text">IranSqlClub</span> 
            </div>
        </div>

        <!-- منو وسط - دسکتاپ -->
        <div class="header-center desktop-menu">
            <nav class="main-nav">
                <ul>
                    <li><a href="/">صفحه اصلی</a></li>
                    <li class="has-submenu">
                        <a>مقالات <i class="fas fa-chevron-down"></i></a>
                        <ul class="submenu">
                            <li><a href="/blog/category/high-availability/">High Availability</a></li>
                            <li><a href="/blog/category/maintenance/">نگهداری</a></li>
                            <li><a href="/blog/category/monitoring/">مانیتورینگ</a></li>
                            <li><a href="/blog/category/optimization/">بهینه سازی</a></li>
                            <li><a href="/blog/category/security/">امنیت</a></li>
                        </ul>
                    </li>
                    <li><a href="/">ویدئوهای آموزشی</a></li>
                    <li><a href="/">رویدادها</a></li>
                    <li><a href="/">مشاوره</a></li>
                    <li><a href="/aboutus">درباره ما</a></li>
                    <li><a href="/contactus">ارتباط با ما</a></li>
                </ul>
            </nav>
        </div>

        <!-- سرچ باکس و دکمه همبرگر -->
        <div class="header-left">
            <div class="live-search-wrapper">
                <div class="live-search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input 
                        type="text" 
                        class="live-search-input" 
                        placeholder="جستجو..." 
                        autocomplete="off"
                        id="liveSearchInput"
                    >
                    <button class="live-search-clear" id="clearSearch">
                        <i class="fas fa-times"></i>
                    </button>
                    <div class="search-loading" id="searchLoading">
                        <div class="loading-spinner"></div>
                    </div>
                </div>
                <div class="search-results-dropdown" id="searchResults"></div>
            </div>
            
            <!-- دکمه همبرگر منو - فقط در موبایل نمایش داده میشه -->
            <button class="hamburger-menu" id="hamburgerBtn" aria-label="منو">
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
            </button>
        </div>
    </div>

    <!-- منوی موبایل - سایدبار -->
    <div class="mobile-sidebar" id="mobileSidebar">
        <div class="sidebar-header">
            <span class="sidebar-logo">SQLAKAGroup</span>
            <button class="sidebar-close" id="closeSidebar">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <nav class="mobile-nav">
            <ul>
                <li><a href="/">صفحه اصلی</a></li>
                <li class="mobile-has-submenu">
                    <button class="mobile-submenu-toggle">
                        مقالات <i class="fas fa-chevron-down"></i>
                    </button>
                    <ul class="mobile-submenu">
                        <li><a href="/blog/category/high-availability/">High Availability</a></li>
                        <li><a href="/blog/category/maintenance/">نگهداری</a></li>
                        <li><a href="/blog/category/monitoring/">مانیتورینگ</a></li>
                        <li><a href="/blog/category/optimization/">بهینه سازی</a></li>
                        <li><a href="/blog/category/security/">امنیت</a></li>
                    </ul>
                </li>
                <li><a href="/">ویدئوهای آموزشی</a></li>
                <li><a href="/">رویدادها</a></li>
                <li><a href="/">مشاوره</a></li>
                <li><a href="/aboutus">درباره ما</a></li>
                <li><a href="/contactus">ارتباط با ما</a></li>
            </ul>
        </nav>

        <div class="sidebar-footer">
            <div class="sidebar-social">
                <a href="#"><i class="fab fa-telegram"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-github"></i></a>
            </div>
        </div>
    </div>

    <!-- اوورلی برای بکدراپ -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>
</header>

<!-- فراخوانی فونت awesome -->
<link rel="stylesheet" href="{% static 'css/header.css' %}">
 <script src="{% static 'js/header.js' %}"></script>