# Store List

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

The `Store List` component displays a list of all stores/locations from the Carpose backend. It shows a loading indicator while fetching data and then renders each store using the Store Item component.

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

```html
<div 
  data-carpose-component="store-list"
  data-api-key="your-api-key"
></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 "store-list"                                |
| `data-api-key`           | string | -       | API key for authentication with the Carpose backend services. Required for data fetching. |

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

* Displays a list of all store locations
* Shows a loading indicator while data is being fetched
* Responsive layout that adapts to different screen sizes
* Each store is displayed with its details (name, address, contact information)

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

```html
<div 
  data-carpose-component="store-list"
  data-api-key="your-api-key"
></div>
```

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

1. **Data Loading**:
   * On initialization, the component fetches store data from the API using the provided API key.
   * While data is loading, a loading screen is displayed.
   * Once data is loaded, the list of stores is rendered.
2. **Store Display**:
   * Each store is displayed using the Store Item component.
   * Stores are displayed in the order returned by the API.
   * Each store item typically includes the store name, address, contact information, and possibly an image.