// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { Carousel } from "carousel.slint";
import { Card } from "card.slint";
import { Theme } from "theme.slint";

MainWindow := Window {
    property<[{ title: string, image: image}]> navigation-items: [
       { title: "Settings", image: @image-url("svg/settings_black.svg") },
       { title: "Home", image: @image-url("svg/home_black.svg") },
       { title: "About", image: @image-url("svg/info_black.svg") },
    ];
    property <int> selected-index: 1;

    title: "Carousel example";
    width: 320px;
    height: 240px;
    background: Theme.window-background;
    padding: Theme.spacing-regular;
    forward-focus: carousel;
    default-font-family: Theme.font-family;

    carousel := Carousel {  
        y: (root.height - height) / 2;
        height: 100%;
        itemWidth: Theme.size-medium;
        count: navigation-items.length;
        selected-index <=> root.selected-index;
        spacing: Theme.spacing-medium;
       
        for item[index] in navigation-items : Card {
            is-selected: index == selected-index;
            title: item.title;
            image-source: item.image;
            y: (parent.height - height) / 2;

            clicked => { selected-index = index; }
        }  
    }
}