{% load static %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}OTmate.ai{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    
    <!-- Tippy.js CSS -->
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css">
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light-border.css">
    
    <!-- Custom CSS -->
    <link href="{% static 'offgrid_dc_calculator/css/base.css' %}" rel="stylesheet">
    <link href="{% static 'offgrid_dc_calculator/css/wizard.css' %}" rel="stylesheet">
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-lg-2 col-md-3 sidebar">
                <h4 class="mb-4">
                    <a href="/" class="text-light text-decoration-none">OTmate.ai</a>
                </h4>
                
                <div class="nav-section mb-4">
                    <h5 class="text-light mb-3">Engineering Tools</h5>
                    
                    <nav class="nav flex-column nav-subsection mb-3">
                        <div class="nav-section-header">
                            <span class="text-light">Power</span>
                        </div>
                        <div class="nav-items ms-3">
                            <a href="{% url 'offgrid_dc_calculator:wizard' %}" 
                               class="nav-link {% if request.resolver_match.view_name == 'offgrid_dc_calculator:wizard' %}active{% endif %}">
                                Off-grid DC Power Calculator
                            </a>
                        </div>
                    </nav>
                    
                    <nav class="nav flex-column nav-subsection">
                        <div class="nav-section-header">
                            <span class="text-light">Radio Frequency</span>
                        </div>
                        <div class="nav-items ms-3">
                            <span class="nav-link text-muted">Coming Soon</span>
                        </div>
                    </nav>
                </div>
            </div>
            
            <!-- Main Content -->
            <div class="col-lg-10 col-md-9 main-content">
                {% if messages %}
                <div class="messages mt-3">
                    {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
                
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

    <!-- Core JavaScript Dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- External Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"></script>

    {% block extra_js %}
    <!-- Base JavaScript -->
    <script>
        // Global tooltip initialization
        document.addEventListener('DOMContentLoaded', () => {
            tippy('[data-tippy-content]', {
                theme: 'custom',
                delay: [200, 0],
                placement: 'top'
            });

            // Initialize all Bootstrap tooltips
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
    {% endblock %}
</body>
</html>