{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="">
    <meta name="description" content="Creative Schools, the best education platform">
    
    <script src="https://code.jquery.com/jquery-3.6.3.min.js' %}" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.3/font/bootstrap-icons.min.css">
    <!-- favicon-->
    <link rel="shortcut icon" type="image/png" href="{% static 'main/assets/images/logo/favicon.png' %}">
    <!-- google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
    <!-- font awesome css-->
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/vendor/font-awesome.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/vendor/themify-icons.css' %}">
    <!-- animate css-->
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/vendor/animate.css' %}">
    <!-- magnific popup css-->
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/vendor/magnific-popup.css' %}">
    <!-- simplebar css-->
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/vendor/simplebar.css' %}">
    <!-- fancybox css-->
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/vendor/fancybox.css' %}">
    <!-- nice select css-->
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/vendor/nice-select.css' %}">
    <!-- sal css-->
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/vendor/sal.css' %}">
    <!-- swiper css-->
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/vendor/swiper-bundle.min.css' %}">
    <!-- tailwindcss css   -->
    <!-- main css-->
    <link rel="stylesheet" type="text/css" href="{% static 'main/assets/css/style.css' %}">
    {% block headblock %}{% endblock %}
    
</head>

<body>
    <!-- loader start-->
    <div class="codex-loader">
        <div class="loader">
            <div class="loader-item1"></div>
            <div class="loader-item2"></div>
        </div>
    </div>
    <!-- loader end-->
    <!-- header start-->
    <div class="top-header">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12 md:col-span-7">
                    <div class="header-left">
                        <ul class="header-list">
                            <li><a href="tel:38012365XXXXX"><i class="bi bi-telephone"></i>+213 799 71 96 19</a></li>
                            <li><a href="mailto:info@example.com"><i class="bi bi-envelope"></i>info@creativeschools.net</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-5">
                    <div class="header-right">
                        <ul class="header-list">
                            <li>
                                <select class="dropselect">
                        <option value="1">English</option>
                        <option value="2">French</option>
                        <option value="3">Arabic</option>
                        
                      </select>
                            </li>
                            {% if user.is_authenticated %}
                            <li><a href="{% url 'account_logout' %}"><i class="bi bi-box-arrow-left"></i></i>Logout</a></li>
                            <li><a href="#"><i class="bi bi-speedometer2"></i>Dashboard</a></li>
                            {% else %}
                            <li><a href="{% url 'account_login' %}"><i class="bi bi-box-arrow-right"></i>Login</a></li>
                            <li><a href="{% url 'account_signup' %}"><i class="bi bi-person-fill"></i>Register</a></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <header>
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="header-contain position-relative">
                        <div class="codex-brand"><a href="index.html"><img class="img-fluid light-logo" src="{% static 'main/assets/images/logo/logo.png' %}" alt="logo"><img class="img-fluid dark-logo" src="{% static 'main/assets/images/logo/logo-light.png' %}" alt=""></a></div>
                        <div class="menu-block">
                            <div class="cdx-layer menu-layer"></div>
                            <ul class="menu-list">
                                <li class="lg:hidden">
                                    <a class="close-menu" href="javascript:void(0);">
                                        <div class="menu-brand"><img class="img-fluid light-logo" src="{% static 'main/assets/images/logo/logo.png' %}" alt="logo"><img class="img-fluid dark-logo" src="{% static 'main/assets/images/logo/logo-light.png' %}" alt=""><i data-feather="x"></i></div>
                                    </a>
                                </li>
                                <li class="menu-item"><a href="{% url 'main:home' %}">Home</a>
                                    
                                </li>
                                <li class="menu-item"><a href="{% url 'main:about' %}">About Us</a>
                                    
                                </li>
                                <li class="menu-item"><a href="javascript:void(0);">Categories<i class="bi bi-chevron-down"></i></a>
                                    <ul class="submenu-list">
                                        {% for category in parent_categories %}
                                        <li><a href="courses.html">{{category.title}}</a></li>
                                        
                                        {% endfor %}
                                    </ul>
                                </li>
                                <li class="menu-item"><a href="{% url 'main:events' %}">Events</a>
                                    
                                </li>
                                <li class="menu-item"><a href="{% url 'blog:articles' %}">Blog</a>
                                    
                                </li>
                                <li class="menu-item"><a href="{% url 'main:contact' %}">Contact</a>
                                    
                                </li>
                            </ul>
                        </div>
                        <div class="nav-iconlist">
                            <ul>
                                <li class="search-toggle"><i data-feather="search"></i></li>
                                <li><a href="javascript:void(0);"><i data-feather="shopping-cart"></i></a>
                                    <div class="cart-dropdown">
                                        <ul class="dropdown-list" data-simplebar>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/1.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/2.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/3.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/4.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/5.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/6.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                        </ul>
                                        <div class="button-group"><a class="btn btn-primary btn-md" href="{% url 'cart:cart_summary' %}">view cart</a><a class="btn btn-primary btn-md ms-3" href="{% url 'cart:order' %}">Checkout</a></div>
                                    </div>
                                </li>
                                <li><a href="javascript:void(0);"><i data-feather="heart"></i></a>
                                    <div class="cart-dropdown">
                                        <ul class="dropdown-list" data-simplebar>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/1.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/2.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/3.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/4.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/5.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                            <li>
                                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/course/6.webp' %}" alt="">
                                                    <div class="media-body">
                                                        <h6><a href="javascrip:void(0);">Learn Angular</a></h6><span>
                                    <del>$230</del>$140</span>
                                                    </div>
                                                </div>
                                                <div class="close-pro"><i class="bi bi-x"></i></div>
                                            </li>
                                        </ul>
                                        <div class="button-group"><a class="btn btn-primary btn-md" href="{% url 'cart:wishlist' %}">view wishlist</a><a class="btn btn-primary btn-md ms-3" href="#">Add to cart</a></div>
                                    </div>
                                </li>
                            </ul><a class="btn btn-primary" href="{% url 'cart:plans' %}"><i class="bi bi-plus-circle"></i>Add Plan</a><a class="menu-action" href="javascript:void(0);"><span></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="search-bar">
        <div class="input-group">
            <input class="form-control" type="text" placeholder="What do you want to get course?">
            <div class="input-group-text"><a class="btn btn-primary" href="javascript:void(0);">search now</a></div>
        </div>
        <div class="clsoe-search"><i class="bi bi-x"></i></div>
    </div>
    <!-- header end-->
    {% block content %}{% endblock %}
    <!-- footer start       -->
    <footer class="space-py-100">
        <div class="container">
            <div class="grid grid-cols-12 footer-row">
                <div class="col-span-12 md:col-span-6 lg:col-span-4" data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">
                    <div class="footer-grid wow fadeInUp">
                        <div class="codex-brand"><a href="Javascript:void(0)"><img class="img-fluid" src="{% static 'main/assets/images/logo/logo-light.png' %}" alt=""></a></div>
                        <p>Get unlimited access to 17,000+ of Creative Schools’s top courses for your team. Learn and improve skills across business, tech, design, and more.</p>
                        <ul class="footer-contact">
                            <li><a href="javascript:void(0);"><i class="bi bi-geo-alt"></i>Cité DOUZI 03, N° 246 Sorecal, Bab Ezzouar, Algeria
</a></li>
                            <li><a href="tel:+38012365XXXXX"><i class="bi bi-telephone"></i>+213 799 96 71 19</a></li>
                            <li><a href="mailto:support@example.com"><i class="bi bi-envelope"></i>info@creativeschools.net</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-6 lg:col-span-2" data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                    <div class="footer-grid wow fadeInUp">
                        <h4>Quick Links</h4>
                        <ul class="footer-list">
                            <li><a href="about-us.html"><i class="bi bi-chevron-right"></i>About Us</a></li>
                            <li><a href="instructors.html"><i class="bi bi-chevron-right"></i>Our Team</a></li>
                            <li><a href="terms-service.html"><i class="bi bi-chevron-right"></i>Terms Of Service</a></li>
                            <li><a href="privacy-policy.html"><i class="bi bi-chevron-right"></i>Privacy policy</a></li>
                            <li><a href="Javascript:void(0)"><i class="bi bi-chevron-right"></i>Our Services</a></li>
                            <li><a href="blog.html"><i class="bi bi-chevron-right"></i>Latest Blog</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-6 lg:col-span-2" data-sal-delay="300" data-sal="slide-up" data-sal-duration="800">
                    <div class="footer-grid wow fadeInUp">
                        <h4>Support</h4>
                        <ul class="footer-list">
                            <li><a href="contact.html"><i class="bi bi-chevron-right"></i>Online Support</a></li>
                            <li><a href="faqs.html"><i class="bi bi-chevron-right"></i>FAQs</a></li>
                            <li><a href="Javascript:void(0)"><i class="bi bi-chevron-right"></i>Feedback</a></li>
                            <li><a href="contact.html"><i class="bi bi-chevron-right"></i>24/7 Service</a></li>
                            <li><a href="contact.html"><i class="bi bi-chevron-right"></i>Make Call</a></li>
                            <li><a href="contact.html"><i class="bi bi-chevron-right"></i>Contact Support</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-span-12 md:col-span-6 lg:col-span-4" data-sal-delay="400" data-sal="slide-up" data-sal-duration="800">
                    <div class="footer-grid wow fadeInUp">
                        <h4>Newsletter</h4>
                        <p>Subscribe Our Newsletter To Get First Latest Update And News</p>
                        <form>
                            <div class="input-group">
                                <input class="form-control" type="email" placeholder="Your Email" required><span class="input-group-text">
                    <button class="btn btn-primary" type="submit"><i class="bi bi-send"></i>Subscribe</button></span>
                            </div>
                        </form>
                    </div>
                    <div class="follow-us wow fadeInUp">
                        <h6>Follow Us:</h6>
                        <ul class="footer-social">
                            <li><a href="javascript:void(0);"><i class="bi bi-facebook"></i></a></li>
                            <li><a href="javascript:void(0);"><i class="bi bi-instagram"></i></a></li>
                            <li><a href="javascript:void(0);"><i class="bi bi-youtube"></i></a></li>
                            <li><a href="javascript:void(0);"><i class="bi bi-linkedin"></i></a></li>
                        </ul>
                    </div>
                    <div class="follow-us wow fadeInUp">
                        <h6>Download our mobile app: </h6>
                    </div>

                    <div class="andro_footer-buttons">
                        
                        <a href="#"> <img src="{% static 'main/assets/images/android.png' %}" alt="download it on the app store"></a>
                            <a href="#"> <img src="{% static 'main/assets/images/ios.png' %}" alt="download it on the app store"></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Tap To Top Start--><a class="scroll-top" href="Javascript:void(0)"><i class="bi bi-chevron-double-up"></i></a>
        <!-- Tap To Top End-->
    </footer>
    <div class="subfooter">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="footer-contain">
                        <p class="wow fadeInLeft" data-sal-delay="100" data-sal="slide-right" data-sal-duration="800">&copy; Copyright <a href="javascript:void(0);">Creative Schools</a> All Rights Reserved.</p>
                        <ul class="wow fadeInRight" data-sal-delay="200" data-sal="slide-left" data-sal-duration="800">
                            <li><a href="contact.html">Support</a></li>
                            <li><a href="terms-service.html">Terms Of Services</a></li>
                            <li><a href="privacy-policy.html">Privacy Policy</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer end-->
    <!-- chat bar start-->
    <div class="livechat-bar">
        <div class="chat-toggle"><a href="javascript:void(0);"><i data-feather="message-circle"></i></a></div>
        <div class="livechat-box">
            <div class="chat-header">
                <div class="chat-logo"><img class="img-fluid" src="{% static 'main/assets/images/logo/favicon.png' %}" alt="favicon"></div>
                <h6>live chat</h6><a class="close-chat" href="javascript:void(0);"><i data-feather="x">          </i></a>
            </div>
            <div class="chat-body" id="scrollbottom" data-simplebar>
                <ul class="chat-list">
                    <li>
                        <div class="user-chat">
                            <div class="chat-contain">
                                <div class="media"><img class="img-fluid" src="{% static 'main/assets/images/logo/favicon.png' %}" alt="favicon">
                                    <div class="media-body">
                                        <h6 class="admintitle">Creative Schools helper</h6>
                                        <p>Have a question? Please send the message, and our Creative Schools Helper will gladly help you!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="chat-footer">
                <div class="input-group">
                    <input class="form-control write-message" type="text" placeholder="Type Your Message">
                    <div class="input-group-text send-message"><i data-feather="send"></i></div>
                </div>
            </div>
        </div>
    </div>
    <!-- chat bar end-->
    <!-- cookie start-->
    <div class="cookie-grid">
        <p>We use cookies to make interactions with our websites and services easy and meaningful. For more information about the cookies we use or to find out how you can disable cookies, <a href="privacy-policy.html">click here.</a></p><a class="btn btn-primary btn-sm"
            href="javascript:void(0)">accept</a><a class="btn btn-primary btn-sm" href="javascript:void(0)">decline</a>
    </div>
    <!-- cookie end-->
    <!-- Cyber monday modal start-->
    <div class="modal theme-modal cyber-monday festival-popup">
        <div class="modal-content">
            <div class="btn-close"><i class="bi bi-x"></i></div>
            <div class="modal-body"> <img class="img-fluid img-src" src="{% static 'main/assets/images/popup-bg/2.webp' %}" alt="">
                <div>
                    <h2>Happy</h2>
                    <h3>New Year</h3>
                    <h4>save 60% off</h4><a class="btn btn-primary" href="javascript:void(0);">enroll now</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Cyber monday modal end-->
    <!-- jQuery js-->
    <script src="{% static 'main/assets/js/jquery-3.6.0.min.js' %}"></script>
    <!-- feather icon-->
    <script src="{% static 'main/assets/js/feather.min.js' %}"></script>
    <!-- swiper js-->
    <script src="{% static 'main/assets/js/swiper-bundle.min.js' %}"></script>
    <script src="{% static 'main/assets/js/swiper-custom.js' %}"></script>
    <!-- magnific popup js-->
    <script src="{% static 'main/assets/js/magnific-popup.min.js' %}"></script>
    <!-- modernizr js-->
    <script src="{% static 'main/assets/js/modernizr.min.js' %}"></script>
    <!-- nice select js-->
    <script src="{% static 'main/assets/js/jquery.nice-select.min.js' %}"></script>
    <!-- custom scrollbar-->
    <script src="{% static 'main/assets/js/simplebar.js' %}"></script>
    <!-- custom scrollbar-->
    <script src="{% static 'main/assets/js/sal.js' %}"></script>
    <!-- fancybox js-->
    <script src="{% static 'main/assets/js/fancybox.js' %}"></script>
    <!-- chat js-->
    <script src="{% static 'main/assets/js/chat.js' %}"></script>
    <!-- timer js-->
    <script src="{% static 'main/assets/js/countdown.js' %}"></script>
    <!-- custom script js-->
    <script src="{% static 'main/assets/js/script.js' %}"></script>
</body>

</html>