# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carpose.de/vehicle-search-modules/vehicle-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.