{% extends 'home/homeLayout.html.twig' %}
{% import 'home/components/cours/coursGrid.html.twig' as courGrid %}
{% import 'home/components/cours/coursListItem.html.twig' as courList %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('css/filter_page.css') }}?v={{ random() }}">
{% endblock %}
{% block body %}
<div class="filter_page">
<div class="filter_header" style="background-image: url({{ asset('images/filter/header.png')}})">
<div class="seach_bar_holder">
<input type="text" class="form-control search_bar" value="{{ searchTerm }}" onkeydown="if (event.keyCode == 13) { event.preventDefault(); search(this.value); }">
</div>
</div>
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-3" style="padding-right: 0;">
<div class="filter_side_bar">
<h3>Categories</h3>
<ul class="categories">
{% for category in getCategories() %}
<li>
<div>
<span class="cat_title">
<div>{{ category.nom }}</div>
</span>
</div>
<ul class="souCategory">
{% for subcategoryArray in getSubcategories(category) %}
<li >
<div>
<span class="subCat_title">
<a href="{{ path('home_cours_filter_index', {'subcategory': subcategoryArray.subcategory_id}) }}">{{ subcategoryArray.subcategory }}</a>
</span>
</div>
{#
#}
</li>
{% endfor %}</ul>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col-md-9" style="padding-left: 0;">
<div>
<div class="top_filter">
<div class=" sort_by">
<label class="form-label">Par Page</label>
<select class="form-select" onchange="changeLimit(this.value)">
<option {% if limit == 3 %}selected{% endif %} value="3">3</option>
<option {% if limit == 9 %}selected{% endif %} value="9">9</option>
<option {% if limit == 15 %}selected{% endif %} value="15">15</option>
</select>
</div>
<div class="display_mode">
<a href="#" onclick="changeDisplay('grid');" class="single {% if displayMode == 'grid' %}selected{% endif %}">
<i class="fa-solid fa-grip"></i>
</a>
<a href="#" onclick="changeDisplay('list');" class="single {% if displayMode == 'list' %}selected{% endif %}">
<i class="fa-solid fa-list"></i>
</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
{% for cours in data %}
{% if displayMode =="list" %}
{{ courList.displayCourse(cours) }}
{% else %}
{{ courGrid.displayCourse(cours) }}
{% endif %}
{% endfor %}
</div>
</div>
<div class="pagination">
<nav aria-label="Page navigation">
<ul class="pagination">
{% if currentPage > 1 %}
<li class="page-item">
<a class="page-link" href="{{ path('home_cours_filter_index', {'page': currentPage - 1}) }}">Précédent</a>
</li>
{% endif %}
{% for page in 1..totalPages %}
<li class="page-item {% if page == currentPage %}active{% endif %}">
<a class="page-link" href="{{ path('home_cours_filter_index', {'page': page}) }}">{{ page }}</a>
</li>
{% endfor %}
{% if currentPage < totalPages %}
<li class="page-item">
<a class="page-link" href="{{ path('home_cours_filter_index', {'page': currentPage + 1}) }}">Suivant</a>
</li>
{% endif %}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
{{ parent() }}
<script>
function changeDisplay(value) {
var urlParams = new URLSearchParams(window.location.search);
urlParams.set('display_mode', value);
window.location.search = urlParams.toString();
}
function search(value) {
var urlParams = new URLSearchParams(window.location.search);
urlParams.set('search', value);
window.location.search = urlParams.toString();
}
$(document).ready(function() {
$('.form-select').change(function() {
var limit = $(this).val();
var urlParams = new URLSearchParams(window.location.search);
urlParams.set('limit', limit);
window.location.search = urlParams.toString();
});
});
</script>
{% endblock %}