{% set current_theme = current_theme() %} {% import "learning/resources/type_macros.html" as r_macros %} {% set
permitir_docente = docente_asignado(id_curso=curso.codigo) %} {% set permitir_moderador =
moderador_asignado(id_curso=curso.codigo) %} {% set permitir_estudiante = estudiante_asignado(id_curso=curso.codigo) %} {% set
permitir_editar = current_user.tipo == "admin" or permitir_docente %}

<!doctype html>
<html lang="{{ current_locale() }}" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>{{ curso.codigo | upper }} - {{ curso.nombre | title }}</title>

        {{ current_theme.local_style() }}
    </head>

    <body>
        {{ current_theme.navbar() }}

        <main>
            {{ current_theme.notify() }}

            <div class="container px-0 py-3" id="icon-grid">
                <h4 class="pb-2 border-bottom">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a class="text-reset text-decoration-none link-dark" href="{{ url_for('home.panel') }}"
                                    >{{ _("Inicio") }}</a
                                >
                            </li>
                            <li class="breadcrumb-item">
                                <a
                                    class="text-reset text-decoration-none link-dark"
                                    href="{{ url_for('course.curso', course_code=curso.codigo) }}"
                                    >{{ curso.nombre }}</a
                                >
                            </li>
                            <li class="breadcrumb-item">{{ recurso.nombre }}</li>
                        </ol>
                    </nav>
                </h4>

                <div class="row">
                    <div class="col-sm-8">
                        <!-- External Link Warning Card -->
                        <div class="card border-warning mb-4">
                            <div class="card-header bg-warning bg-opacity-10 border-warning">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-exclamation-triangle text-warning me-2"></i>
                                    Enlace externo
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <h6 class="mb-2">{{ recurso.nombre }}</h6>
                                        <p class="text-muted mb-3">
                                            Estás a punto de salir de la plataforma. El enlace se abrirá en una nueva pestaña.
                                        </p>
                                        <div class="d-flex gap-2">
                                            <a
                                                href="{{ recurso.url }}"
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                class="btn btn-primary"
                                            >
                                                <i class="bi bi-box-arrow-up-right me-2"></i>
                                                Abrir enlace
                                            </a>
                                            <button
                                                type="button"
                                                class="btn btn-outline-secondary"
                                                onclick="copyToClipboard('{{ recurso.url }}')"
                                            >
                                                <i class="bi bi-clipboard me-2"></i>
                                                Copiar URL
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-center">
                                        <i class="bi bi-globe display-1 text-primary opacity-25"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Resource Description -->
                        {% if recurso.descripcion_html_preformateado %} {{ recurso.descripcion | safe }}} {% else %} {{
                        markdown2html(recurso.descripcion) | safe }}} {% endif %}

                        <!-- AdSense Ad after resource description for free courses -->
                        {% if adsense_enabled() and not curso.pagado %} {% set ad_code = ad_large_rectangle() %} {% if ad_code
                        %}
                        <div class="mt-4 mb-4" style="text-align: center">
                            <small class="text-muted">Publicidad</small>
                            {{ ad_code | safe }}}
                        </div>
                        {% endif %} {% endif %}
                    </div>

                    <div class="col-sm-4">
                        {{ r_macros.resource_nav(recursos=recursos, secciones=secciones, user_progress=user_progress,
                        evaluaciones=evaluaciones, evaluation_attempts=evaluation_attempts) }}
                    </div>
                </div>
            </div>

            {{ r_macros.nav_footer(indice=indice, curso=recurso.curso, type=recurso.tipo, codigo=recurso.id,
            recurso_completado=recurso_completado) }}
        </main>

        <script>
            function copyToClipboard(text) {
                navigator.clipboard
                    .writeText(text)
                    .then(function () {
                        // Show temporary success feedback
                        const button = event.target.closest("button")
                        const originalText = button.innerHTML
                        button.innerHTML = '<i class="bi bi-check me-2"></i>Copiado'
                        button.classList.remove("btn-outline-secondary")
                        button.classList.add("btn-success")

                        setTimeout(function () {
                            button.innerHTML = originalText
                            button.classList.remove("btn-success")
                            button.classList.add("btn-outline-secondary")
                        }, 2000)
                    })
                    .catch(function (err) {
                        console.error("Error al copiar: ", err)
                        alert("No se pudo copiar el enlace")
                    })
            }
        </script>
    </body>
</html>
