@throttle_classes([TenCallsPerMinute])
def education(request):
    from .services.badges_scraper import ACREDITTA_PROFILE_URL, CREDLY_PROFILE_URL, get_all_badges

    educations = FormalEducation.objects.all().order_by('-start_date')
    languages = Languages.objects.all()
    specializations = Certification.objects.all().order_by('-release_date', '-id')
    other_educations = OtherFormations.objects.all().order_by('-start_date')
    certifications = Certification.objects.all().order_by('-release_date', '-id')
    if request.GET.get("name", None) is not None:
        specializations = specializations.filter(name__icontains=request.GET.get("name"))

    badges = get_all_badges()

    context = {
        'educations': educations,
        'languages': languages,
        'specializations': specializations,
        'other': other_educations,
        'certifications': certifications,
        'badges': badges,
        'credly_profile_url': CREDLY_PROFILE_URL,
        'acreditta_profile_url': ACREDITTA_PROFILE_URL,
        **show_code([education], 'education.html'),
    }
    return render(request, 'education.html', context)

{% extends 'base.html' %}
{% load i18n %}
{% block title %}{% trans "Education & Certifications" %} | Marco A. Parra F.{% endblock %}
{% block meta_description %}{% trans "Formal education, professional certifications, bootcamps and languages of Marco A. Parra F." %}{% endblock %}
{% block content %}
{% load static %}
{% load fontawesome_5 %}

    {% block formal_education %}
        {% include 'partials/formal_education.html' %}
    {% endblock %}

    {# ── Digital Badges: Credly + Acreditta ── #}
    {% include 'partials/badges_section.html' %}

    <section class="py-5 bg-light">
        <div class="container-fluid px-4 px-lg-5">

            {# ── Section header ── #}
            <div class="d-flex align-items-center gap-3 mb-4">
                <div>
                    <h2 class="h3 fw-bold mb-0">{% trans "Specializations & Professional Certifications" %}</h2>
                    <p class="text-muted small mb-0">{% trans "Courses, bootcamps, and continuing education" %}</p>
                </div>
            </div>

            {# ── Search bar ── #}
                <form method="get" class="search-form mt-4 mb-4" autocomplete="off">
                    <div class="row g-0 align-items-center w-100">
                        <div class="col-12 col-md-6">
                            <input type="text" name="q" class="form-control form-control-lg border-0 shadow-none ps-2" placeholder="Search specializations, bootcamps, courses..." aria-label="Search" value="{{ request.GET.q|default:'' }}">
                        </div>
                        <div class="col-12 col-md-6 d-grid">
                            <button class="btn btn-primary btn-lg search-btn w-100" type="submit">{% trans "Search" %}</button>
                        </div>
                    </div>
                </form>

            {# ── Tab navigation ── #}
            <ul class="nav nav-tabs nav-tabs-modern mb-4" id="educationTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="tab-specializations" data-bs-toggle="tab"
                            data-bs-target="#pane-specializations" type="button" role="tab">
                        <i class="fas fa-award me-2"></i>{% trans "Specializations" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-bootcamps" data-bs-toggle="tab"
                            data-bs-target="#pane-bootcamps" type="button" role="tab">
                        <i class="fas fa-laptop-code me-2"></i>{% trans "Bootcamps" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-diplomados" data-bs-toggle="tab"
                            data-bs-target="#pane-diplomados" type="button" role="tab">
                        <i class="fas fa-scroll me-2"></i>{% trans "Diplomas" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-courses" data-bs-toggle="tab"
                            data-bs-target="#pane-courses" type="button" role="tab">
                        <i class="fas fa-book me-2"></i>{% trans "Courses" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-certs" data-bs-toggle="tab"
                            data-bs-target="#pane-certs" type="button" role="tab">
                        <i class="fas fa-certificate me-2"></i>{% trans "Certificates" %}
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="educationTabsContent">

                {# ─── SPECIALIZATIONS tab ─── #}
                <div class="tab-pane fade show active" id="pane-specializations" role="tabpanel">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
                        {% for item in specializations %}
                        <div class="col">
                            <div class="card h-100 border-0 shadow-sm card-hover">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <span class="badge bg-primary-subtle text-primary rounded-pill">
                                            <i class="fas fa-award me-1"></i>Specialization
                                        </span>
                                        <small class="text-muted">{{ item.release_date }}</small>
                                    </div>
                                    <h5 class="card-title fw-semibold mb-1">{{ item.name }}</h5>
                                    <p class="card-text text-muted small mb-3">
                                        <i class="fas fa-university me-1"></i>{{ item.offered.name }}
                                    </p>
                                </div>
                                <div class="card-footer bg-transparent border-0 pt-0 d-flex gap-2">
                                    <a href="{% url 'detail_specialization' item.id %}"
                                       class="btn btn-sm btn-outline-primary flex-fill">
                                        {% trans "View Details" %} <i class="fas fa-arrow-right ms-1"></i>
                                    </a>
                                    {# Enlace de verificación (Coursera, Credly, Acreditta) o del repositorio del capstone: lo que un reclutador puede abrir. #}
                                    {% if item.web_site %}
                                    <a href="{{ item.web_site }}" target="_blank" rel="noopener"
                                       class="btn btn-sm btn-outline-secondary flex-fill"
                                       title="{{ item.web_site }}">
                                        {% if 'github.com' in item.web_site %}<i class="fab fa-github me-1" aria-hidden="true"></i>{% trans "Repository" %}{% else %}<i class="fas fa-external-link-alt me-1" aria-hidden="true"></i>{% trans "Verify" %}{% endif %}
                                    </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-12">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>No specializations found.
                                {% if request.GET.name %}
                                    Try a different search term.
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                {# ─── BOOTCAMPS tab ─── #}
                <div class="tab-pane fade" id="pane-bootcamps" role="tabpanel">
                    <div class="row row-cols-1 row-cols-md-2 g-4">
                        {% for item in other %}
                        {% if item.type == 'Bootcamp' %}
                        <div class="col">
                            <div class="card h-100 border-0 shadow-sm card-hover">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <span class="badge bg-success-subtle text-success rounded-pill">
                                            <i class="fas fa-laptop-code me-1"></i>Bootcamp
                                        </span>
                                        <small class="text-muted">{{ item.start_date|date:"M Y" }} – {{ item.end_date|date:"M Y" }}</small>
                                    </div>
                                    <h5 class="card-title fw-semibold mb-1">{{ item.title }}</h5>
                                    <p class="card-text text-muted small mb-0">
                                        <i class="fas fa-building me-1"></i>{{ item.institution }}
                                    </p>
                                </div>
                                <div class="card-footer bg-transparent border-0 pt-0">
                                    <a href="{% url 'detail_bootcamp' item.id %}"
                                       class="btn btn-sm btn-outline-success w-100">
                                        {% trans "View Details" %} <i class="fas fa-arrow-right ms-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>

                {# ─── DIPLOMADOS tab ─── #}
                <div class="tab-pane fade" id="pane-diplomados" role="tabpanel">
                    <div class="row row-cols-1 row-cols-md-2 g-4">
                        {% for item in other %}
                        {% if item.type == 'Diplomado' %}
                        <div class="col">
                            <div class="card h-100 border-0 shadow-sm card-hover">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <span class="badge bg-warning-subtle text-warning rounded-pill">
                                            <i class="fas fa-scroll me-1"></i>Diplomado
                                        </span>
                                        <small class="text-muted">{{ item.start_date|date:"M Y" }} – {{ item.end_date|date:"M Y" }}</small>
                                    </div>
                                    <h5 class="card-title fw-semibold mb-1">{{ item.title }}</h5>
                                    <p class="card-text text-muted small mb-1">
                                        <i class="fas fa-university me-1"></i>{{ item.institution }}
                                    </p>
                                    {% if item.description %}
                                    <p class="card-text small text-secondary">{{ item.description }}</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>

                {# ─── COURSES tab ─── #}
                <div class="tab-pane fade" id="pane-courses" role="tabpanel">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
                        {% for item in other %}
                        {% if item.type == 'Courses' %}
                        <div class="col">
                            <div class="card h-100 border-0 shadow-sm card-hover">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <span class="badge bg-info-subtle text-info rounded-pill">
                                            <i class="fas fa-book me-1"></i>Course
                                        </span>
                                        <small class="text-muted">{{ item.start_date|date:"M Y" }} – {{ item.end_date|date:"M Y" }}</small>
                                    </div>
                                    <h5 class="card-title fw-semibold mb-1">{{ item.title }}</h5>
                                    <p class="card-text text-muted small mb-1">
                                        <i class="fas fa-building me-1"></i>{{ item.institution }}
                                    </p>
                                    {% if item.description %}
                                    <p class="card-text small text-secondary">{{ item.description }}</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>

                {# ─── CERTIFICATES tab ─── #}
                <div class="tab-pane fade" id="pane-certs" role="tabpanel">
                    <div class="container-fluid px-0">
                        {% include 'partials/certificates_list.html' %}
                    </div>
                </div>

            </div>{# /tab-content #}
        </div>
    </section>

    {% include 'partials/_show_code.html' %}

    {# Auto-switch to bootcamps tab if filtered by bootcamp anchor #}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const hash = window.location.hash;
            const hashToTab = {
                '#bootcamp':   'tab-bootcamps',
                '#specialization': 'tab-specializations',
                '#diplomados': 'tab-diplomados',
                '#courses_operations_management': 'tab-courses',
                '#certifications': 'tab-certs',
            };
            if (hash && hashToTab[hash]) {
                const btn = document.getElementById(hashToTab[hash]);
                if (btn) bootstrap.Tab.getOrCreateInstance(btn).show();
            }
        });
    </script>

{% endblock %}