{% 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 %}

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

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="{% static 'programmer/images/main.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">

    <style>
        /* Временные стили для тумблера и мобильного меню */
        .theme-switcher {
            display: flex;
            align-items: center;
        }

        .theme-toggle-checkbox {
            display: none;
        }

        .theme-toggle-label {
            position: relative;
            display: flex;
            align-items: center;
            width: 60px;
            height: 30px;
            background: #222738;
            border: 2px solid #2D3447;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 2px;
        }

        .theme-toggle-slider {
            position: absolute;
            width: 24px;
            height: 24px;
            background: #FF6B00;
            border-radius: 50%;
            transition: all 0.3s ease;
            left: 2px;
            z-index: 2;
        }

        .theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-slider {
            transform: translateX(30px);
            background: #0055A5;
        }

        .theme-icon {
            position: absolute;
            font-size: 12px;
            transition: all 0.3s ease;
            z-index: 1;
        }

        .theme-icon.sun {
            left: 8px;
            opacity: 0;
        }

        .theme-icon.moon {
            right: 8px;
            opacity: 1;
        }

        .theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.sun {
            opacity: 1;
        }

        .theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.moon {
            opacity: 0;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* Мобильное меню */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .mobile-menu-btn:hover {
            background: var(--border-light);
        }

        .mobile-menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .mobile-menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 300px;
            height: 100%;
            background: var(--bg-card);
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
            transition: right 0.3s ease;
            z-index: 1000;
            overflow-y: auto;
            padding: 2rem 1.5rem;
        }

        .mobile-menu.active {
            right: 0;
        }

        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-light);
        }

        .mobile-menu-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--text-primary);
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .mobile-menu-close:hover {
            background: var(--border-light);
        }

        .mobile-nav-menu {
            list-style: none;
            margin-bottom: 2rem;
        }

        .mobile-nav-item {
            margin-bottom: 0.5rem;
        }

        .mobile-nav-link {
            display: block;
            padding: 1rem;
            color: var(--text-primary);
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .mobile-nav-link:hover,
        .mobile-nav-link.active {
            background: var(--primary);
            color: white;
        }

        .mobile-nav-actions {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-light);
        }

        /* ===== MOBILE RESPONSIVE STYLES ===== */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .hero-subtitle {
                font-size: 1.125rem;
                padding: 0 1rem;
            }

            .page-title {
                font-size: 2.25rem;
            }

            .page-subtitle {
                font-size: 1.125rem;
                padding: 0 1rem;
            }

            .grid-2 {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .modern-card {
                padding: 1.5rem;
                margin-bottom: 1.5rem;
            }

            .card-title {
                font-size: 1.375rem;
            }

            .content-card {
                padding: 1.5rem;
            }

            .about-section {
                padding: 1.5rem;
            }

            .skills-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .competence-item {
                flex-direction: column;
                padding: 1.5rem;
                gap: 1.5rem;
            }

            .competence-scan-container {
                width: 100%;
                max-width: 280px;
                margin: 0 auto;
            }

            .recall-header {
                flex-direction: column;
                gap: 1rem;
                align-items: flex-start;
            }

            .recall-meta {
                flex-direction: column;
                gap: 0.5rem;
            }

            .footer-content {
                grid-template-columns: 1fr;
                gap: 2rem;
                text-align: center;
            }

            .footer-contacts p {
                justify-content: center;
            }

            .card-actions {
                flex-direction: column;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }

            .modal-content {
                margin: 5% auto;
                max-width: 95%;
            }

            .modal-header {
                padding: 1.5rem 1.5rem 1rem;
            }

            .modal-body {
                padding: 1.5rem;
            }

            .page-content {
                padding: 1.5rem;
            }

            .breadcrumbs {
                font-size: 0.8rem;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .page-title {
                font-size: 1.875rem;
            }

            .modern-card {
                padding: 1.25rem;
            }

            .content-card {
                padding: 1.25rem;
            }

            .about-section {
                padding: 1.25rem;
            }

            .card-title {
                font-size: 1.25rem;
            }

            .competence-scan-container {
                max-width: 100%;
            }
        }
    </style>

    {% 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/main.ico' %}" alt="Logo" class="logo-img">
                    <span class="logo-text">Программист 1С</span>
                </a>

                <!-- Десктопное меню -->
                <ul class="nav-menu">
                    {% for m in menu %}
                    <li class="nav-item">
                        <a href="{% url m.url_name %}" class="nav-link {% if request.resolver_match.url_name == m.url_name %}active{% endif %}">
                            {{m.title}}
                        </a>
                    </li>
                    {% endfor %}
                </ul>

                <div class="nav-actions">
                    <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>

                    <!-- Кнопка мобильного меню -->
                    <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 menu %}
            <li class="mobile-nav-item">
                <a href="{% url m.url_name %}" class="mobile-nav-link {% if request.resolver_match.url_name == m.url_name %}active{% endif %}">
                    {{m.title}}
                </a>
            </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">
                    <a href="{% url 'home' %}" class="breadcrumb-link">Главная</a>
                    <span class="breadcrumb-separator">/</span>
                    <span class="breadcrumb-current">{{title}}</span>
                </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-copyright">
                    <p>&copy; 2025 ИП Сердюк Николай Александрович. Все права защищены.</p>
                </div>
            </div>
        </div>
    </footer>

    {% bootstrap_javascript %}
    <script src="{% static 'programmer/js/theme-switcher.js' %}"></script>
    <script src="{% static 'programmer/js/mobile-menu.js' %}"></script>

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

    <!-- В recall.html после основного контента -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Review",
      "itemReviewed": {
        "@type": "Service",
        "name": "Услуги программиста 1С"
      },
      "author": {
        "@type": "Organization",
        "name": "ООО «РОВЕН-Регионы»"
      },
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5",
        "bestRating": "5"
      },
      "datePublished": "2025-11-13",
      "description": "Выражаю благодарность программисту 1С Николаю Сердюк за профессиональную работу и качественное решение поставленных задач..."
    }
    </script>
</body>
</html>