<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Website{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    {% block css %}
    {% endblock %}
    {% block scripts %}{% endblock %}
</head>
<body>
    <header class="header">
        <div class="logo">
            <img src="{{ url_for('static', filename='assets/logo_11.png') }}" alt="Website Logo">
        </div>
        <nav>
            {% if 'is_marketing' in session and session['is_marketing'] %}
                <a href="{{ url_for('leaderboard') }}" class="nav-link">Leaderboard</a>
                <a href="{{ url_for('questions_page') }}" class="nav-link">Coding Exercises</a>
                <div class="dropdown">
                    <button class="dropbtn">Hi, {{ session['marketname'] }}</button>
                    <div class="dropdown-content">
                        <a href="{{ url_for('logout') }}">Logout</a>
                    </div>
                </div>
        
            {% elif 'username' in session %}
                <a href="{{ url_for('faqs') }}">FAQs</a>
                <a href="{{ url_for('leaderboard') }}" class="nav-link">Leaderboard</a>
                <a href="{{ url_for('questions_page') }}" class="nav-link">Coding Exercises</a>
                <div class="dropdown">
                    <button class="dropbtn">Hi, {{ session['first_name'] }}</button>
                    <div class="dropdown-content">
                        <a href="{{ url_for('profile') }}">My Profile</a>
                        <a href="{{ url_for('logout') }}">Logout</a>
                    </div>
                </div>
            {% else %}
                <a href="{{ url_for('faqs') }}">FAQs</a>
                <a href="{{ url_for('leaderboard') }}" class="nav-link">Leaderboard</a>
                <a href="{{ url_for('questions_page') }}" class="nav-link">Coding Exercises</a>
            {% endif %}
        </nav>
        
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer class="footer-section">
        <div class="footer-container">
            <!-- Top Section with Logo and Support Mail -->
            <div class="footer-top-left">
                <img src="{{ url_for('static', filename='assets/logo_11.png') }}" alt="Website Logo">
                <a href="mailto:support@sqlbyte.com" class="support-link">support@sqlbyte.com</a>
            </div>

            <!-- Links -->
            <div class="footer-links">
                <a href="{{ url_for('contact_us') }}" class="footer-link">Contact Us</a>
                <a href="{{ url_for('privacy') }}" class="footer-link">Privacy Policy</a>
                <a href="{{ url_for('terms_of_use') }}" class="footer-link">Terms of Service</a>
                <a href="{{ url_for('faqs') }}" class="footer-link">FAQs</a>
            </div>

            <!-- Social Media -->
            <div class="social-media-icons">
                <a href="https://facebook.com" target="_blank" class="social-icon">
                    <i class="fab fa-facebook"></i>
                </a>
                <a href="https://linkedin.com" target="_blank" class="social-icon">
                    <i class="fab fa-linkedin"></i>
                </a>
                <a href="https://instagram.com" target="_blank" class="social-icon">
                    <i class="fab fa-instagram"></i>
                </a>
            </div>

            <!-- Horizontal Line -->
            <hr class="footer-divider">

            <!-- Branding -->
            <div class="footer-branding">
                <span>© 2024 <strong>SQLByte</strong>. All rights reserved.</span>
            </div>
        </div>
    </footer>

    </body>
</html>
