experiences = WorkExperience.objects.all().order_by('-start_date')
     educations = FormalEducation.objects.all().order_by('-start_date')
     languages = Languages.objects.all()
     projects = Project.objects.all().order_by('-featured', 'id')  # Ordenar por destacados primero
 
     certifications = Certification.objects.all().order_by('offered_id')
     badges = get_all_badges()
 
     # Parchear URLs de proyectos si es necesario
     for project in projects:
         project.website = patch_url(project.website)
         project.repository = patch_url(project.repository)
 
     context = {
         'experiences': experiences,
         'educations': educations,
         'languages': languages,
         'projects': projects,
         'certifications': certifications,
         'badges': badges,

{% extends 'base.html' %}
{% block content %}
{% load static %}
{% load fontawesome_5 %}
{% load pygmentize %}
<br><br>
<section class="container-section mb-4">
    <div class="container-fluid">
        <div class="row g-0">
            <div class="portfolio-box-caption">
                <div class="row">
                    <div class="col-1"><img src="{% static 'img/worldwide.gif' %}" alt="Skills"></div>
                    <div class="col">
                        <h2 class="portfolio-box-headers" style="text-align:center">
                           Specialization Details</h2>
                    </div>
                </div>
            </div>
            <hr>

            <div class="container">
                <div class="row" >
                    <div class="container-fluid specialization-detail" style="background: white">
                        <div class="row">
                                <h3 class="mt-9" style="margin:10px">{{ specialization.name }}</h3>
                                <p  class="d-none d-sm-block show-read-more" style="margin:10px">{{ specialization.description|linebreaksbr }}</p>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-6 col-xs-12 ">
                                <embed class="d-flex align-cls-center" style="height: 300px; width:100%" src="{% static 'shared/' %}{{specialization.filePath }}" alt="Display certificate"/>
                            </div>
                            <div class="col">
                                <h5>Date successfully completed this Specialization: <q>{{specialization.release_date}}</q></h5>
                                <p><strong>Rating: </strong>{{ specialization.rating }}</p>
                                <h6>{{specialization.offered.category}} offered by: <strong> {{specialization.offered.name}}</strong></h6>
                                <a href="{{ specialization.web_site }}"> {{specialization.web_site }}</a>
                            </div>

                        </div>
                        <div class="row">
                            <h4 class="text-white p-3">More about this specialization, courses details</h4>
                            {% for course in courses %}
                                <div class="card">
                                    <div class="card-header">
                                        {{ course.name }}
                                    </div>
                                    <div class="card-body">
                                        <p class="card-text show-read-more">{{ course.description|linebreaksbr }}</p>
                                        <a href="{{ course.website }}" class="btn btn-warning">Go to website of this course</a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="container-section mb-4">
    <div class="container-fluid">
        <div class="row g-0">
            <div class="portfolio-box-caption">
                <div class="row">
                    <div class="col">
                        <h3 class="portfolio-box-headers" style="text-align:center">
                            Specializations & Professional Certifications</h3>
                    </div>
                </div>
            </div>
            <hr>
            <div class="container">
                <h3 class="mb-3 mt-4 p-4" style="background-color: #212529; color: #fff;"><i class="fas fa-list"> Specializations</i></h3>
                <div class="row">
                    <div class="col table-responsive">
                      <form>
                        <table class="table table-hover align-middle">
                            <thead class="table-dark">
                              <tr class="table-light">
                                  <th scope="col">
                                    <input type="text" name="name" value="" placeholder="Filter By Name Certification">
                                  </th>
                                  <th scope="col">
                                    <button type="submit" name="button" class="btn btn-warning"><a href="#specialization">Filter</a></button>
                                  </th>
                              </tr>
                              <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Institution/Company</th>
                                    <th scope="col">Release date</th>
                                    <th scope="col">View Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in specializations %}
                                    <tr>
                                        <th scope="row">{{ item.name }}</th>
                                        <td>{{ item.offered.name }}</td>
                                        <td>{{ item.release_date }}</td>
                                        <td>
                                            <a href="/specialization/{{item.id}}/details" >
                                                <button class="btn btn-success btn-sm rounded-0" type="button" data-toggle="tooltip" data-placement="top" title="ViewMore"><i class="fa fa-edit"></i></button>
                                            </a>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                      <td colspan="7">No se encontraron datos</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                      </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="container-section mb-4">
    <div class="container-fluid">
        <div class="row g-0">
            <div class="portfolio-box-caption">
                <div class="row">
                    <div class="col col-sm-10 col-xs-12">
                        <h3 class="portfolio-box-headers" style="text-align:center">
                            Show Code</h3>
                    </div>
                    <div class="col">
                        <button type="button" class="btn btn-light" onclick="$('#section-w').toggle();">
                            Show/Hide
                        </button>
                    </div>
                </div>
            </div>
            <hr>
            <div class="container" style="display:none;" id="section-w">
                <div class="row mb-4">
                    <div class="col-sm-6 col-xs-12">
                        <h4>views.py Code</h4>
                        <div class="sourcecode">
                            {{ views|pygmentize:"python3" }}
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <h4>Template</h4>
                        <div class="sourcecode">
                            {{ template|pygmentize:"html" }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}



    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>