{% load static %}
{% load programmer_tags %}
{% load django_bootstrap5 %}
<!DOCTYPE html>
<html lang="ru">
<head>
    <title>{{title}}</title>
    <!-- Основные мета-теги -->
    <meta name="description" content="{% block meta_description %}{{ meta_description|default:'Профессиональная разработка и поддержка 1С с более чем 10-летним опытом. Разработка, интеграция и оптимизация систем 1С.' }}{% endblock %}">
    <meta name="keywords" content="{% block meta_keywords %}{{ meta_keywords|default:'программист 1С, разработка 1С, интеграция 1С, оптимизация 1С, 1С предприятие' }}{% endblock %}">
    <meta name="author" content="Николай Сердюк">

    <!-- Open Graph для соцсетей -->
    <meta property="og:title" content="{{title}}">
    <meta property="og:description" content="{% block og_description %}{{ meta_description|default:'Профессиональная разработка и поддержка 1С с более чем 10-летним опытом' }}{% endblock %}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
<!--    <meta property="og:image" content="{% static 'programmer/images/og-image.jpg' %}">-->
    <meta property="og:site_name" content="Программист 1С - Николай Сердюк">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{title}}">
    <meta name="twitter:description" content="{% block twitter_description %}{{ meta_description|default:'Профессиональная разработка и поддержка 1С с более чем 10-летним опытом' }}{% endblock %}">
<!--    <meta name="twitter:image" content="{% static 'programmer/images/og-image.jpg' %}">-->

    <!-- Дополнительные SEO-теги -->
    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <link rel="canonical" href="{{ request.build_absolute_uri }}">
    {% bootstrap_css %}

    <!-- исключаем мигание при применении темы-->
    <script>
        (function() {
            try {
                const savedTheme = localStorage.getItem('theme');
                if (savedTheme === 'dark') {
                    document.body.classList.add('theme-dark');
                }
            } catch (e) {
                // если localStorage недоступен, игнорируем
            }
        })();
    </script>

    <!-- Основной CSS файл (темная тема по умолчанию) -->
    <link type="text/css" href="{% static 'programmer/css/styles.css' %}" rel="stylesheet" />

    <!-- Тема Highlight.js -->
<!--    <link rel="stylesheet" href="{% static 'programmer/css/highlight-default.min.css' %}">-->
    <!-- <link rel="stylesheet" href="{% static 'programmer/css/1c-light.min.css' %}" id="theme-css-1c"> -->
     <link id="theme-css-1c" rel="stylesheet" href="{% static 'programmer/css/1c-light.min.css' %}">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="{% static 'programmer/images/black_logo.ico' %}" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <link rel="alternate" type="application/rss+xml" title="RSS-лента блога" href="{% url 'blog:rss_feed' %}">

    {% block extra_css %}
    <!-- Дополнительные CSS файлы для конкретных страниц -->
    {% endblock %}

    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-X3W9YSQHRM"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-X3W9YSQHRM');
    </script>

    <!-- Яндекс.Метрика -->
    <script type="text/javascript">
        (function(m,e,t,r,i,k,a){
            m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
            m[i].l=1*new Date();
            for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
            k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
        })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=105278924', 'ym');

        ym(105278924, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", accurateTrackBounce:true, trackLinks:true});
    </script>
    <noscript><div><img src="https://mc.yandex.ru/watch/105278924" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "Николай Сердюк",
      "jobTitle": "Компания-разработчик 1С",
      "description": "Профессиональная разработка и поддержка 1С с более чем 10-летним опытом",
      "url": "https://nikdizell.ru",
      "email": "{{ CONTACT_EMAIL }}",
      "telephone": "{{ CONTACT_PHONE }}",
      "knowsAbout": [
        "1С:Предприятие 8.3",
        "Управление торговлей",
        "Бухгалтерия предприятия",
        "Зарплата и управление персоналом",
        "SQL",
        "Веб-сервисы",
        "API интеграция"
      ],
      "hasOccupation": {
        "@type": "Occupation",
        "name": "Программист 1С",
        "description": "Разработка и сопровождение систем на платформе 1С",
        "occupationLocation": "Россия"
      }
    }
    </script>

</head>
<body>
    <!-- Header -->
    {% block mainmenu %}
    <header class="header">
        <div class="container">
            <nav class="nav">
                <a href="{% url 'home' %}" class="logo">
                    <img src="{% static 'programmer/images/black_logo.ico' %}" alt="Logo" class="logo-img">
                    <span class="logo-text">С.Н.А. Технологии</span>
                </a>

                <!-- Десктопное меню -->
                <ul class="nav-menu">
                {% for item in main_menu %}
                    <li class="{% if item.children %}has-dropdown{% endif %}">
                    {% if item.url_name %}
                        <a href="{% url item.url_name %}" class="nav-link">{{ item.title }}</a>
                    {% else %}
                        <span>{{ item.title }}</span>
                    {% endif %}
                    {% if item.children %}
                        <ul class="dropdown">
                        {% for child in item.children %}
                            <li><a href="{% url child.url_name %}">{{ child.title }}</a></li>
                        {% endfor %}
                        </ul>
                    {% endif %}
                    </li>
                {% endfor %}
                </ul>
                
                <div class="nav-actions">

                    <!-- Telegram  -->
<!--                    <a href="https://t.me/odinesina_prog" target="_blank" class="telegram-btn">-->
<!--                        <span class="telegram-icon">-->
<!--                            <img src="{% static 'programmer/images/share_tg.png' %}" alt="Telegram" width="20" height="20">-->
<!--                        </span>-->
<!--                    </a>-->

                    <!-- Theme Toggle Switch -->
                    <div class="theme-switcher">
                        <input type="checkbox" id="theme-toggle" class="theme-toggle-checkbox" checked>
                        <label for="theme-toggle" class="theme-toggle-label">
                            <span class="theme-toggle-slider"></span>
                            <span class="theme-icon sun">☀️</span>
                            <span class="theme-icon moon">🌙</span>
                        </label>
                    </div>

                    <div class="user-menu">
                        {% for item in user_menu %}
                            <div class="user-menu-item {% if item.children %}has-dropdown{% endif %}">
                                {% if item.url_name %}
                                    <a href="{% url item.url_name %}" class="nav-link {% if request.resolver_match.url_name == item.url_name %}active{% endif %}">
                                        {{ item.title }}
                                    </a>
                                {% else %}
                                    <span class="nav-link user-menu-parent">{{ item.title }}</span>
                                {% endif %}

                                {% if item.children %}
                                    <ul class="dropdown user-dropdown">
                                        {% for child in item.children %}
                                            <li>
                                                {% if child.url_name == 'logout' %}
                                                    <form method="post" action="{% url 'logout' %}" style="display: block;">
                                                        {% csrf_token %}
                                                        <button type="submit" class="dropdown-link-btn">
                                                            {{ child.title }}
                                                        </button>
                                                    </form>
                                                {% elif child.url_name == 'login' %}
                                                    <a href="{% url 'login' %}?next={{ request.path|urlencode }}" class="dropdown-link">
                                                        {{ child.title }}
                                                    </a>
                                                {% elif child.url_name == 'register' %}
                                                    <a href="{% url 'register' %}?next={{ request.path|urlencode }}" class="dropdown-link">
                                                        {{ child.title }}
                                                    </a>
                                                {% else %}
                                                    <a href="{% url child.url_name %}" class="dropdown-link">
                                                        {{ child.title }}
                                                    </a>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                    
                    <!-- Кнопка мобильного меню -->
                    <button class="mobile-menu-btn" id="mobileMenuBtn">
                        ☰
                    </button>
                </div>
            </nav>
        </div>
    </header>

    <!-- Мобильное меню -->
    <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>
    <div class="mobile-menu" id="mobileMenu">
        <div class="mobile-menu-header">
            <h3>Меню</h3>
            <button class="mobile-menu-close" id="mobileMenuClose">
                ✕
            </button>
        </div>

        <ul class="mobile-nav-menu">
            {% for m in main_menu %}
                <li class="mobile-nav-item {% if m.children %}has-submenu{% endif %}">
                    {% if m.url_name %}
                        <a href="{% url m.url_name %}" class="mobile-nav-link {% if request.resolver_match.url_name == m.url_name %}active{% endif %}">
                            {{ m.title }}
                        </a>
                    {% else %}
                        <span class="mobile-nav-link mobile-nav-parent">{{ m.title }}</span>
                    {% endif %}

                    {% if m.children %}
                        <ul class="mobile-submenu">
                            {% for child in m.children %}
                                <li class="mobile-nav-item">
                                    <a href="{% url child.url_name %}" class="mobile-nav-link {% if request.resolver_match.url_name == child.url_name %}active{% endif %}">
                                        {{ child.title }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}

            {% for item in user_menu %}
                <li class="mobile-nav-item {% if item.children %}has-submenu{% endif %}">
                    {% if item.url_name %}
                        <a href="{% url item.url_name %}" class="mobile-nav-link {% if request.resolver_match.url_name == item.url_name %}active{% endif %}">
                            {{ item.title }}
                        </a>
                    {% else %}
                        <span class="mobile-nav-link mobile-nav-parent">{{ item.title }}</span>
                    {% endif %}

                    {% if item.children %}
                        <ul class="mobile-submenu">
                            {% for child in item.children %}
                                <li class="mobile-nav-item">
                                    {% if child.url_name == 'logout' %}
                                        <form method="post" action="{% url 'logout' %}" style="display: block;">
                                            {% csrf_token %}
                                            <button type="submit" class="mobile-nav-link" style="border: none; background: none; width: 100%; text-align: left;">
                                                {{ child.title }}
                                            </button>
                                        </form>
                                    {% elif child.url_name == 'login' %}
                                        <a href="{% url 'login' %}?next={{ request.path|urlencode }}" class="mobile-nav-link">
                                            {{ child.title }}
                                        </a>
                                    {% elif child.url_name == 'register' %}
                                        <a href="{% url 'register' %}?next={{ request.path|urlencode }}" class="mobile-nav-link">
                                            {{ child.title }}
                                        </a>
                                    {% else %}
                                        <a href="{% url child.url_name %}" class="mobile-nav-link">
                                            {{ child.title }}
                                        </a>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}  
         </ul>

        <div class="mobile-nav-actions">
<!--            <a href="https://t.me/odinesina_prog" target="_blank" class="btn btn-primary" style="width: 100%; text-align: center;">-->
<!--                <span class="telegram-icon">-->
<!--                    <img src="{% static 'programmer/images/share_tg.png' %}" alt="Telegram" width="20" height="20">-->
<!--                </span>-->
<!--            </a>-->
            <div class="theme-switcher" style="justify-content: center;">
                <input type="checkbox" id="mobile-theme-toggle" class="theme-toggle-checkbox" checked>
                <label for="mobile-theme-toggle" class="theme-toggle-label">
                    <span class="theme-toggle-slider"></span>
                    <span class="theme-icon sun">☀️</span>
                    <span class="theme-icon moon">🌙</span>
                </label>
            </div>
        </div>
    </div>
    {% endblock mainmenu %}

    <!-- Main Content -->
    <main class="main">
        <div class="container">
            <section class="content">
                <!-- Breadcrumbs -->
                {% block breadcrumbs %}
                <nav class="breadcrumbs" aria-label="breadcrumb">
                    <a href="{% url 'home' %}" class="breadcrumb-link">Главная</a>
                    {% for crumb in breadcrumbs %}
                        <span class="breadcrumb-separator">/</span>
                        {% if crumb.url_name %}
                            {% if crumb.category_slug %}
                                <a href="{% url crumb.url_name category_slug=crumb.category_slug %}" class="breadcrumb-link">{{ crumb.title }}</a>
                            {% elif crumb.url_args %}
                                <a href="{% url crumb.url_name crumb.url_kwargs %}" class="breadcrumb-link">{{ crumb.title }}</a>
                            {% else %}
                                <a href="{% url crumb.url_name %}" class="breadcrumb-link">{{ crumb.title }}</a>
                            {% endif %}
                        {% else %}
                            <span class="breadcrumb-current">{{ crumb.title }}</span>
                        {% endif %}
                    {% empty %}
                        {# Если крошек нет, показываем просто заголовок страницы #}
                        <span class="breadcrumb-separator">/</span>
                        <span class="breadcrumb-current">{{ title }}</span>
                    {% endfor %}
                </nav>
                {% endblock %}

                <!-- Messages -->
                {% bootstrap_messages %}

                <!-- Page Content -->
                <div class="page-content">
                    {% block content %}
                    {% endblock %}
                </div>
            </section>
        </div>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-info">
                    <h3>Николай Сердюк</h3>
                    <p>Программист 1С</p>
                </div>
                <div class="footer-contacts">
                    <p>📧 {{ CONTACT_EMAIL }}</p>
                    <p>📱 {{ CONTACT_PHONE }}</p>
                </div>

                <div class="footer-iks">
                    <a href="https://webmaster.yandex.ru/siteinfo/?site=https://nikdizell.ru">
                        <img width="88" height="31" alt="ИКС" border="0" src="https://yandex.ru/cycounter?https://nikdizell.ru&theme=light&lang=ru">
                    </a>
                </div>
<!--                 
                <a href="{% url 'blog:rss_feed' %}" target="_blank" rel="noopener noreferrer">
                    RSS подписка на статьи
                </a> -->

                <div class="footer-copyright">
                    <p>&copy; 2026 ИП Сердюк Николай Александрович. Все права защищены.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Модальное окно формы -->
    <div id="callbackModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>📞 Заявка на консультацию</h3>
                <button class="modal-close" onclick="CallbackModal.close()">&times;</button>
            </div>
            <div class="modal-body">
            <form method="post" action="{% url 'callback' %}" id="callbackForm">
                    {% csrf_token %}

                    <input type="hidden" name="next" value="{{ request.path }}">

                    <div class="form-group">
                        <label for="id_name">Имя *</label>
                        {{ callback_form.name }}
                    </div>

                    <div class="form-group">
                        <label for="id_phone">Телефон *</label>
                        {{ callback_form.phone }}
                    </div>

                    <div class="form-group">
                        <label for="id_email">Электронная почта</label>
                        {{ callback_form.email }}
                    </div>

                    <div class="form-group">
                        <label for="id_question">Ваш вопрос</label>
                        {{ callback_form.question }}
                    </div>

                    {% if form.captcha %}
                    <div class="form-group">
                        <label for="id_captcha">Защитный код *</label>
                        {{ callback_form.captcha }}
                    </div>
                {% endif %}

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary" style="width: 100%;">
                            📨 Отправить заявку
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Универсальное модальное окно -->
    <div id="contentModal" class="modal">
        <div class="modal-content" style="max-width: 700px;">
            <div class="modal-header">
                <h3 id="contentModalTitle">Заголовок</h3>
                <button class="modal-close" onclick="closeContentModal()">&times;</button>
            </div>
            <div class="modal-body" id="contentModalBody">
                <!-- сюда подгружается содержимое -->
            </div>
        </div>
    </div> 

    <!-- Плавающая кнопка -->
    <div id="floatingButton" class="floating-btn" style="position: fixed; bottom: 30px; right: 30px; z-index: 10000; display: none;">
        <button onclick="CallbackModal.open()" class="btn btn-primary pulse">🎯 Получить консультацию</button>
    </div>
    
    {% bootstrap_javascript %}
    <script src="{% static 'programmer/js/theme-switcher.js' %}"></script>
    <script src="{% static 'programmer/js/mobile-menu.js' %}"></script>

    <!-- Основной скрипт Highlight.js -->
    <script src="{% static 'programmer/js/highlight.min.js' %}"></script>

    <!-- Локальный плагин для 1С -->
    <script src="{% static 'programmer/js/1c-enterprise.min.js' %}"></script>

    <!-- Инициализация подсветки: только для блоков 1С -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            hljs.highlightAll();
        });
    </script>

    {% block extra_js %}


    {% endblock %}

    <script>
        function updateIKSTheme() {
            const iksImg = document.querySelector('.footer-iks img');
            if (!iksImg) return;
            const isDark = document.body.classList.contains('theme-dark');
            const theme = isDark ? 'dark' : 'light';
            const currentSrc = iksImg.src;
            const newSrc = currentSrc.replace(/theme=\w+/, `theme=${theme}`);
            iksImg.src = newSrc;
        }

        // При загрузке страницы
        document.addEventListener('DOMContentLoaded', updateIKSTheme);

        // При переключении темы (если используете свою функцию)
        // Допустим, у вас есть функции switchToLightTheme/switchToDarkTheme
        // В них добавьте вызов updateIKSTheme()
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const bottomConsent = document.getElementById('cookie-consent-bottom');
            const acceptBtn = document.getElementById('cookie-accept-bottom');

            if (!localStorage.getItem('cookieConsent')) {
                bottomConsent.style.display = 'block';
            }

            if (acceptBtn) {
                acceptBtn.addEventListener('click', function() {
                    localStorage.setItem('cookieConsent', 'true');
                    bottomConsent.style.display = 'none';
                });
            }

            // Можно добавить закрытие по клику вне (но для плашки обычно не нужно)
            // Если хотите, можно сделать крестик в углу
        });
    </script>
    {% include 'programmer/includes/cookie_consent.html' %}
</body>
</html>