// Every theme for one scheme, shipped and saved together.
//
// Saved themes are not a second-class list below the shipped ones: a theme you
// made is a theme, and once it is in the gallery it is chosen the same way. The
// grid drops to two columns on a narrowly tiled window, because a third card at
// 900px is narrower than its own caption.

import QtQuick
import qs.config
import qs.services

Column {
    id: root

    required property string scheme
    property string heading: ""

    width: parent ? parent.width : 620
    spacing: 10

    readonly property var themes: ThemeProfiles.profiles.filter(
        profile => profile.scheme === root.scheme)

    readonly property int columns: root.width < 640 ? 2 : 3
    readonly property real cellWidth: root.columns > 0
        ? (root.width - (root.columns - 1) * 12) / root.columns : 200

    Text {
        text: root.heading
        color: Theme.fgMuted
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSizeSmall
        font.weight: Font.DemiBold
        font.capitalization: Font.AllUppercase
        font.letterSpacing: 0.7
    }

    Grid {
        width: parent.width
        columns: root.columns
        spacing: 12

        Repeater {
            model: root.themes

            ThemeCard {
                required property var modelData

                width: root.cellWidth
                theme: modelData
                onChosen: ThemeProfiles.selectProfile(modelData.id)
                onRemoved: ThemeProfiles.deleteProfile(modelData.id)
            }
        }
    }
}