# Offer Item

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

The `Offer Item` component displays a detailed view of a specific promotional offer, including images, conditions, highlights, and an integrated contact form. It serves as the detailed view after clicking on an offer in the Offer Slider.

### 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 Offer Item component in a standard HTML page:

```html
<div 
  data-carpose-component="offer-item"
  data-api-key="your-api-key"
  data-id="your-offer-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 "offer-item"                                |
| `data-api-key`           | string | -       | API key for authentication with the Carpose backend services. Required for data fetching. |
| `data-id`                | string | -       | ID of the specific offer to display. Required unless the ID is provided in the URL route. |

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

* Displays comprehensive information about a promotional offer
* Image carousel with thumbnails for easy navigation
* Highlights section with icons and descriptions
* Detailed condition information (price, financing terms, etc.)
* Related vehicles notification when similar cars are available
* Integrated contact form with:
  * Topic selection
  * Store/location selection
  * Contact information fields
  * Privacy policy consent

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

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

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

1. **Data Loading**:
   * On initialization, the component fetches offer data from the API using the provided offer ID and API key.
   * The component also checks for existing vehicles that match the offer's manufacturer and model criteria.
2. **Image Carousel**:
   * The component displays images in a carousel with navigation controls.
   * Thumbnails below allow direct navigation to specific images.
   * Autoplay is enabled by default but stops when manual navigation occurs.
3. **Related Vehicles**:
   * If matching vehicles exist in inventory, a notification is displayed.
   * Clicking on this notification navigates to the search page with appropriate filters applied.
4. **Contact Form**:
   * The integrated form validates required fields.
   * On submission, it sends the inquiry data to the backend.
   * Success/error messages are displayed after submission.
5. **Content Display**:
   * Headline and subheadline are prominently displayed.
   * Condition information shows price and financing terms.
   * Highlights section displays important features with icons.
   * Additional text content is rendered from HTML.