> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/vehicle-search-modules/06_vehicle-group.md).

# Vehicle Group

### Overview <a href="#overview" id="overview"></a>

The `Vehicle Group` component displays a collection of vehicles belonging to a specific group with sorting capabilities. Users can sort the vehicles by price, mileage, or power in ascending or descending order.

### Installation <a href="#installation" id="installation"></a>

The component is part of the Carpose application and requires no separate installation.

### Usage <a href="#usage" id="usage"></a>

To use the Vehicle Group component in a standard HTML page:

```html
<div
  data-carpose-component="vehicle-group"
  data-api-key="your-api-key"
  data-car-group-id="your-car-group-id"
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

The component reads configuration from data attributes on the provided element:

| Attribute                | Type   | Default | Description                                                                               |
| ------------------------ | ------ | ------- | ----------------------------------------------------------------------------------------- |
| `data-carpose-component` | string | -       | Identifies the component type, must be set to "car-group"                                 |
| `data-api-key`           | string | -       | API key for authentication with the Carpose backend services. Required for data fetching. |
| `data-car-group-id`      | string | -       | ID of the car group to display. Required to fetch the specific group of vehicles.         |

### Features <a href="#features" id="features"></a>

* Displays a collection of vehicles belonging to a specific group
* Provides sorting options for the displayed vehicles:
  * Price (ascending/descending)
  * Mileage (ascending/descending)
  * Power (ascending/descending)
* Responsive layout that adapts to different screen sizes
* Each vehicle is displayed using the CarCard component

### Example <a href="#example" id="example"></a>

```html
<div
  data-carpose-component="vehicle-group"
  data-api-key="your-api-key"
  data-car-group-id="550e8400-e29b-41d4-a716-446655440000"
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **Data Loading**:
   * On initialization, the component fetches car group data from the API using the provided car group ID and API key.
   * The component loads all vehicles associated with the specified car group.
2. **Sorting**:
   * Users can sort the displayed vehicles using the dropdown menu at the top.
   * Sorting options include:
     * Price (ascending/descending)
     * Mileage (ascending/descending)
     * Power (ascending/descending)
   * The default sort order is determined by the car group configuration in the backend.
   * Users can clear the sorting to return to the default order.
3. **Vehicle Display**:
   * Vehicles are displayed in a responsive grid layout using the CarCard component.
   * Each card shows key information about the vehicle.