templates/web/vehicles/vehicle-search.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% block body %}
  3.     <!-- Breadscrumb Section -->
  4.     <div class="breadcrumb-bar">
  5.         <div class="container">
  6.             <div class="row align-items-center text-center">
  7.                 <div class="col-md-12 col-12">
  8.                     <h2 class="breadcrumb-title">Nuestros Vehículos</h2>
  9.                     <nav aria-label="breadcrumb" class="page-breadcrumb">
  10.                         <ol class="breadcrumb">
  11.                             <li class="breadcrumb-item"><a href="{{ path("web_home") }}">Inicio</a></li>
  12.                             <li class="breadcrumb-item active" aria-current="page">Vehículos</li>
  13.                         </ol>
  14.                     </nav>
  15.                 </div>
  16.             </div>
  17.         </div>
  18.     </div>
  19.     <!-- /Breadscrumb Section -->
  20.     <style>
  21.         .nav-item:hover {
  22.             top: -0.25rem;
  23.             transition: top 0.25s;
  24.         }
  25.     </style>
  27.     <div class="sortby-sec">
  28.         <div class="container">
  29.             <div class="sorting-div">
  30.                 <div class="row d-flex align-items-center">
  31.                     <div class="col-xl-12 col-lg-12 col-sm-12 col-12">
  32.                         <ul class="nav nav-pills nav-fill">
  33.                             {% for category in vehicleCategories %}
  34.                                 <li class="nav-item">
  35.                                     <button {% if loop.first %}
  36.                                         class="nav-link active"
  37.                                         aria-selected="true"
  38.                                     {% else %}
  39.                                         class="nav-link"
  40.                                         aria-selected="false"
  41.                                     {% endif %}
  42.                                             data-bs-toggle="tab"
  43.                                             data-category="category-{{ category.id }}"
  44.                                             type="button"
  45.                                             onclick="showVehicles(this)">
  46.                                         <img src="img/icons/category/{{ category.icon }}" alt="{{ category.name }}" width="60">
  47.                                         <br>
  48.                                         {{ category.name }}
  49.                                     </button>
  50.                                 </li>
  51.                             {% endfor %}
  52.                         </ul>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.         </div>
  57.     </div>
  59.     <!-- Car Grid View -->
  60.     <section class="section car-listing">
  61.         <div class="container">
  62.             <div class="row">
  63.                 <div class="col-lg-12">
  64.                     <div class="row" id="vehicles">
  65.                         {% set vehicleCategoryId = attribute(vehicleCategories|first, 'id') %}
  66.                         <!-- col -->
  67.                         {% for vehicle in vehicles %}
  68.                             <div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-12 vehicle category-{{ vehicle.model.vehicleCategory.id }}"
  69.                             {% if vehicleCategoryId != vehicle.model.vehicleCategory.id %}
  70.                                 style="display: none;"
  71.                             {% endif %}
  72.                             >
  73.                                 <div class="listing-item">
  74.                                     <div class="listing-img">
  75.                                         <a href="{{ path("web_vehicle_detail", {id: vehicle.id}) }}">
  76.                                             <img src="img/vehicles/thumbnail/{{ vehicle.imageThumbnail }}"
  77.                                                  class="img-fluid" alt="{{ vehicle.model.brand.name }}">
  78.                                         </a>
  79.                                         <div class="fav-item">
  80.                                             <span class="featured-text">
  81.                                                 {{ vehicle.model.brand.name }}
  82.                                             </span>
  83.                                             {# <a href="javascript:void(0)" class="fav-icon">
  84.                                                 <i class="feather-heart"></i>
  85.                                             </a> #}
  86.                                         </div>
  87.                                     </div>
  88.                                     <div class="listing-content">
  89.                                         <div class="listing-features">
  90.                                             {# <a href="javascript:void(0)" class="author-img">
  91.                                                 <img src="img/profiles/avatar-0.jpg" alt="author">
  92.                                             </a> #}
  93.                                             <h3 class="listing-title">
  94.                                                 <a href="{{ path("web_vehicle_detail", {id: vehicle.id}) }}">
  95.                                                     {{ vehicle.model.brand.name ~ ' ' ~ vehicle.model.name }}
  96.                                                 </a>
  97.                                             </h3>
  98.                                             {# <div class="list-rating">
  99.                                                 <i class="fas fa-star filled"></i>
  100.                                                 <i class="fas fa-star filled"></i>
  101.                                                 <i class="fas fa-star filled"></i>
  102.                                                 <i class="fas fa-star filled"></i>
  103.                                                 <i class="fas fa-star filled"></i>
  104.                                                 <span>(5.0)</span>
  105.                                             </div> #}
  106.                                         </div>
  107.                                         <div class="listing-details-group">
  108.                                             <ul>
  109.                                                 <li>
  110.                                                     <span><img src="img/icons/car-parts-05.svg" alt="Auto"></span>
  111.                                                     <p>Auto</p>
  112.                                                 </li>
  113.                                                 <li>
  114.                                                     <span><img src="img/icons/car-parts-02.svg" alt="10 KM"></span>
  115.                                                     <p>10 KM</p>
  116.                                                 </li>
  117.                                                 <li>
  118.                                                     <span><img src="img/icons/car-parts-03.svg" alt="Petrol"></span>
  119.                                                     <p>Petrol</p>
  120.                                                 </li>
  121.                                             </ul>
  122.                                             <ul>
  123.                                                 <li>
  124.                                                     <span><img src="img/icons/car-parts-04.svg" alt="Power"></span>
  125.                                                     <p>Power</p>
  126.                                                 </li>
  127.                                                 <li>
  128.                                                         <span><img src="img/icons/car-parts-05.svg"
  129.                                                                    alt="{{ vehicle.yearModel }}"></span>
  130.                                                     <p>{{ vehicle.yearModel }}</p>
  131.                                                 </li>
  132.                                                 <li>
  133.                                                     <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  134.                                                     <p>{{ vehicle.numberPassenger }} Personas</p>
  135.                                                 </li>
  136.                                             </ul>
  137.                                         </div>
  138.                                         {# <div class="listing-location-details">
  139.                                             <div class="listing-price">
  140.                                                 <span><i class="feather-map-pin"></i></span>Germany
  141.                                             </div>
  142.                                             <div class="listing-price">
  143.                                                 <h6>$400 <span>/ Day</span></h6>
  144.                                             </div>
  145.                                         </div> #}
  146.                                         <div class="listing-button">
  147.                                             <a href="{{ path("web_vehicle_detail", {id: vehicle.id}) }}"
  148.                                                class="btn btn-order">
  149.                                                 <span><i class="feather-calendar me-2"></i></span> Reservar ahora
  150.                                             </a>
  151.                                         </div>
  152.                                     </div>
  153.                                 </div>
  154.                             </div>
  155.                             <!-- /col -->
  156.                         {% endfor %}
  158.                         {# <!-- col -->
  159.                         <div class="col-xl-6 col-lg-6 col-md-6 col-12">
  160.                             <div class="listing-item">
  161.                                 <div class="listing-img">
  162.                                     <a href="listing-details.html">
  163.                                         <img src="img/cars/car-02.jpg" class="img-fluid" alt="KIA">
  164.                                     </a>
  165.                                     <div class="fav-item">
  166.                                         <span class="featured-text">KIA</span>
  167.                                         <a href="javascript:void(0)" class="fav-icon">
  168.                                             <i class="feather-heart"></i>
  169.                                         </a>
  170.                                     </div>
  171.                                 </div>
  172.                                 <div class="listing-content">
  173.                                     <div class="listing-features">
  174.                                         <a href="javascript:void(0)" class="author-img">
  175.                                             <img src="img/profiles/avatar-02.jpg" alt="author">
  176.                                         </a>
  177.                                         <h3 class="listing-title">
  178.                                             <a href="listing-details.html">Kia Soul 2016</a>
  179.                                         </h3>
  180.                                         <div class="list-rating">
  181.                                             <i class="fas fa-star filled"></i>
  182.                                             <i class="fas fa-star filled"></i>
  183.                                             <i class="fas fa-star filled"></i>
  184.                                             <i class="fas fa-star filled"></i>
  185.                                             <i class="fas fa-star filled"></i>
  186.                                             <span>(5.0)</span>
  187.                                         </div>
  188.                                     </div>
  189.                                     <div class="listing-details-group">
  190.                                         <ul>
  191.                                             <li>
  192.                                                 <span><img src="img/icons/car-parts-05.svg" alt="Auto"></span>
  193.                                                 <p>Auto</p>
  194.                                             </li>
  195.                                             <li>
  196.                                                 <span><img src="img/icons/car-parts-02.svg" alt="22 KM"></span>
  197.                                                 <p>22 KM</p>
  198.                                             </li>
  199.                                             <li>
  200.                                                 <span><img src="img/icons/car-parts-03.svg" alt="Petrol"></span>
  201.                                                 <p>Petrol</p>
  202.                                             </li>
  203.                                         </ul>
  204.                                         <ul>
  205.                                             <li>
  206.                                                 <span><img src="img/icons/car-parts-04.svg" alt="Diesel"></span>
  207.                                                 <p>Diesel</p>
  208.                                             </li>
  209.                                             <li>
  210.                                                 <span><img src="img/icons/car-parts-05.svg" alt="2016"></span>
  211.                                                 <p>2016</p>
  212.                                             </li>
  213.                                             <li>
  214.                                                 <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  215.                                                 <p>5 Persons</p>
  216.                                             </li>
  217.                                         </ul>
  218.                                     </div>
  219.                                     <div class="listing-location-details">
  220.                                         <div class="listing-price">
  221.                                             <span><i class="feather-map-pin"></i></span>Belgium
  222.                                         </div>
  223.                                         <div class="listing-price">
  224.                                             <h6>$80 <span>/ Day</span></h6>
  225.                                         </div>
  226.                                     </div>
  227.                                     <div class="listing-button">
  228.                                         <a href="listing-details.html" class="btn btn-order"><span><i class="feather-calendar me-2"></i></span>Rent Now</a>
  229.                                     </div>
  230.                                 </div>
  231.                             </div>
  232.                         </div>
  233.                         <!-- /col --> #}
  235.                         {# <!-- col -->
  236.                         <div class="col-xl-6 col-lg-6 col-md-6 col-12">
  237.                             <div class="listing-item">
  238.                                 <div class="listing-img">
  239.                                     <a href="listing-details.html">
  240.                                         <img src="img/cars/car-03.jpg" class="img-fluid" alt="Audi">
  241.                                     </a>
  242.                                     <div class="fav-item">
  243.                                         <span class="featured-text">Audi</span>
  244.                                         <a href="javascript:void(0)" class="fav-icon">
  245.                                             <i class="feather-heart"></i>
  246.                                         </a>
  247.                                     </div>
  248.                                 </div>
  249.                                 <div class="listing-content">
  250.                                     <div class="listing-features">
  251.                                         <a href="javascript:void(0)" class="author-img">
  252.                                             <img src="img/profiles/avatar-03.jpg" alt="author">
  253.                                         </a>
  254.                                         <h3 class="listing-title">
  255.                                             <a href="listing-details.html">Audi A3 2019 new</a>
  256.                                         </h3>
  257.                                         <div class="list-rating">
  258.                                             <i class="fas fa-star filled"></i>
  259.                                             <i class="fas fa-star filled"></i>
  260.                                             <i class="fas fa-star filled"></i>
  261.                                             <i class="fas fa-star filled"></i>
  262.                                             <i class="fas fa-star filled"></i>
  263.                                             <span>(5.0)</span>
  264.                                         </div>
  265.                                     </div>
  266.                                     <div class="listing-details-group">
  267.                                         <ul>
  268.                                             <li>
  269.                                                 <span><img src="img/icons/car-parts-05.svg" alt="Manual"></span>
  270.                                                 <p>Manual</p>
  271.                                             </li>
  272.                                             <li>
  273.                                                 <span><img src="img/icons/car-parts-02.svg" alt="10 KM"></span>
  274.                                                 <p>10 KM</p>
  275.                                             </li>
  276.                                             <li>
  277.                                                 <span><img src="img/icons/car-parts-03.svg" alt="Petrol"></span>
  278.                                                 <p>Petrol</p>
  279.                                             </li>
  280.                                         </ul>
  281.                                         <ul>
  282.                                             <li>
  283.                                                 <span><img src="img/icons/car-parts-04.svg" alt="Power"></span>
  284.                                                 <p>Power</p>
  285.                                             </li>
  286.                                             <li>
  287.                                                 <span><img src="img/icons/car-parts-05.svg" alt="2019"></span>
  288.                                                 <p>2019</p>
  289.                                             </li>
  290.                                             <li>
  291.                                                 <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  292.                                                 <p>4 Persons</p>
  293.                                             </li>
  294.                                         </ul>
  295.                                     </div>
  296.                                     <div class="listing-location-details">
  297.                                         <div class="listing-price">
  298.                                             <span><i class="feather-map-pin"></i></span>Newyork, USA
  299.                                         </div>
  300.                                         <div class="listing-price">
  301.                                             <h6>$45 <span>/ Day</span></h6>
  302.                                         </div>
  303.                                     </div>
  304.                                     <div class="listing-button">
  305.                                         <a href="listing-details.html" class="btn btn-order"><span><i class="feather-calendar me-2"></i></span>Rent Now</a>
  306.                                     </div>
  307.                                 </div>
  308.                             </div>
  309.                         </div>
  310.                         <!-- /col -->
  312.                         <!-- col -->
  313.                         <div class="col-xl-6 col-lg-6 col-md-6 col-12">
  314.                             <div class="listing-item">
  315.                                 <div class="listing-img">
  316.                                     <a href="listing-details.html">
  317.                                         <img src="img/cars/car-04.jpg" class="img-fluid" alt="Audi">
  318.                                     </a>
  319.                                     <div class="fav-item">
  320.                                         <span class="featured-text">Ferrai</span>
  321.                                         <a href="javascript:void(0)" class="fav-icon">
  322.                                             <i class="feather-heart"></i>
  323.                                         </a>
  324.                                     </div>
  325.                                 </div>
  326.                                 <div class="listing-content">
  327.                                     <div class="listing-features">
  328.                                         <a href="javascript:void(0)" class="author-img">
  329.                                             <img src="img/profiles/avatar-04.jpg" alt="author">
  330.                                         </a>
  331.                                         <h3 class="listing-title">
  332.                                             <a href="listing-details.html">Ferrari 458 MM Speciale</a>
  333.                                         </h3>
  334.                                         <div class="list-rating">
  335.                                             <i class="fas fa-star filled"></i>
  336.                                             <i class="fas fa-star filled"></i>
  337.                                             <i class="fas fa-star filled"></i>
  338.                                             <i class="fas fa-star filled"></i>
  339.                                             <i class="fas fa-star filled"></i>
  340.                                             <span>(5.0)</span>
  341.                                         </div>
  342.                                     </div>
  343.                                     <div class="listing-details-group">
  344.                                         <ul>
  345.                                             <li>
  346.                                                 <span><img src="img/icons/car-parts-05.svg" alt="Manual"></span>
  347.                                                 <p>Manual</p>
  348.                                             </li>
  349.                                             <li>
  350.                                                 <span><img src="img/icons/car-parts-02.svg" alt="14 KM"></span>
  351.                                                 <p>14 KM</p>
  352.                                             </li>
  353.                                             <li>
  354.                                                 <span><img src="img/icons/car-parts-03.svg" alt="Diesel"></span>
  355.                                                 <p>Diesel</p>
  356.                                             </li>
  357.                                         </ul>
  358.                                         <ul>
  359.                                             <li>
  360.                                                 <span><img src="img/icons/car-parts-04.svg" alt="Basic"></span>
  361.                                                 <p>Basic</p>
  362.                                             </li>
  363.                                             <li>
  364.                                                 <span><img src="img/icons/car-parts-05.svg" alt="2022"></span>
  365.                                                 <p>2022</p>
  366.                                             </li>
  367.                                             <li>
  368.                                                 <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  369.                                                 <p>5 Persons</p>
  370.                                             </li>
  371.                                         </ul>
  372.                                     </div>
  373.                                     <div class="listing-location-details">
  374.                                         <div class="listing-price">
  375.                                             <span><i class="feather-map-pin"></i></span>Newyork, USA
  376.                                         </div>
  377.                                         <div class="listing-price">
  378.                                             <h6>$160 <span>/ Day</span></h6>
  379.                                         </div>
  380.                                     </div>
  381.                                     <div class="listing-button">
  382.                                         <a href="listing-details.html" class="btn btn-order"><span><i class="feather-calendar me-2"></i></span>Rent Now</a>
  383.                                     </div>
  384.                                 </div>
  385.                             </div>
  386.                         </div>
  387.                         <!-- /col -->
  389.                         <!-- col -->
  390.                         <div class="col-xl-6 col-lg-6 col-md-6 col-12">
  391.                             <div class="listing-item">
  392.                                 <div class="listing-img">
  393.                                     <a href="listing-details.html">
  394.                                         <img src="img/cars/car-05.jpg" class="img-fluid" alt="Audi">
  395.                                     </a>
  396.                                     <div class="fav-item">
  397.                                         <span class="featured-text">Chevrolet</span>
  398.                                         <a href="javascript:void(0)" class="fav-icon">
  399.                                             <i class="feather-heart"></i>
  400.                                         </a>
  401.                                     </div>
  402.                                 </div>
  403.                                 <div class="listing-content">
  404.                                     <div class="listing-features">
  405.                                         <a href="javascript:void(0)" class="author-img">
  406.                                             <img src="img/profiles/avatar-05.jpg" alt="author">
  407.                                         </a>
  408.                                         <h3 class="listing-title">
  409.                                             <a href="listing-details.html">2018 Chevrolet Camaro</a>
  410.                                         </h3>
  411.                                         <div class="list-rating">
  412.                                             <i class="fas fa-star filled"></i>
  413.                                             <i class="fas fa-star filled"></i>
  414.                                             <i class="fas fa-star filled"></i>
  415.                                             <i class="fas fa-star filled"></i>
  416.                                             <i class="fas fa-star filled"></i>
  417.                                             <span>(5.0)</span>
  418.                                         </div>
  419.                                     </div>
  420.                                     <div class="listing-details-group">
  421.                                         <ul>
  422.                                             <li>
  423.                                                 <span><img src="img/icons/car-parts-05.svg" alt="Manual"></span>
  424.                                                 <p>Manual</p>
  425.                                             </li>
  426.                                             <li>
  427.                                                 <span><img src="img/icons/car-parts-02.svg" alt="18 KM"></span>
  428.                                                 <p>18 KM</p>
  429.                                             </li>
  430.                                             <li>
  431.                                                 <span><img src="img/icons/car-parts-03.svg" alt="Diesel"></span>
  432.                                                 <p>Diesel</p>
  433.                                             </li>
  434.                                         </ul>
  435.                                         <ul>
  436.                                             <li>
  437.                                                 <span><img src="img/icons/car-parts-04.svg" alt="Power"></span>
  438.                                                 <p>Power</p>
  439.                                             </li>
  440.                                             <li>
  441.                                                 <span><img src="img/icons/car-parts-05.svg" alt="2018"></span>
  442.                                                 <p>2018</p>
  443.                                             </li>
  444.                                             <li>
  445.                                                 <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  446.                                                 <p>4 Persons</p>
  447.                                             </li>
  448.                                         </ul>
  449.                                     </div>
  450.                                     <div class="listing-location-details">
  451.                                         <div class="listing-price">
  452.                                             <span><i class="feather-map-pin"></i></span>Germany
  453.                                         </div>
  454.                                         <div class="listing-price">
  455.                                             <h6>$36 <span>/ Day</span></h6>
  456.                                         </div>
  457.                                     </div>
  458.                                     <div class="listing-button">
  459.                                         <a href="listing-details.html" class="btn btn-order"><span><i class="feather-calendar me-2"></i></span>Rent Now</a>
  460.                                     </div>
  461.                                 </div>
  462.                             </div>
  463.                         </div>
  464.                         <!-- /col -->
  466.                         <!-- col -->
  467.                         <div class="col-xl-6 col-lg-6 col-md-6 col-12">
  468.                             <div class="listing-item">
  469.                                 <div class="listing-img">
  470.                                     <a href="listing-details.html">
  471.                                         <img src="img/cars/car-06.jpg" class="img-fluid" alt="Audi">
  472.                                     </a>
  473.                                     <div class="fav-item">
  474.                                         <span class="featured-text">Acura</span>
  475.                                         <a href="javascript:void(0)" class="fav-icon">
  476.                                             <i class="feather-heart"></i>
  477.                                         </a>
  478.                                     </div>
  479.                                 </div>
  480.                                 <div class="listing-content">
  481.                                     <div class="listing-features">
  482.                                         <a href="javascript:void(0)" class="author-img">
  483.                                             <img src="img/profiles/avatar-06.jpg" alt="author">
  484.                                         </a>
  485.                                         <h3 class="listing-title">
  486.                                             <a href="listing-details.html">Acura Sport Version</a>
  487.                                         </h3>
  488.                                         <div class="list-rating">
  489.                                             <i class="fas fa-star filled"></i>
  490.                                             <i class="fas fa-star filled"></i>
  491.                                             <i class="fas fa-star filled"></i>
  492.                                             <i class="fas fa-star filled"></i>
  493.                                             <i class="fas fa-star filled"></i>
  494.                                             <span>(5.0)</span>
  495.                                         </div>
  496.                                     </div>
  497.                                     <div class="listing-details-group">
  498.                                         <ul>
  499.                                             <li>
  500.                                                 <span><img src="img/icons/car-parts-05.svg" alt="Auto"></span>
  501.                                                 <p>Auto</p>
  502.                                             </li>
  503.                                             <li>
  504.                                                 <span><img src="img/icons/car-parts-02.svg" alt="12 KM"></span>
  505.                                                 <p>12 KM</p>
  506.                                             </li>
  507.                                             <li>
  508.                                                 <span><img src="img/icons/car-parts-03.svg" alt="Diesel"></span>
  509.                                                 <p>Diesel</p>
  510.                                             </li>
  511.                                         </ul>
  512.                                         <ul>
  513.                                             <li>
  514.                                                 <span><img src="img/icons/car-parts-04.svg" alt="Power"></span>
  515.                                                 <p>Power</p>
  516.                                             </li>
  517.                                             <li>
  518.                                                 <span><img src="img/icons/car-parts-05.svg" alt="2013"></span>
  519.                                                 <p>2013</p>
  520.                                             </li>
  521.                                             <li>
  522.                                                 <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  523.                                                 <p>5 Persons</p>
  524.                                             </li>
  525.                                         </ul>
  526.                                     </div>
  527.                                     <div class="listing-location-details">
  528.                                         <div class="listing-price">
  529.                                             <span><i class="feather-map-pin"></i></span>Newyork, USA
  530.                                         </div>
  531.                                         <div class="listing-price">
  532.                                             <h6>$30 <span>/ Day</span></h6>
  533.                                         </div>
  534.                                     </div>
  535.                                     <div class="listing-button">
  536.                                         <a href="listing-details.html" class="btn btn-order"><span><i class="feather-calendar me-2"></i></span>Rent Now</a>
  537.                                     </div>
  538.                                 </div>
  539.                             </div>
  540.                         </div>
  541.                         <!-- /col -->
  543.                         <!-- col -->
  544.                         <div class="col-xl-6 col-lg-6 col-md-6 col-12">
  545.                             <div class="listing-item">
  546.                                 <div class="listing-img">
  547.                                     <a href="listing-details.html">
  548.                                         <img src="img/cars/car-07.jpg" class="img-fluid" alt="Audi">
  549.                                     </a>
  550.                                     <div class="fav-item">
  551.                                         <span class="featured-text">Chevrolet</span>
  552.                                         <a href="javascript:void(0)" class="fav-icon">
  553.                                             <i class="feather-heart"></i>
  554.                                         </a>
  555.                                     </div>
  556.                                 </div>
  557.                                 <div class="listing-content">
  558.                                     <div class="listing-features">
  559.                                         <a href="javascript:void(0)" class="author-img">
  560.                                             <img src="img/profiles/avatar-07.jpg" alt="author">
  561.                                         </a>
  562.                                         <h3 class="listing-title">
  563.                                             <a href="listing-details.html">Chevrolet Pick Truck 3.5L</a>
  564.                                         </h3>
  565.                                         <div class="list-rating">
  566.                                             <i class="fas fa-star filled"></i>
  567.                                             <i class="fas fa-star filled"></i>
  568.                                             <i class="fas fa-star filled"></i>
  569.                                             <i class="fas fa-star filled"></i>
  570.                                             <i class="fas fa-star filled"></i>
  571.                                             <span>(5.0)</span>
  572.                                         </div>
  573.                                     </div>
  574.                                     <div class="listing-details-group">
  575.                                         <ul>
  576.                                             <li>
  577.                                                 <span><img src="img/icons/car-parts-05.svg" alt="Manual"></span>
  578.                                                 <p>Manual</p>
  579.                                             </li>
  580.                                             <li>
  581.                                                 <span><img src="img/icons/car-parts-02.svg" alt="10 KM"></span>
  582.                                                 <p>10 KM</p>
  583.                                             </li>
  584.                                             <li>
  585.                                                 <span><img src="img/icons/car-parts-03.svg" alt="Petrol"></span>
  586.                                                 <p>Petrol</p>
  587.                                             </li>
  588.                                         </ul>
  589.                                         <ul>
  590.                                             <li>
  591.                                                 <span><img src="img/icons/car-parts-04.svg" alt="Power"></span>
  592.                                                 <p>Power</p>
  593.                                             </li>
  594.                                             <li>
  595.                                                 <span><img src="img/icons/car-parts-05.svg" alt="2012"></span>
  596.                                                 <p>2012</p>
  597.                                             </li>
  598.                                             <li>
  599.                                                 <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  600.                                                 <p>5 Persons</p>
  601.                                             </li>
  602.                                         </ul>
  603.                                     </div>
  604.                                     <div class="listing-location-details">
  605.                                         <div class="listing-price">
  606.                                             <span><i class="feather-map-pin"></i></span>Spain
  607.                                         </div>
  608.                                         <div class="listing-price">
  609.                                             <h6>$77 <span>/ Day</span></h6>
  610.                                         </div>
  611.                                     </div>
  612.                                     <div class="listing-button">
  613.                                         <a href="listing-details.html" class="btn btn-order"><span><i class="feather-calendar me-2"></i></span>Rent Now</a>
  614.                                     </div>
  615.                                 </div>
  616.                             </div>
  617.                         </div>
  618.                         <!-- /col -->
  620.                         <!-- col -->
  621.                         <div class="col-xl-6 col-lg-6 col-md-6 col-12">
  622.                             <div class="listing-item">
  623.                                 <div class="listing-img">
  624.                                     <a href="listing-details.html">
  625.                                         <img src="img/cars/car-08.jpg" class="img-fluid" alt="Toyota">
  626.                                     </a>
  627.                                     <div class="fav-item">
  628.                                         <span class="featured-text">Toyota</span>
  629.                                         <a href="javascript:void(0)" class="fav-icon">
  630.                                             <i class="feather-heart"></i>
  631.                                         </a>
  632.                                     </div>
  633.                                 </div>
  634.                                 <div class="listing-content">
  635.                                     <div class="listing-features">
  636.                                         <a href="javascript:void(0)" class="author-img">
  637.                                             <img src="img/profiles/avatar-08.jpg" alt="author">
  638.                                         </a>
  639.                                         <h3 class="listing-title">
  640.                                             <a href="listing-details.html">Toyota Tacoma 4WD</a>
  641.                                         </h3>
  642.                                         <div class="list-rating">
  643.                                             <i class="fas fa-star filled"></i>
  644.                                             <i class="fas fa-star filled"></i>
  645.                                             <i class="fas fa-star filled"></i>
  646.                                             <i class="fas fa-star filled"></i>
  647.                                             <i class="fas fa-star filled"></i>
  648.                                             <span>(5.0)</span>
  649.                                         </div>
  650.                                     </div>
  651.                                     <div class="listing-details-group">
  652.                                         <ul>
  653.                                             <li>
  654.                                                 <span><img src="img/icons/car-parts-05.svg" alt="Auto"></span>
  655.                                                 <p>Auto</p>
  656.                                             </li>
  657.                                             <li>
  658.                                                 <span><img src="img/icons/car-parts-02.svg" alt="22 miles"></span>
  659.                                                 <p>22 miles</p>
  660.                                             </li>
  661.                                             <li>
  662.                                                 <span><img src="img/icons/car-parts-03.svg" alt="Diesel"></span>
  663.                                                 <p>Diesel</p>
  664.                                             </li>
  665.                                         </ul>
  666.                                         <ul>
  667.                                             <li>
  668.                                                 <span><img src="img/icons/car-parts-04.svg" alt="Power"></span>
  669.                                                 <p>Power</p>
  670.                                             </li>
  671.                                             <li>
  672.                                                 <span><img src="img/icons/car-parts-05.svg" alt="2019"></span>
  673.                                                 <p>2019</p>
  674.                                             </li>
  675.                                             <li>
  676.                                                 <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  677.                                                 <p>5 Persons</p>
  678.                                             </li>
  679.                                         </ul>
  680.                                     </div>
  681.                                     <div class="listing-location-details">
  682.                                         <div class="listing-price">
  683.                                             <span><i class="feather-map-pin"></i></span>Dallas, USA
  684.                                         </div>
  685.                                         <div class="listing-price">
  686.                                             <h6>$30 <span>/ Day</span></h6>
  687.                                         </div>
  688.                                     </div>
  689.                                     <div class="listing-button">
  690.                                         <a href="listing-details.html" class="btn btn-order"><span><i class="feather-calendar me-2"></i></span>Rent Now</a>
  691.                                     </div>
  692.                                 </div>
  693.                             </div>
  694.                         </div>
  695.                         <!-- /col -->
  697.                         <!-- col -->
  698.                         <div class="col-xl-6 col-lg-6 col-md-6 col-12">
  699.                             <div class="listing-item">
  700.                                 <div class="listing-img">
  701.                                     <a href="listing-details.html">
  702.                                         <img src="img/cars/car-09.jpg" class="img-fluid" alt="Toyota">
  703.                                     </a>
  704.                                     <div class="fav-item">
  705.                                         <span class="featured-text">Accura</span>
  706.                                         <a href="javascript:void(0)" class="fav-icon">
  707.                                             <i class="feather-heart"></i>
  708.                                         </a>
  709.                                     </div>
  710.                                 </div>
  711.                                 <div class="listing-content">
  712.                                     <div class="listing-features">
  713.                                         <a href="javascript:void(0)" class="author-img">
  714.                                             <img src="img/profiles/avatar-08.jpg" alt="author">
  715.                                         </a>
  716.                                         <h3 class="listing-title">
  717.                                             <a href="listing-details.html">Acura RDX FWD</a>
  718.                                         </h3>
  719.                                         <div class="list-rating">
  720.                                             <i class="fas fa-star filled"></i>
  721.                                             <i class="fas fa-star filled"></i>
  722.                                             <i class="fas fa-star filled"></i>
  723.                                             <i class="fas fa-star filled"></i>
  724.                                             <i class="fas fa-star filled"></i>
  725.                                             <span>(5.0)</span>
  726.                                         </div>
  727.                                     </div>
  728.                                     <div class="listing-details-group">
  729.                                         <ul>
  730.                                             <li>
  731.                                                 <span><img src="img/icons/car-parts-05.svg" alt="Auto"></span>
  732.                                                 <p>Auto</p>
  733.                                             </li>
  734.                                             <li>
  735.                                                 <span><img src="img/icons/car-parts-02.svg" alt="22 miles"></span>
  736.                                                 <p>42 miles</p>
  737.                                             </li>
  738.                                             <li>
  739.                                                 <span><img src="img/icons/car-parts-03.svg" alt="Petrol"></span>
  740.                                                 <p>Petrol</p>
  741.                                             </li>
  742.                                         </ul>
  743.                                         <ul>
  744.                                             <li>
  745.                                                 <span><img src="img/icons/car-parts-04.svg" alt="Power"></span>
  746.                                                 <p>Power</p>
  747.                                             </li>
  748.                                             <li>
  749.                                                 <span><img src="img/icons/car-parts-05.svg" alt="2019"></span>
  750.                                                 <p>2021</p>
  751.                                             </li>
  752.                                             <li>
  753.                                                 <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  754.                                                 <p>5 Persons</p>
  755.                                             </li>
  756.                                         </ul>
  757.                                     </div>
  758.                                     <div class="listing-location-details">
  759.                                         <div class="listing-price">
  760.                                             <span><i class="feather-map-pin"></i></span>Dallas, USA
  761.                                         </div>
  762.                                         <div class="listing-price">
  763.                                             <h6>$80 <span>/ Day</span></h6>
  764.                                         </div>
  765.                                     </div>
  766.                                     <div class="listing-button">
  767.                                         <a href="listing-details.html" class="btn btn-order"><span><i class="feather-calendar me-2"></i></span>Rent Now</a>
  768.                                     </div>
  769.                                 </div>
  770.                             </div>
  771.                         </div>
  772.                         <!-- /col -->
  774.                         <!-- col -->
  775.                         <div class="col-xl-6 col-lg-6 col-md-6 col-12">
  776.                             <div class="listing-item">
  777.                                 <div class="listing-img">
  778.                                     <a href="listing-details.html">
  779.                                         <img src="img/cars/car-02.jpg" class="img-fluid" alt="Toyota">
  780.                                     </a>
  781.                                     <div class="fav-item">
  782.                                         <span class="featured-text">Kia Soul</span>
  783.                                         <a href="javascript:void(0)" class="fav-icon">
  784.                                             <i class="feather-heart"></i>
  785.                                         </a>
  786.                                     </div>
  787.                                 </div>
  788.                                 <div class="listing-content">
  789.                                     <div class="listing-features">
  790.                                         <a href="javascript:void(0)" class="author-img">
  791.                                             <img src="img/profiles/avatar-02.jpg" alt="author">
  792.                                         </a>
  793.                                         <h3 class="listing-title">
  794.                                             <a href="listing-details.html">Kia Soul 2016</a>
  795.                                         </h3>
  796.                                         <div class="list-rating">
  797.                                             <i class="fas fa-star filled"></i>
  798.                                             <i class="fas fa-star filled"></i>
  799.                                             <i class="fas fa-star filled"></i>
  800.                                             <i class="fas fa-star filled"></i>
  801.                                             <i class="fas fa-star filled"></i>
  802.                                             <span>(5.0)</span>
  803.                                         </div>
  804.                                     </div>
  805.                                     <div class="listing-details-group">
  806.                                         <ul>
  807.                                             <li>
  808.                                                 <span><img src="img/icons/car-parts-05.svg" alt="Auto"></span>
  809.                                                 <p>Auto</p>
  810.                                             </li>
  811.                                             <li>
  812.                                                 <span><img src="img/icons/car-parts-02.svg" alt="22 miles"></span>
  813.                                                 <p>42 miles</p>
  814.                                             </li>
  815.                                             <li>
  816.                                                 <span><img src="img/icons/car-parts-03.svg" alt="Petrol"></span>
  817.                                                 <p>Petrol</p>
  818.                                             </li>
  819.                                         </ul>
  820.                                         <ul>
  821.                                             <li>
  822.                                                 <span><img src="img/icons/car-parts-04.svg" alt="Power"></span>
  823.                                                 <p>Power</p>
  824.                                             </li>
  825.                                             <li>
  826.                                                 <span><img src="img/icons/car-parts-05.svg" alt="2019"></span>
  827.                                                 <p>2021</p>
  828.                                             </li>
  829.                                             <li>
  830.                                                 <span><img src="img/icons/car-parts-06.svg" alt="Persons"></span>
  831.                                                 <p>5 Persons</p>
  832.                                             </li>
  833.                                         </ul>
  834.                                     </div>
  835.                                     <div class="listing-location-details">
  836.                                         <div class="listing-price">
  837.                                             <span><i class="feather-map-pin"></i></span>Dallas, USA
  838.                                         </div>
  839.                                         <div class="listing-price">
  840.                                             <h6>$77 <span>/ Day</span></h6>
  841.                                         </div>
  842.                                     </div>
  843.                                     <div class="listing-button">
  844.                                         <a href="listing-details.html" class="btn btn-order"><span><i class="feather-calendar me-2"></i></span>Rent Now</a>
  845.                                     </div>
  846.                                 </div>
  847.                             </div>
  848.                         </div>
  849.                         <!-- /col --> #}
  850.                     </div>
  851.                     {#                    <!--Pagination--> #}
  852.                     {#                    <div class="blog-pagination"> #}
  853.                     {#                        <nav> #}
  854.                     {#                            <ul class="pagination page-item justify-content-center"> #}
  855.                     {#                                <li class="previtem"> #}
  856.                     {#                                    <a class="page-link" href="#"><i class="fas fa-regular fa-arrow-left me-2"></i> Prev</a> #}
  857.                     {#                                </li> #}
  858.                     {#                                <li class="justify-content-center pagination-center"> #}
  859.                     {#                                    <div class="page-group"> #}
  860.                     {#                                        <ul> #}
  861.                     {#                                            <li class="page-item"> #}
  862.                     {#                                                <a class="page-link" href="#">1</a> #}
  863.                     {#                                            </li> #}
  864.                     {#                                            <li class="page-item"> #}
  865.                     {#                                                <a class="active page-link" href="#">2 <span class="visually-hidden">(current)</span></a> #}
  866.                     {#                                            </li> #}
  867.                     {#                                            <li class="page-item"> #}
  868.                     {#                                                <a class="page-link" href="#">3</a> #}
  869.                     {#                                            </li> #}
  870.                     {#                                            <li class="page-item"> #}
  871.                     {#                                                <a class="page-link" href="#">4</a> #}
  872.                     {#                                            </li> #}
  873.                     {#                                            <li class="page-item"> #}
  874.                     {#                                                <a class="page-link" href="#">5</a> #}
  875.                     {#                                            </li> #}
  876.                     {#                                        </ul> #}
  877.                     {#                                    </div> #}
  878.                     {#                                </li> #}
  879.                     {#                                <li class="nextlink"> #}
  880.                     {#                                    <a class="page-link" href="#">Next <i class="fas fa-regular fa-arrow-right ms-2"></i></a> #}
  881.                     {#                                </li> #}
  882.                     {#                            </ul> #}
  883.                     {#                        </nav> #}
  884.                     {#                    </div> #}
  885.                     {#                    <!--/Pagination--> #}
  887.                 </div>
  888.             </div>
  889.         </div>
  890.     </section>
  891.     <!-- /Car Grid View -->
  893. {% endblock %}
  894. {% block javascripts %}
  895.     <script>
  896.         function showVehicles(button) {
  897.             const categorySelected = button.getAttribute("data-category");
  898.             const cards = document.querySelectorAll("#vehicles .vehicle");
  899.             console.log(cards);
  901.             for (let i = 0; i < cards.length; i++) {
  902.                 if (cards[i].classList.contains(categorySelected)) {
  903.                     cards[i].style.display = "block";
  904.                 } else {
  905.                     cards[i].style.display = "none";
  906.                 }
  907.             }
  908.         }
  909.     </script>
  910. {% endblock %}