From 8ef9d21b9d7359313ca9de10a23137056f66e411 Mon Sep 17 00:00:00 2001
From: Olivier Auverlot <@olivierauverlot>
Date: Sat, 3 Feb 2024 14:17:22 +0100
Subject: [PATCH 01/11] Initial carousel component implementation

---
 .../sqlpage/migrations/34_carousel.sql        | 135 ++++++++++++++++++
 sqlpage/templates/carousel.handlebars         |  39 +++++
 2 files changed, 174 insertions(+)
 create mode 100644 examples/official-site/sqlpage/migrations/34_carousel.sql
 create mode 100644 sqlpage/templates/carousel.handlebars

diff --git a/examples/official-site/sqlpage/migrations/34_carousel.sql b/examples/official-site/sqlpage/migrations/34_carousel.sql
new file mode 100644
index 00000000..5f8729af
--- /dev/null
+++ b/examples/official-site/sqlpage/migrations/34_carousel.sql
@@ -0,0 +1,135 @@
+INSERT INTO component (name, description, icon, introduced_in_version)
+VALUES (
+        'carousel',
+        'A carousel is used to display multiple pieces of visual content without taking up too much space.',
+        'carousel-horizontal',
+        '0.18.3'
+    );
+INSERT INTO parameter (
+        component,
+        name,
+        description,
+        type,
+        top_level,
+        optional
+    )
+VALUES (
+        'carousel',
+        'name',
+        'An unique string to identify the caroussel component in the HTML page.',
+        'TEXT',
+        TRUE,
+        FALSE
+    ),
+    (
+        'carousel',
+        'title',
+        'A name to display at the top of the carousel.',
+        'TEXT',
+        TRUE,
+        TRUE
+    ),
+    (
+        'carousel',
+        'indicators',
+        'Style of image indicators (square or dot).',
+        'TEXT',
+        TRUE,
+        TRUE
+    ),
+    (
+        'carousel',
+        'vertical',
+        'Whether to use the vertical image indicators.',
+        'BOOLEAN',
+        TRUE,
+        TRUE
+    ),
+    (
+        'carousel',
+        'controls',
+        'Whether to show the control links to go previous or next item.',
+        'BOOLEAN',
+        TRUE,
+        TRUE
+    ),
+    (
+        'carousel',
+        'width',
+        'Width of the component, between 1 and 12.',
+        'NUMBER',
+        TRUE,
+        FALSE
+    ),
+    (
+        'carousel',
+        'center',
+        'Whether to center the carousel.',
+        'BOOLEAN',
+        TRUE,
+        TRUE
+    ),
+    (
+        'carousel',
+        'fade',
+        'Whether to apply the fading effect.',
+        'BOOLEAN',
+        TRUE,
+        TRUE
+    ),
+    (
+        'carousel',
+        'image',
+        'The URL (absolute or relative) of an image to display in the carousel.',
+        'URL',
+        FALSE,
+        FALSE
+    ),
+    (
+        'carousel',
+        'title',
+        'Add caption to the slide.',
+        'TEXT',
+        FALSE,
+        TRUE
+    ),
+    (
+        'carousel',
+        'description',
+        'A short paragraph.',
+        'TEXT',
+        FALSE,
+        TRUE
+    ),
+    (
+        'carousel',
+        'description_md',
+        'A short paragraph formatted using markdown.',
+        'TEXT',
+        FALSE,
+        TRUE
+    );
+-- Insert example(s) for the component
+INSERT INTO example(component, description, properties)
+VALUES (
+        'carousel',
+        'A basic example of carousel',
+        JSON(
+            '[
+                {"component":"carousel","name":"cats1","title":"Cats","width":6},
+                {"image":"https://placekitten.com/408/285"},
+                {"image":"https://placekitten.com/408/286"}
+                ]'
+        )
+    ),
+    (
+        'carousel',
+        'An advanced example of carousel with controls',
+        JSON(
+            '[
+                {"component":"carousel","name":"cats2","title":"Cats","width":6,"center":"TRUE","controls":"TRUE"},
+                {"image":"https://placekitten.com/408/285","title":"A first cat","description":"The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae."},
+                {"image":"https://placekitten.com/408/286","title":"Another cat"}
+                ]'
+        )
+    );
\ No newline at end of file
diff --git a/sqlpage/templates/carousel.handlebars b/sqlpage/templates/carousel.handlebars
new file mode 100644
index 00000000..695d6697
--- /dev/null
+++ b/sqlpage/templates/carousel.handlebars
@@ -0,0 +1,39 @@
+<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}}">
+    <div class="card-body">
+        {{#if title}}
+            <div class="d-flex align-items-center">
+                <div class="subheader">{{title}}</div>
+            </div>
+        {{/if}}
+        <div id="{{name}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" data-bs-ride="carousel">
+            <div class="carousel-indicators{{#if indicators}} carousel-indicators-{{indicators}}{{/if}}{{#if vertical}} carousel-indicators-vertical{{/if}}">
+                {{#each_row}}
+                    <button type="button" data-bs-target="#{{../name}}" data-bs-slide-to="{{@row_index}}" {{#if (eq @row_index 0)}}class="active"{{/if}}></button>
+                    {{#delay}}
+                        {{flush_delayed}}
+                        <div class="carousel-item {{#if (eq @row_index 0)}}active{{/if}}">
+                            <img class="d-block w-100" alt="{{image}}" src="{{image}}" />
+                            {{#if title}}
+                            <div class="carousel-caption d-none d-md-block">
+                                <h5>{{title}}</h5>
+                                {{#if description_md}}<p>{{{markdown description_md}}}</p>{{else}}{{#if description}}<p>{{description}}</p>{{/if}}{{/if}}
+                            </div>
+                            {{/if}}
+                        </div>
+                    {{/delay}}
+                {{/each_row}}
+            </div>
+            <div class="carousel-inner">{{flush_delayed}}</div>
+        </div>
+    </div>
+    {{#if controls}}
+        <a class="carousel-control-prev" data-bs-target="#{{name}}" role="button" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Previous</span>
+        </a>
+        <a class="carousel-control-next" data-bs-target="#{{name}}" role="button" data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Next</span>
+        </a>
+    {{/if}}
+</div>

From 9734360e5be8ea7804a38cef309d9db7bd31f215 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 14:34:49 +0100
Subject: [PATCH 02/11] change carousel example

---
 .../official-site/sqlpage/migrations/34_carousel.sql   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/official-site/sqlpage/migrations/34_carousel.sql b/examples/official-site/sqlpage/migrations/34_carousel.sql
index 5f8729af..4ac566f2 100644
--- a/examples/official-site/sqlpage/migrations/34_carousel.sql
+++ b/examples/official-site/sqlpage/migrations/34_carousel.sql
@@ -56,10 +56,10 @@ VALUES (
     (
         'carousel',
         'width',
-        'Width of the component, between 1 and 12.',
+        'Width of the component, between 1 and 12. Default is 12.',
         'NUMBER',
         TRUE,
-        FALSE
+        TRUE
     ),
     (
         'carousel',
@@ -116,9 +116,9 @@ VALUES (
         'A basic example of carousel',
         JSON(
             '[
-                {"component":"carousel","name":"cats1","title":"Cats","width":6},
-                {"image":"https://placekitten.com/408/285"},
-                {"image":"https://placekitten.com/408/286"}
+                {"component":"carousel","name":"cats1","title":"Famous Database Animals"},
+                {"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Elefantes_africanos_de_sabana_%28Loxodonta_africana%29%2C_Elephant_Sands%2C_Botsuana%2C_2018-07-28%2C_DD_114-117_PAN.jpg/2560px-Elefantes_africanos_de_sabana_%28Loxodonta_africana%29%2C_Elephant_Sands%2C_Botsuana%2C_2018-07-28%2C_DD_114-117_PAN.jpg"},
+                {"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Penguin_Island_panorama_with_ferry_and_dolphins_in_foreground%2C_March_2023_06.jpg/1280px-Penguin_Island_panorama_with_ferry_and_dolphins_in_foreground%2C_March_2023_06.jpg"}
                 ]'
         )
     ),

From edfb4a903add1aebc2137b2199d252a7a6e12484 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 14:36:12 +0100
Subject: [PATCH 03/11] make the carousel text description more readable by
 adding a background

---
 sqlpage/templates/carousel.handlebars | 1 +
 1 file changed, 1 insertion(+)

diff --git a/sqlpage/templates/carousel.handlebars b/sqlpage/templates/carousel.handlebars
index 695d6697..1aa31d39 100644
--- a/sqlpage/templates/carousel.handlebars
+++ b/sqlpage/templates/carousel.handlebars
@@ -14,6 +14,7 @@
                         <div class="carousel-item {{#if (eq @row_index 0)}}active{{/if}}">
                             <img class="d-block w-100" alt="{{image}}" src="{{image}}" />
                             {{#if title}}
+                            <div class="carousel-caption-background d-none d-md-block"></div>
                             <div class="carousel-caption d-none d-md-block">
                                 <h5>{{title}}</h5>
                                 {{#if description_md}}<p>{{{markdown description_md}}}</p>{{else}}{{#if description}}<p>{{description}}</p>{{/if}}{{/if}}

From d57be13bdc5b98194ce212aeabec21e64ee3b914 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 14:40:12 +0100
Subject: [PATCH 04/11] update cat example

---
 examples/official-site/sqlpage/migrations/34_carousel.sql | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/official-site/sqlpage/migrations/34_carousel.sql b/examples/official-site/sqlpage/migrations/34_carousel.sql
index 4ac566f2..56813c56 100644
--- a/examples/official-site/sqlpage/migrations/34_carousel.sql
+++ b/examples/official-site/sqlpage/migrations/34_carousel.sql
@@ -128,8 +128,8 @@ VALUES (
         JSON(
             '[
                 {"component":"carousel","name":"cats2","title":"Cats","width":6,"center":"TRUE","controls":"TRUE"},
-                {"image":"https://placekitten.com/408/285","title":"A first cat","description":"The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae."},
-                {"image":"https://placekitten.com/408/286","title":"Another cat"}
+                {"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Cat_Sphynx._Kittens._img_11.jpg/1024px-Cat_Sphynx._Kittens._img_11.jpg","title":"A first cat","description":"The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae."},
+                {"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Cat_close-up_2004_b.jpg/1280px-Cat_close-up_2004_b.jpg","title":"Another cat"}
                 ]'
         )
     );
\ No newline at end of file

From 8417d6de1c1cbaabd945b85990255502eb18e720 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 14:51:14 +0100
Subject: [PATCH 05/11] carousel automatic cycling is now optional

---
 .../official-site/sqlpage/migrations/34_carousel.sql   | 10 +++++++++-
 sqlpage/templates/carousel.handlebars                  |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/examples/official-site/sqlpage/migrations/34_carousel.sql b/examples/official-site/sqlpage/migrations/34_carousel.sql
index 56813c56..acfd2706 100644
--- a/examples/official-site/sqlpage/migrations/34_carousel.sql
+++ b/examples/official-site/sqlpage/migrations/34_carousel.sql
@@ -60,6 +60,14 @@ VALUES (
         'NUMBER',
         TRUE,
         TRUE
+    ),
+        (
+        'carousel',
+        'auto',
+        'Whether to automatically cycle through the carousel items. Default is false.',
+        'BOOLEAN',
+        TRUE,
+        TRUE
     ),
     (
         'carousel',
@@ -127,7 +135,7 @@ VALUES (
         'An advanced example of carousel with controls',
         JSON(
             '[
-                {"component":"carousel","name":"cats2","title":"Cats","width":6,"center":"TRUE","controls":"TRUE"},
+                {"component":"carousel","name":"cats2","title":"Cats","width":6,"center":true,"controls":true,"auto":true},
                 {"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Cat_Sphynx._Kittens._img_11.jpg/1024px-Cat_Sphynx._Kittens._img_11.jpg","title":"A first cat","description":"The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae."},
                 {"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Cat_close-up_2004_b.jpg/1280px-Cat_close-up_2004_b.jpg","title":"Another cat"}
                 ]'
diff --git a/sqlpage/templates/carousel.handlebars b/sqlpage/templates/carousel.handlebars
index 1aa31d39..1ea748ef 100644
--- a/sqlpage/templates/carousel.handlebars
+++ b/sqlpage/templates/carousel.handlebars
@@ -5,7 +5,7 @@
                 <div class="subheader">{{title}}</div>
             </div>
         {{/if}}
-        <div id="{{name}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" data-bs-ride="carousel">
+        <div id="{{name}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" {{#if auto}}data-bs-ride="carousel"{{/if}}>
             <div class="carousel-indicators{{#if indicators}} carousel-indicators-{{indicators}}{{/if}}{{#if vertical}} carousel-indicators-vertical{{/if}}">
                 {{#each_row}}
                     <button type="button" data-bs-target="#{{../name}}" data-bs-slide-to="{{@row_index}}" {{#if (eq @row_index 0)}}class="active"{{/if}}></button>

From 687061f180e87934f7fbed16fa04efe73d872749 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 15:15:39 +0100
Subject: [PATCH 06/11] remove requirement for unique name attribute in
 carousel

see https://github.com/lovasoa/SQLpage/pull/179#discussion_r1445378383
---
 examples/official-site/custom_components.sql  |  8 +++
 .../32_shared_id_class_attributes.sql         | 52 -------------------
 .../sqlpage/migrations/34_carousel.sql        |  9 +---
 sqlpage/templates/carousel.handlebars         |  6 +--
 src/render.rs                                 | 37 ++++++++++---
 5 files changed, 43 insertions(+), 69 deletions(-)
 delete mode 100644 examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql

diff --git a/examples/official-site/custom_components.sql b/examples/official-site/custom_components.sql
index 68004fff..b71e0e06 100644
--- a/examples/official-site/custom_components.sql
+++ b/examples/official-site/custom_components.sql
@@ -111,6 +111,14 @@ and SQLPage adds a few more:
 - `each_row`: iterates over the rows of a query result
 - `typeof`: returns the type of a value (`string`, `number`, `boolean`, `object`, `array`, `null`)
 
+### Attributes
+
+In addition to the parameters you pass to your components in your SQL queries,
+SQLPage adds the following attributes to the context of your components:
+
+ - `@component_index` : the index of the current component in the page. Useful to generate unique ids or classes.
+ - `@row_index` : the index of the current row in the current component. Useful to implement special behavior on the first row, for instance.
+
 ## Overwriting the default components
 
 You can overwrite the default components, including the `shell` component,
diff --git a/examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql b/examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql
deleted file mode 100644
index dcba2a49..00000000
--- a/examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql
+++ /dev/null
@@ -1,52 +0,0 @@
-INSERT INTO parameter(component, top_level, name, description, type, optional) 
-SELECT *, 'id', 'id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).', 'TEXT', TRUE
-FROM (VALUES
-    ('alert', TRUE),
-    ('breadcrumb', TRUE),
-    ('chart', TRUE),
-    -- ('code', TRUE),
-    ('csv', TRUE),
-    ('datagrid', TRUE),
-    ('hero', TRUE),
-    ('list', TRUE),
-    ('list', FALSE),
-    ('map', TRUE),
-    ('tab', FALSE),
-    ('table', TRUE),
-    ('timeline', TRUE),
-    ('timeline', FALSE),
-    -- ('title', TRUE),
-    ('tracking', TRUE),
-    ('text', TRUE)
-);
-
-INSERT INTO parameter(component, top_level, name, description, type, optional) 
-SELECT *, 'id', 'id attribute injected as an anchor in HTML. It can be used for scrolling to this item through links (use "#id" in link url). Added in v0.18.0.', 'TEXT', TRUE
-FROM (VALUES
-    ('steps', TRUE)
-);
-
-INSERT INTO parameter(component, top_level, name, description, type, optional) 
-SELECT *, 'class', 'class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.', 'TEXT', TRUE
-FROM (VALUES
-    ('alert', TRUE),
-    ('breadcrumb', TRUE),
-    ('button', TRUE),
-    ('card', FALSE),
-    ('chart', TRUE),
-    -- ('code', TRUE),
-    ('csv', TRUE),
-    ('datagrid', TRUE),
-    ('divider', TRUE),
-    ('form', TRUE),
-    ('list', TRUE),
-    ('list', FALSE),
-    ('map', TRUE),
-    ('tab', FALSE),
-    ('table', TRUE),
-    ('timeline', TRUE),
-    ('timeline', FALSE),
-    -- ('title', TRUE),
-    ('tracking', TRUE)
-);
-
diff --git a/examples/official-site/sqlpage/migrations/34_carousel.sql b/examples/official-site/sqlpage/migrations/34_carousel.sql
index acfd2706..adb7b68a 100644
--- a/examples/official-site/sqlpage/migrations/34_carousel.sql
+++ b/examples/official-site/sqlpage/migrations/34_carousel.sql
@@ -13,14 +13,7 @@ INSERT INTO parameter (
         top_level,
         optional
     )
-VALUES (
-        'carousel',
-        'name',
-        'An unique string to identify the caroussel component in the HTML page.',
-        'TEXT',
-        TRUE,
-        FALSE
-    ),
+VALUES
     (
         'carousel',
         'title',
diff --git a/sqlpage/templates/carousel.handlebars b/sqlpage/templates/carousel.handlebars
index 1ea748ef..7caf95bf 100644
--- a/sqlpage/templates/carousel.handlebars
+++ b/sqlpage/templates/carousel.handlebars
@@ -1,14 +1,14 @@
-<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}}">
+<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
     <div class="card-body">
         {{#if title}}
             <div class="d-flex align-items-center">
                 <div class="subheader">{{title}}</div>
             </div>
         {{/if}}
-        <div id="{{name}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" {{#if auto}}data-bs-ride="carousel"{{/if}}>
+        <div id="_sqlpage_carousel_{{@component_index}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" {{#if auto}}data-bs-ride="carousel"{{/if}}>
             <div class="carousel-indicators{{#if indicators}} carousel-indicators-{{indicators}}{{/if}}{{#if vertical}} carousel-indicators-vertical{{/if}}">
                 {{#each_row}}
-                    <button type="button" data-bs-target="#{{../name}}" data-bs-slide-to="{{@row_index}}" {{#if (eq @row_index 0)}}class="active"{{/if}}></button>
+                    <button type="button" data-bs-target="#_sqlpage_carousel_{{@../component_index}}" data-bs-slide-to="{{@row_index}}" {{#if (eq @row_index 0)}}class="active"{{/if}}></button>
                     {{#delay}}
                         {{flush_delayed}}
                         <div class="carousel-item {{#if (eq @row_index 0)}}active{{/if}}">
diff --git a/src/render.rs b/src/render.rs
index 35d0f77e..6c13b8a4 100644
--- a/src/render.rs
+++ b/src/render.rs
@@ -295,7 +295,7 @@ impl<W: std::io::Write> RenderContext<W> {
         } else {
             PAGE_SHELL_COMPONENT
         };
-        let mut shell_renderer = Self::create_renderer(shell_component, Arc::clone(&app_state))
+        let mut shell_renderer = Self::create_renderer(shell_component, Arc::clone(&app_state), 0)
             .await
             .with_context(|| "The shell component should always exist")?;
 
@@ -484,12 +484,17 @@ impl<W: std::io::Write> RenderContext<W> {
     async fn create_renderer(
         component: &str,
         app_state: Arc<AppState>,
+        component_index: usize,
     ) -> anyhow::Result<SplitTemplateRenderer> {
         let split_template = app_state
             .all_templates
             .get_template(&app_state, component)
             .await?;
-        Ok(SplitTemplateRenderer::new(split_template, app_state))
+        Ok(SplitTemplateRenderer::new(
+            split_template,
+            app_state,
+            component_index,
+        ))
     }
 
     /// Set a new current component and return the old one
@@ -497,7 +502,17 @@ impl<W: std::io::Write> RenderContext<W> {
         &mut self,
         component: &str,
     ) -> anyhow::Result<Option<SplitTemplateRenderer>> {
-        let new_component = Self::create_renderer(component, Arc::clone(&self.app_state)).await?;
+        let current_component_index = self
+            .current_component
+            .as_ref()
+            .map(|c| c.component_index)
+            .unwrap_or(1);
+        let new_component = Self::create_renderer(
+            component,
+            Arc::clone(&self.app_state),
+            current_component_index + 1,
+        )
+        .await?;
         Ok(self.current_component.replace(new_component))
     }
 
@@ -552,16 +567,22 @@ pub struct SplitTemplateRenderer {
     ctx: Context,
     app_state: Arc<AppState>,
     row_index: usize,
+    component_index: usize,
 }
 
 impl SplitTemplateRenderer {
-    fn new(split_template: Arc<SplitTemplate>, app_state: Arc<AppState>) -> Self {
+    fn new(
+        split_template: Arc<SplitTemplate>,
+        app_state: Arc<AppState>,
+        component_index: usize,
+    ) -> Self {
         Self {
             split_template,
             local_vars: None,
             app_state,
             row_index: 0,
             ctx: Context::null(),
+            component_index,
         }
     }
     fn name(&self) -> &str {
@@ -585,6 +606,10 @@ impl SplitTemplateRenderer {
                 .unwrap_or_default(),
         );
         let mut render_context = handlebars::RenderContext::new(None);
+        render_context
+            .block_mut()
+            .expect("context created without block")
+            .set_local_var("component_index", JsonValue::Number(self.component_index.into()));
         *self.ctx.data_mut() = data;
         let mut output = HandlebarWriterOutput(writer);
         self.split_template.before_list.render(
@@ -678,7 +703,7 @@ mod tests {
         let mut output = Vec::new();
         let config = app_config::tests::test_config();
         let app_state = Arc::new(AppState::init(&config).await.unwrap());
-        let mut rdr = SplitTemplateRenderer::new(Arc::new(split), app_state);
+        let mut rdr = SplitTemplateRenderer::new(Arc::new(split), app_state, 0);
         rdr.render_start(&mut output, json!({"name": "SQL"}))?;
         rdr.render_item(&mut output, json!({"x": 1}))?;
         rdr.render_item(&mut output, json!({"x": 2}))?;
@@ -699,7 +724,7 @@ mod tests {
         let mut output = Vec::new();
         let config = app_config::tests::test_config();
         let app_state = Arc::new(AppState::init(&config).await.unwrap());
-        let mut rdr = SplitTemplateRenderer::new(Arc::new(split), app_state);
+        let mut rdr = SplitTemplateRenderer::new(Arc::new(split), app_state, 0);
         rdr.render_start(&mut output, json!(null))?;
         rdr.render_item(&mut output, json!({"x": 1}))?;
         rdr.render_item(&mut output, json!({"x": 2}))?;

From 861b8b19ecd2025184e1f0b4fe286fc66163fbd6 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 15:29:40 +0100
Subject: [PATCH 07/11] fix carousel buttons

---
 sqlpage/templates/carousel.handlebars | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sqlpage/templates/carousel.handlebars b/sqlpage/templates/carousel.handlebars
index 7caf95bf..059a51aa 100644
--- a/sqlpage/templates/carousel.handlebars
+++ b/sqlpage/templates/carousel.handlebars
@@ -28,11 +28,11 @@
         </div>
     </div>
     {{#if controls}}
-        <a class="carousel-control-prev" data-bs-target="#{{name}}" role="button" data-bs-slide="prev">
+        <a class="carousel-control-prev" data-bs-target="#_sqlpage_carousel_{{@component_index}}" role="button" data-bs-slide="prev">
             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
             <span class="visually-hidden">Previous</span>
         </a>
-        <a class="carousel-control-next" data-bs-target="#{{name}}" role="button" data-bs-slide="next">
+        <a class="carousel-control-next" data-bs-target="#_sqlpage_carousel_{{@component_index}}" role="button" data-bs-slide="next">
             <span class="carousel-control-next-icon" aria-hidden="true"></span>
             <span class="visually-hidden">Next</span>
         </a>

From 8804c55a4b71365a53ba6785427fc9cf2f8d511d Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 15:29:49 +0100
Subject: [PATCH 08/11] uodate deps

---
 Cargo.lock | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index c8c2b4be..202d72d9 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -179,7 +179,7 @@ dependencies = [
  "tokio-util",
  "tracing",
  "webpki-roots 0.22.6",
- "webpki-roots 0.25.3",
+ "webpki-roots 0.25.4",
 ]
 
 [[package]]
@@ -592,7 +592,7 @@ dependencies = [
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
- "webpki-roots 0.25.3",
+ "webpki-roots 0.25.4",
 ]
 
 [[package]]
@@ -1552,9 +1552,9 @@ dependencies = [
 
 [[package]]
 name = "handlebars"
-version = "5.1.1"
+version = "5.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c73166c591e67fb4bf9bc04011b4e35f12e89fe8d676193aa263df065955a379"
+checksum = "ab283476b99e66691dee3f1640fea91487a8d81f50fb5ecc75538f8f8879a1e4"
 dependencies = [
  "log",
  "pest",
@@ -2661,9 +2661,9 @@ dependencies = [
 
 [[package]]
 name = "rustix"
-version = "0.38.30"
+version = "0.38.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "322394588aaf33c24007e8bb3238ee3e4c5c09c084ab32bc73890b99ff326bca"
+checksum = "6ea3e1a662af26cd7a3ba09c0297a31af215563ecf42817c98df621387f4e949"
 dependencies = [
  "bitflags 2.4.2",
  "errno",
@@ -2719,7 +2719,7 @@ dependencies = [
  "serde",
  "serde_json",
  "thiserror",
- "webpki-roots 0.25.3",
+ "webpki-roots 0.25.4",
  "x509-parser",
 ]
 
@@ -3070,7 +3070,7 @@ dependencies = [
  "tokio-stream",
  "url",
  "uuid",
- "webpki-roots 0.25.3",
+ "webpki-roots 0.25.4",
  "whoami",
 ]
 
@@ -3203,7 +3203,7 @@ dependencies = [
  "cfg-if",
  "fastrand 2.0.1",
  "redox_syscall",
- "rustix 0.38.30",
+ "rustix 0.38.31",
  "windows-sys 0.52.0",
 ]
 
@@ -3229,9 +3229,9 @@ dependencies = [
 
 [[package]]
 name = "time"
-version = "0.3.32"
+version = "0.3.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fe80ced77cbfb4cb91a94bf72b378b4b6791a0d9b7f09d0be747d1bdff4e68bd"
+checksum = "00b24b79b7a07f10209f19e683ca1e289d80b1e76ffa8c2b779718566a083679"
 dependencies = [
  "deranged",
  "itoa",
@@ -3284,9 +3284,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.35.1"
+version = "1.36.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c89b4efa943be685f629b149f53829423f8f5531ea21249408e8e2f8671ec104"
+checksum = "61285f6515fa018fb2d1e46eb21223fff441ee8db5d0f1435e8ab4f5cdb80931"
 dependencies = [
  "backtrace",
  "bytes",
@@ -3694,9 +3694,9 @@ dependencies = [
 
 [[package]]
 name = "webpki-roots"
-version = "0.25.3"
+version = "0.25.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1778a42e8b3b90bff8d0f5032bf22250792889a5cdc752aa0020c84abe3aaf10"
+checksum = "5f20c57d8d7db6d3b86154206ae5d8fba62dd39573114de97c2cb0578251f8e1"
 
 [[package]]
 name = "whoami"
@@ -3873,9 +3873,9 @@ checksum = "dff9641d1cd4be8d1a070daf9e3773c5f67e78b4d9d42263020c057706765c04"
 
 [[package]]
 name = "winnow"
-version = "0.5.36"
+version = "0.5.37"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "818ce546a11a9986bc24f93d0cdf38a8a1a400f1473ea8c82e59f6e0ffab9249"
+checksum = "a7cad8365489051ae9f054164e459304af2e7e9bb407c958076c8bf4aef52da5"
 dependencies = [
  "memchr",
 ]

From 0521bb8ab128f139d1de78dfefc0221992496489 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 15:29:58 +0100
Subject: [PATCH 09/11] fix official site docs

---
 .../99_shared_id_class_attributes.sql         | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql

diff --git a/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql b/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql
new file mode 100644
index 00000000..ebe9610c
--- /dev/null
+++ b/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql
@@ -0,0 +1,54 @@
+INSERT INTO parameter(component, top_level, name, description, type, optional) 
+SELECT *, 'id', 'id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).', 'TEXT', TRUE
+FROM (VALUES
+    ('alert', TRUE),
+    ('breadcrumb', TRUE),
+    ('chart', TRUE),
+    -- ('code', TRUE),
+    ('csv', TRUE),
+    ('datagrid', TRUE),
+    ('hero', TRUE),
+    ('list', TRUE),
+    ('list', FALSE),
+    ('map', TRUE),
+    ('tab', FALSE),
+    ('table', TRUE),
+    ('timeline', TRUE),
+    ('timeline', FALSE),
+    -- ('title', TRUE),
+    ('tracking', TRUE),
+    ('text', TRUE),
+    ('carousel', TRUE)
+);
+
+INSERT INTO parameter(component, top_level, name, description, type, optional) 
+SELECT *, 'id', 'id attribute injected as an anchor in HTML. It can be used for scrolling to this item through links (use "#id" in link url). Added in v0.18.0.', 'TEXT', TRUE
+FROM (VALUES
+    ('steps', TRUE)
+);
+
+INSERT INTO parameter(component, top_level, name, description, type, optional) 
+SELECT *, 'class', 'class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.', 'TEXT', TRUE
+FROM (VALUES
+    ('alert', TRUE),
+    ('breadcrumb', TRUE),
+    ('button', TRUE),
+    ('card', FALSE),
+    ('chart', TRUE),
+    -- ('code', TRUE),
+    ('csv', TRUE),
+    ('datagrid', TRUE),
+    ('divider', TRUE),
+    ('form', TRUE),
+    ('list', TRUE),
+    ('list', FALSE),
+    ('map', TRUE),
+    ('tab', FALSE),
+    ('table', TRUE),
+    ('timeline', TRUE),
+    ('timeline', FALSE),
+    -- ('title', TRUE),
+    ('tracking', TRUE),
+    ('carousel', TRUE)
+);
+

From 5938bc8147846b35f683f4018b993680b8423894 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 15:30:59 +0100
Subject: [PATCH 10/11] lint

---
 src/render.rs | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/render.rs b/src/render.rs
index 6c13b8a4..b94e25b8 100644
--- a/src/render.rs
+++ b/src/render.rs
@@ -505,8 +505,7 @@ impl<W: std::io::Write> RenderContext<W> {
         let current_component_index = self
             .current_component
             .as_ref()
-            .map(|c| c.component_index)
-            .unwrap_or(1);
+            .map_or(1, |c| c.component_index);
         let new_component = Self::create_renderer(
             component,
             Arc::clone(&self.app_state),
@@ -609,7 +608,10 @@ impl SplitTemplateRenderer {
         render_context
             .block_mut()
             .expect("context created without block")
-            .set_local_var("component_index", JsonValue::Number(self.component_index.into()));
+            .set_local_var(
+                "component_index",
+                JsonValue::Number(self.component_index.into()),
+            );
         *self.ctx.data_mut() = data;
         let mut output = HandlebarWriterOutput(writer);
         self.split_template.before_list.render(

From a4dba37783e75b9f48150eec22d178483d50b1b8 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sat, 3 Feb 2024 15:36:47 +0100
Subject: [PATCH 11/11] update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d9ffed58..1aa62084 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@
      - MySQL's [`JSON_TABLE`](https://dev.mysql.com/doc/refman/8.0/en/json-table-functions.html) table-valued function, that allows easily iterating over json structures
      - MySQL's [`CALL`](https://dev.mysql.com/doc/refman/8.0/en/call.html) statements, to call stored procedures.
      - PostgreSQL `^@` starts-with operator
+ - New [carousel](https://sql.ophir.dev/documentation.sql?component=carousel#component) component to display a carousel of images.
+ - For those who write [custom components](https://sql.ophir.dev/custom_components.sql), a new `@component_index` variable is available in templates to get the index of the current component in the page. This makes it easy to generate unique ids for components.
 
 ## 0.18.2 (2024-01-29)