/// TEMPORARY AI GENERATED FRONTEND \\\
///   NOT TO BE USED IN PRODUCTION  \\\

import { ListView } from "std-widgets.slint";
import { Theme } from "../theme.slint";
import { MemberItem } from "../types.slint";
import { Avatar } from "avatar.slint";

component MemberRow inherits Rectangle {
    in property <MemberItem> m;
    height: m.is-header ? 36px : 42px;

    if m.is-header: Text {
        x: 16px;
        width: parent.width - 32px;
        height: parent.height - 4px;
        text: m.name;
        color: Theme.text-muted;
        font-size: 12px;
        font-weight: 700;
        vertical-alignment: bottom;
        overflow: elide;
    }

    if !m.is-header: Rectangle {
        x: 8px;
        y: 1px;
        width: parent.width - 16px;
        height: parent.height - 2px;
        border-radius: 4px;
        background: touch.has-hover ? Theme.hover-bg : transparent;

        Avatar {
            initial: m.initial;
            tint: m.color;
            diameter: 32px;
            x: 8px;
            y: (parent.height - self.height) / 2;
        }

        Text {
            x: 50px;
            width: parent.width - 58px;
            height: parent.height;
            text: m.name;
            color: touch.has-hover ? Theme.text-header : Theme.text-muted;
            font-weight: 500;
            vertical-alignment: center;
            overflow: elide;
        }

        touch := TouchArea { }
    }
}

export component MemberList inherits Rectangle {
    in property <[MemberItem]> members;

    width: Theme.member-width;
    background: Theme.sidebar-bg;

    ListView {
        for m in root.members: MemberRow {
            m: m;
        }
    }
}