src/StartPlatz/Bundle/MentorsBundle/Resources/views/Public/accelerator-mentors.html.twig line 1

Open in your IDE?
  1. {% extends '@StartPlatzStyleBundle/Bootstrap4/base.homepage.oneColumn.html.twig' %}
  3. {% block title %}{{ pageTitle }}{% endblock %}
  5. {% block additionalHead %}
  6.     <link rel="stylesheet" href="{{ asset('bundles/startplatzstyle/css/startplatz.accelerator.css') }}">
  7. {% endblock %}
  9. {% block navigation %}
  10.     {# Use menu from WordPress (loaded by controller) #}
  11.     {{ menu|raw }}
  12. {% endblock %}
  14. {% block content %}
  15. <div class="container with-program-banner">
  16.     <div class="text-center mb-5 pt-5">
  17.         <h1 class="display-4">{{ pageTitle }}</h1>
  18.         <p class="lead">{{ pageDescription }}</p>
  19.     </div>
  21.     {# Filter buttons #}
  22.     <div class="row mb-4">
  23.         <div class="col-12 text-center">
  24.             <div class="btn-group" role="group">
  25.                 <button type="button" class="btn btn-primary filter-btn" data-filter="all">
  26.                     {{ isEnglish ? 'All' : 'Alle' }}
  27.                 </button>
  28.                 <button type="button" class="btn btn-outline-primary filter-btn" data-filter="tech-development">
  29.                     Tech & Development
  30.                 </button>
  31.                 <button type="button" class="btn btn-outline-primary filter-btn" data-filter="business-strategy">
  32.                     Business & Strategy
  33.                 </button>
  34.                 <button type="button" class="btn btn-outline-primary filter-btn" data-filter="sales-marketing">
  35.                     Sales & Marketing
  36.                 </button>
  37.                 <button type="button" class="btn btn-outline-primary filter-btn" data-filter="finance-legal">
  38.                     Finance & Legal
  39.                 </button>
  40.                 <button type="button" class="btn btn-outline-primary filter-btn" data-filter="product-design">
  41.                     Product & Design
  42.                 </button>
  43.             </div>
  44.         </div>
  45.     </div>
  47.     {# Search bar #}
  48.     <div class="row mb-4">
  49.         <div class="col-md-6 mx-auto">
  50.             <form method="get">
  51.                 <div class="input-group">
  52.                     <input type="text" name="search" class="form-control" placeholder="Mentor suchen..." value="{{ searchQuery }}">
  53.                     <div class="input-group-append">
  54.                         <button class="btn btn-primary" type="submit">
  55.                             <i class="fas fa-search"></i> Suchen
  56.                         </button>
  57.                     </div>
  58.                 </div>
  59.             </form>
  60.         </div>
  61.     </div>
  63.     {# Mentor cards grid #}
  64.     <div class="row" id="mentors-grid">
  65.         {% if mentors is empty %}
  66.             <div class="col-12 text-center">
  67.                 <p class="text-muted">Noch keine Mentoren verfügbar. Neue Mentoren werden bald hinzugefügt!</p>
  68.             </div>
  69.         {% else %}
  70.             {% for mentor in mentors %}
  71.                 <div class="col-md-4 mb-4 mentor-col">
  72.                     {% include '@StartPlatzMentors/Public/_accelerator-mentor-card.html.twig' with {'mentor': mentor, 'language': isEnglish ? 'en' : 'de'} %}
  73.                 </div>
  74.             {% endfor %}
  75.         {% endif %}
  76.     </div>
  78.     {# No results message (hidden by default) #}
  79.     <div class="row" id="no-results" style="display: none;">
  80.         <div class="col-12 text-center">
  81.             <p class="text-muted">
  82.                 {{ isEnglish ? 'No mentors found for this category.' : 'Keine Mentoren in dieser Kategorie gefunden.' }}
  83.             </p>
  84.         </div>
  85.     </div>
  86. </div>
  87. {% endblock %}
  89. {% block javascripts %}
  90.     {{ parent() }}
  91.     <script>
  92.         // Filter functionality
  93.         document.addEventListener('DOMContentLoaded', function() {
  94.             const filterButtons = document.querySelectorAll('.filter-btn');
  95.             const mentorCols = document.querySelectorAll('.mentor-col');
  96.             const noResultsMessage = document.getElementById('no-results');
  98.             filterButtons.forEach(button => {
  99.                 button.addEventListener('click', function() {
  100.                     // Update button states
  101.                     filterButtons.forEach(btn => {
  102.                         btn.classList.remove('btn-primary');
  103.                         btn.classList.add('btn-outline-primary');
  104.                     });
  105.                     this.classList.remove('btn-outline-primary');
  106.                     this.classList.add('btn-primary');
  108.                     // Get selected filter
  109.                     const filter = this.dataset.filter;
  111.                     // Filter mentor cards
  112.                     let visibleCount = 0;
  113.                     mentorCols.forEach(col => {
  114.                         const card = col.querySelector('.mentor-card');
  115.                         if (card) {
  116.                             const categories = card.dataset.categories ? card.dataset.categories.split(',') : [];
  118.                             if (filter === 'all' || categories.includes(filter)) {
  119.                                 col.style.display = 'block';
  120.                                 visibleCount++;
  121.                             } else {
  122.                                 col.style.display = 'none';
  123.                             }
  124.                         }
  125.                     });
  127.                     // Show/hide no results message
  128.                     if (visibleCount === 0) {
  129.                         noResultsMessage.style.display = 'block';
  130.                     } else {
  131.                         noResultsMessage.style.display = 'none';
  132.                     }
  133.                 });
  134.             });
  136.             // Trigger click on "All" button to initialize
  137.             const allButton = document.querySelector('.filter-btn[data-filter="all"]');
  138.             if (allButton) {
  139.                 allButton.click();
  140.             }
  141.         });
  142.     </script>
  144.     <script src="{{ asset('bundles/startplatzstyle/js/startplatz.accelerator.js') }}"></script>
  145. {% endblock %}