{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Labsol Academy</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">


    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet" type="text/css">
    <link href="{% static 'css/clases_estudiantes.css'  %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/animate.min.css'  %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/owl.carousel.min.css'  %} " rel="stylesheet" type="text/css">
    <link href="{% static 'css/bootstrap.min.css'  %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/style.css'  %} " rel="stylesheet" type="text/css">
    <link ensaje_inscribirse="{% static 'css/buscador.css'  %} " rel="stylesheet" type="text/css">

</head>
<body class="d-flex flex-column min-vh-100">

    <!-- Spinner Start -->
    <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Cargando...</span>
        </div>
    </div>
    <!-- Spinner End -->

    <!-- Navbar Start -->
    <nav class="navbar navbar-expand-lg bg-white navbar-light shadow sticky-top p-0">
        
        <a href="{% url 'iniciar_sesion' %}" class="navbar-brand d-flex align-items-center px-1 px-lg-5"> 
            <img class="m-0 text-primary" src="{% static 'img/Logos Labsol Academy 2.png'  %}" alt="logo" style="max-width: 250px; max-height: 250px; min-width: 50px; min-height: 50px;" >    
        </a>
        <button class="navbar-toggler me-2" type="button" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#navbar-menu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="navbar-nav ms-auto align-items-lg-center p-4 p-lg-0">
                {% if request.user.is_authenticated %}
                    
                    {% if request.user.user_type == 'estudiante' %}
                    <a href="{% url 'curso:lista_cursos_estudiante' %}" class="nav-item nav-link active">Inicio</a>
                    <a href="{% url 'curso:todos_los_cursos' %}" class="nav-item nav-link">Cursos</a>
                    <a href="{% url 'videollamada:lista_videollamada' %}" class="nav-item nav-link">Conferencias</a>
                    <form action="{% url 'buscar' %}" method="get" class="py-4 mr-3">
                        <input type="search" value="{{ query }}" class="buscador form-control" placeholder="Buscar" aria-label="Search in website" name="q" id="search-input">
                    </form>
                    <div id="search-results" class="position-absolute top-140 scrollable bg-black" style="display: none; background-color: #181d38; right:20px; top:80px; border-radius: 10px;"></div>
                    {% endif %}

                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link d-flex lh-1 text-reset px-2 py-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                            <img src="{{ request.user.profile_picture.url }}" style="width: 30px; height: 30px;">
                            <div class="d-none d-xl-block ps-2">
                                <div>{{ request.user.first_name }}</div>
                                <div class="mt-1 small text-muted">{{ request.user.user_type }} {% if request.user.is_superuser %} Super-admin {% endif %}</div>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                            <a href="{% url 'usuario:perfil' %}" class="dropdown-item">Ver perfil</a>
                            {% if request.user.user_type == 'estudiante' %}
                            <a href="{% url 'curso:mostrar_avance' %}" class="dropdown-item">Avance</a>
                            <a href="{% url 'curso:cursos_inscritos' %}" class="dropdown-item">Mis cursos</a>
                            <a href="{% url 'examen:calificacion_estudiante' %}" class="dropdown-item">Calificaciones</a>
                            {% endif %}
                            <div class="dropdown-divider"></div>
                            <a href="{% url 'usuario:cerrar_sesion' %}" class="dropdown-item">Cerrar sesión</a>
                        </div>
                    </div>
                        
                    
                {% else %}
                    <form action="{% url 'buscar' %}" method="get" class="me-3 py-3">
                        <input type="search" value="{{ query }}" class="buscador form-control" placeholder="Buscar" aria-label="Search in website" name="q" id="search-input">
                    </form>
                    {% if curso or politicas == False %}
                        <a href="{% url 'iniciar_sesion' %}" class="nav-item btn btn-primary py-4 px-lg-5 d-lg-block">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-app-window" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
                                <path d="M6 8h.01" />
                                <path d="M9 8h.01" />
                            </svg>
                            Regresar a la página inicial
                        </a>
                    {% else %}
                        <a class="nav-item nav-link active" style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#registro">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                                <path d="M16 19h6"></path>
                                <path d="M19 16v6"></path>
                                <path d="M6 21v-2a4 4 0 0 1 4 -4h4"></path>
                            </svg>
                            Registrarse
                        </a>
                        <a data-bs-toggle="modal" data-bs-target="#login" class="nav-item btn btn-primary py-4 px-lg-5 d-lg-block">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-logout" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
                                <path d="M9 12h12l-3 -3"></path>
                                <path d="M18 15l3 -3"></path>
                            </svg>
                            Iniciar sesión
                        </a>
                    {% endif %}
                    <div id="search-results" class="search-results-container" style="display: none;"></div>
                {% endif %}
            </div>
        </div>
    </nav>
     
    <!-- Navbar End -->

    <div class="flex-grow-1">
        {% block contenido %} {% endblock contenido %}
    </div>

    {% block pag %} {% endblock pag%}
    <div class="container-fluid bg-dark text-light footer">
        <div class="container">
            <div class="copyright">
                <div class="row">
                    <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                        &copy; <a class="border-bottom" href="#">Labsol Academy</a> Todos los derechos reservados, 2023. <br>
                        Hecho por el <a class="border-bottom">Laboratorio de Software Libre</a><br><br>
                    </div>
                    <div class="col-md-6 text-center text-md-end">
                        <div class="footer-menu">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
                                </svg>
                            </a>
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z"></path>
                                </svg>
                            </a>
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-app-window" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
                                    <path d="M6 8h.01"></path>
                                    <path d="M9 8h.01"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% block modal_externo %} {% endblock modal_externo %}
    {% block js_externo %} {% endblock js_externo %}
    <script src="{% static 'js/display_etiquetas.js' %}"></script>
    <script src="{% static 'js/conexion.js' %}"></script>
    <script src="{% static 'js/tabler.min.js' %}" defer></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="{% static 'js/wow.min.js'  %}  "></script>
    <script src="{% static 'js/owl.carousel.min.js'  %}"></script>
    {% comment %} <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script> {% endcomment %}
    <script src="{% static 'js/main.js'  %} "></script>
</body>

</html>