import {
    HorizontalBox,
    ListView,
    ScrollView,
    TextEdit,
    VerticalBox,
} from "std-widgets.slint";

// ── Enums ──────────────────────────────────────────────────────────────────

export enum Category {
    folder, audio, video, image, archive, document, code, disk-image, binary, other
}

export enum OpenTarget { item, parent }

export enum ScrollDirection { up, down }

// ── Color palette ──────────────────────────────────────────────────────────

export global ColorPalette {
    in-out property <bool> dark-theme: true;

    // Backgrounds
    out property <color> bg-window:    dark-theme ? #121722 : #f1f5f9;
    out property <color> bg-panel:     dark-theme ? #171d28 : #ffffff;
    out property <color> bg-surface:   dark-theme ? #111722 : #f8fafc;
    out property <color> bg-input:     dark-theme ? #0d1117 : #f0f4f8;
    out property <color> bg-list-even: dark-theme ? #18202d : #f8fafc;
    out property <color> bg-list-odd:  dark-theme ? #141b27 : #f1f5f9;
    out property <color> bg-context:   dark-theme ? #1e293b : #ffffff;
    out property <color> bg-badge:     dark-theme ? #202938 : #e2e8f0;
    out property <color> bg-badge-off: dark-theme ? #14181f : #f1f5f9;
    out property <color> bg-kind:      dark-theme ? #243247 : #dbeafe;
    out property <color> bg-chart:     dark-theme ? #0e1219 : #f8fafc;

    // Borders
    out property <color> border-panel:     dark-theme ? #293246 : #e2e8f0;
    out property <color> border-card:      dark-theme ? #243042 : #e2e8f0;
    out property <color> border-input:     dark-theme ? #1f2937 : #e2e8f0;
    out property <color> border-badge:     dark-theme ? #2d3a4f : #cbd5e1;
    out property <color> border-badge-off: dark-theme ? #1f2832 : #e2e8f0;
    out property <color> border-context:   dark-theme ? #3b4b66 : #94a3b8;

    // Text
    out property <color> text-primary:    dark-theme ? #ffffff  : #0f172a;
    out property <color> text-secondary:  dark-theme ? #c7d2e1  : #334155;
    out property <color> text-summary:    dark-theme ? #eff6ff  : #1e293b;
    out property <color> text-muted:      dark-theme ? #8fa3bf  : #64748b;
    out property <color> text-desc:       dark-theme ? #d5dde8  : #475569;
    out property <color> text-badge:      dark-theme ? #dce7f5  : #334155;
    out property <color> text-kind:       dark-theme ? #dbeafe  : #1d4ed8;
    out property <color> text-hover-name: dark-theme ? #f8fafc  : #0f172a;
    out property <color> text-hover-meta: dark-theme ? #cbd5e1  : #475569;
    out property <color> text-accent:     dark-theme ? #7dd3fc  : #0369a1;
    out property <color> text-path:       dark-theme ? #94a3b8  : #64748b;
    out property <color> text-treemap:    dark-theme ? #c8d2df  : #64748b;
    out property <color> text-context:    dark-theme ? #cbd5e1  : #475569;

    // State colors
    out property <color> success: dark-theme ? #86efac : #16a34a;
    out property <color> warning: dark-theme ? #fcd34d : #d97706;
}

// ── Translations global ────────────────────────────────────────────────────

export global Translations {
    in-out property <string> sources: "Scan Sources";
    in-out property <string> hide: "Hide ▲";
    in-out property <string> show: "Show ▼";
    in-out property <string> add-folders: "📁 Folders";
    in-out property <string> add-files: "📄 Files";
    in-out property <string> paste-paths: "Paste paths:";
    in-out property <string> add: "Add";
    in-out property <string> clear: "Clear";
    in-out property <string> selected: "Selected";
    in-out property <string> empty: "(empty)";
    in-out property <string> start: "Start";
    in-out property <string> stop: "Stop";
    in-out property <string> visualization: "Visualization";
    in-out property <string> treemap-desc: "Rectangles: larger = more space";
    in-out property <string> top-files: "Top files";
    in-out property <string> after-scan: "After scan";
    in-out property <string> open: "Open";
    in-out property <string> open-parent: "Open parent";
    in-out property <string> scanning: "Scanning...";
    in-out property <string> color-legend: "Color legend below";
    in-out property <string> mode-scanning: "Scanning";
    in-out property <string> mode-results: "Results ready";
    in-out property <string> mode-waiting: "Ready";
    in-out property <string> filter-reset: "Reset";
    in-out property <string> filter-clear: "Clear all";
    in-out property <string> filter-empty: "No categories selected";
    in-out property <string> cat-audio: "Audio";
    in-out property <string> cat-video: "Video";
    in-out property <string> cat-image: "Image";
    in-out property <string> cat-archive: "Archive";
    in-out property <string> cat-document: "Document";
    in-out property <string> cat-code: "Code";
    in-out property <string> cat-disk-image: "Disk Image";
    in-out property <string> cat-binary: "Binary";
    in-out property <string> cat-other: "Other";
}

// ── Shared data structures ─────────────────────────────────────────────────

export struct ScanPathRow {
    path: string,
    kind_label: string,
}

export struct TopEntryRow {
    name: string,
    path: string,
    size_label: string,
    meta: string,
}

// ── Reusable components ────────────────────────────────────────────────────

component LegendBadge inherits Rectangle {
    in property <string> label;
    in property <brush> swatch-color;
    in property <bool> enabled: true;
    callback clicked();
    height: 30px;
    border-radius: 8px;
    background: root.enabled ? ColorPalette.bg-badge : ColorPalette.bg-badge-off;
    border-width: 1px;
    border-color: root.enabled ? ColorPalette.border-badge : ColorPalette.border-badge-off;
    opacity: root.enabled ? 1.0 : 0.42;
    TouchArea {
        mouse-cursor: pointer;
        clicked => { root.clicked(); }
    }
    HorizontalBox {
        padding-left: 8px;
        padding-right: 8px;
        spacing: 8px;
        Rectangle {
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background: root.swatch-color;
            vertical-stretch: 0;
        }
        Text {
            text: root.label;
            color: ColorPalette.text-badge;
            vertical-alignment: center;
            font-size: 12px;
        }
    }
}

// ── Custom button ──────────────────────────────────────────────────────────

component AppButton inherits Rectangle {
    in property <string> label;
    in property <bool> enabled: true;
    callback clicked();

    height: 30px;
    min-width: 50px;
    border-radius: 6px;
    background: root.enabled
        ? (ta.has-hover ? ColorPalette.bg-kind : ColorPalette.bg-badge)
        : ColorPalette.bg-badge-off;
    border-width: 1px;
    border-color: root.enabled ? ColorPalette.border-badge : ColorPalette.border-badge-off;

    ta := TouchArea {
        enabled: root.enabled;
        mouse-cursor: root.enabled ? pointer : default;
        clicked => { root.clicked(); }
    }
    Text {
        x: 10px;
        width: parent.width - 20px;
        height: parent.height;
        text: root.label;
        color: root.enabled ? ColorPalette.text-primary : ColorPalette.text-muted;
        horizontal-alignment: center;
        vertical-alignment: center;
        font-size: 13px;
        overflow: elide;
        wrap: no-wrap;
    }
}

// ── Main window ────────────────────────────────────────────────────────────

export component MainWindow inherits Window {
    title: "Space Finder";
    preferred-width: 1540px;
    preferred-height: 960px;
    min-width: 1180px;
    min-height: 760px;
    background: ColorPalette.bg-window;

    // Theme state — set from Rust; propagated to ColorPalette on change
    in property <bool> dark-theme-enabled: true;
    callback toggle-dark-mode();

    init => {
        ColorPalette.dark-theme = root.dark-theme-enabled;
    }
    changed dark-theme-enabled => {
        ColorPalette.dark-theme = root.dark-theme-enabled;
    }

    // Data properties — set from Rust, read-only within Slint
    in property <[ScanPathRow]> scan-paths: [];
    in property <[TopEntryRow]> top-entries: [];
    in property <image> chart-image;
    in property <string> status-text: "";
    in property <string> summary-text: "";
    in property <string> chart-hover-name: "";
    in property <string> chart-hover-text: "Click an item to see details";
    in property <string> chart-hover-path: "";
    in property <bool> scanning: false;
    in property <bool> has-results: false;
    in property <bool> context-menu-visible: false;
    in property <length> context-menu-x: 0px;
    in property <length> context-menu-y: 0px;
    in property <string> context-menu-title: "";
    in property <brush> audio-color: #f0ca57;
    in property <brush> video-color: #e45758;
    in property <brush> image-color: #ae6ef7;
    in property <brush> archive-color: #e0974e;
    in property <brush> document-color: #54a0ff;
    in property <brush> code-color: #48c9b0;
    in property <brush> disk-image-color: #4cc9f0;
    in property <brush> binary-color: #787eff;
    in property <brush> folder-color: #697387;
    in property <brush> other-color: #8d99ae;
    in property <bool> cat-folder-enabled: true;
    in property <bool> cat-audio-enabled: true;
    in property <bool> cat-video-enabled: true;
    in property <bool> cat-image-enabled: true;
    in property <bool> cat-archive-enabled: true;
    in property <bool> cat-document-enabled: true;
    in property <bool> cat-code-enabled: true;
    in property <bool> cat-disk-image-enabled: true;
    in property <bool> cat-binary-enabled: true;
    in property <bool> cat-other-enabled: true;
    in property <string> filter-summary: "";
    in property <bool> filter-active: false;

    // Properties written by Slint itself
    in-out property <string> manual-paths;
    in-out property <bool> top-entries-visible: false;

    // Callbacks
    callback toggle-category(Category);
    callback filter-reset();
    callback filter-clear();
    callback add-folders-requested();
    callback add-files-requested();
    callback apply-manual-paths(string);
    callback remove-path-requested(int);
    callback clear-paths-requested();
    callback path-double-clicked(int);
    callback path-right-clicked(int);
    callback start-scan-requested();
    callback stop-scan-requested();
    callback chart-hovered(length, length);
    callback chart-left-clicked(length, length);
    callback chart-right-clicked(length, length);
    callback chart-double-clicked(length, length);
    callback chart-area-resized(length, length);
    callback open-item-requested(OpenTarget);
    callback close-context-menu-requested();
    callback chart-scrolled(ScrollDirection);

    VerticalBox {
        padding: 14px;
        spacing: 12px;
        HorizontalBox {
            spacing: 8px;
            // ── Left panel ─────────────────────────────────────────────────
            Rectangle {
                width: 280px;
                border-radius: 12px;
                background: ColorPalette.bg-panel;
                border-width: 1px;
                border-color: ColorPalette.border-panel;
                VerticalBox {
                    padding: 10px;
                    spacing: 8px;
                    // Title row with theme toggle
                    HorizontalLayout {
                        spacing: 6px;
                        vertical-stretch: 0;
                        Text {
                            text: "Space Finder";
                            color: ColorPalette.text-primary;
                            font-size: 18px;
                            font-weight: 700;
                            vertical-alignment: center;
                            horizontal-stretch: 1;
                        }
                        AppButton {
                            label: root.dark-theme-enabled ? "☀" : "🌙";
                            clicked => { root.toggle-dark-mode(); }
                        }
                    }
                    // Status / summary box
                    Rectangle {
                        border-radius: 8px;
                        background: ColorPalette.bg-surface;
                        border-width: 1px;
                        border-color: ColorPalette.border-card;
                        VerticalBox {
                            padding: 8px;
                            spacing: 2px;
                            Text {
                                text: root.status-text;
                                color: ColorPalette.text-secondary;
                                wrap: word-wrap;
                                font-size: 13px;
                            }
                            Text {
                                text: root.summary-text;
                                color: ColorPalette.text-summary;
                                wrap: word-wrap;
                                font-size: 13px;
                            }
                            Text {
                                text: root.scanning
                                    ? Translations.mode-scanning
                                    : (root.has-results ? Translations.mode-results : Translations.mode-waiting);
                                color: root.scanning ? ColorPalette.warning : ColorPalette.text-accent;
                                font-size: 12px;
                            }
                        }
                    }
                    // Sources heading
                    Text {
                        text: Translations.sources;
                        color: ColorPalette.text-primary;
                        font-size: 15px;
                        font-weight: 600;
                        vertical-alignment: center;
                    }
                    // Path list area
                    Rectangle {
                        border-radius: 8px;
                        background: ColorPalette.bg-input;
                        border-width: 1px;
                        border-color: ColorPalette.border-input;
                        vertical-stretch: 1;
                        VerticalBox {
                            padding: 8px;
                            spacing: 6px;
                            HorizontalBox {
                                spacing: 4px;
                                vertical-stretch: 0;
                                AppButton {
                                    label: Translations.add-folders;
                                    enabled: !root.scanning;
                                    clicked => { root.add-folders-requested(); }
                                }
                                AppButton {
                                    label: Translations.add-files;
                                    enabled: !root.scanning;
                                    clicked => { root.add-files-requested(); }
                                }
                            }
                            Text {
                                text: Translations.paste-paths;
                                color: ColorPalette.text-desc;
                                font-size: 12px;
                                vertical-stretch: 0;
                            }
                            TextEdit {
                                text <=> root.manual-paths;
                                enabled: !root.scanning;
                                height: 60px;
                                vertical-stretch: 0;
                            }
                            HorizontalBox {
                                spacing: 4px;
                                vertical-stretch: 0;
                                AppButton {
                                    label: Translations.add;
                                    enabled: !root.scanning && root.manual-paths != "";
                                    clicked => { root.apply-manual-paths(root.manual-paths); }
                                }
                                AppButton {
                                    label: Translations.clear;
                                    enabled: !root.scanning && root.scan-paths.length > 0;
                                    clicked => { root.clear-paths-requested(); }
                                }
                            }
                            Text {
                                text: Translations.selected + " (" + root.scan-paths.length + "):";
                                color: ColorPalette.text-primary;
                                font-size: 12px;
                                font-weight: 600;
                                vertical-stretch: 0;
                            }
                            Rectangle {
                                border-radius: 6px;
                                background: ColorPalette.bg-surface;
                                border-width: 1px;
                                border-color: ColorPalette.border-card;
                                vertical-stretch: 1;
                                min-height: 120px;
                                if (root.scan-paths.length > 0): ListView {
                                    for path[idx] in root.scan-paths: Rectangle {
                                        height: 46px;
                                        background: Math.mod(idx, 2) == 0
                                            ? ColorPalette.bg-list-even
                                            : ColorPalette.bg-list-odd;
                                        row-touch := TouchArea {
                                            mouse-cursor: pointer;
                                            double-clicked => { root.path-double-clicked(idx); }
                                            pointer-event(event) => {
                                                if (event.button == PointerEventButton.right && event.kind == PointerEventKind.up) {
                                                    root.path-right-clicked(idx);
                                                }
                                            }
                                        }
                                        HorizontalBox {
                                            padding-left: 8px;
                                            padding-right: 8px;
                                            padding-top: 4px;
                                            padding-bottom: 4px;
                                            spacing: 6px;
                                            Rectangle {
                                                width: 44px;
                                                border-radius: 4px;
                                                background: ColorPalette.bg-kind;
                                                Text {
                                                    text: path.kind_label;
                                                    color: ColorPalette.text-kind;
                                                    horizontal-alignment: center;
                                                    vertical-alignment: center;
                                                    font-size: 11px;
                                                }
                                            }
                                            Text {
                                                text: path.path;
                                                color: ColorPalette.text-primary;
                                                vertical-alignment: center;
                                                wrap: no-wrap;
                                                overflow: elide;
                                                horizontal-stretch: 1;
                                                font-size: 13px;
                                            }
                                            AppButton {
                                                label: "✕";
                                                enabled: !root.scanning;
                                                clicked => { root.remove-path-requested(idx); }
                                            }
                                        }
                                    }
                                }
                                if (root.scan-paths.length == 0): Text {
                                    text: Translations.empty;
                                    color: ColorPalette.text-muted;
                                    horizontal-alignment: center;
                                    vertical-alignment: center;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                    HorizontalBox {
                        spacing: 4px;
                        vertical-stretch: 0;
                        AppButton {
                            label: root.scanning ? Translations.stop : Translations.start;
                            enabled: root.scanning || root.scan-paths.length > 0;
                            clicked => {
                                if (root.scanning) {
                                    root.stop-scan-requested();
                                } else {
                                    root.start-scan-requested();
                                }
                            }
                        }
                    }
                }
            }
            // ── Right panel (chart + controls) ─────────────────────────────
            Rectangle {
                border-radius: 12px;
                background: ColorPalette.bg-panel;
                border-width: 1px;
                border-color: ColorPalette.border-panel;
                horizontal-stretch: 1;
                VerticalBox {
                    padding: 10px;
                    spacing: 6px;
                    Text {
                        text: Translations.visualization;
                        color: ColorPalette.text-primary;
                        font-size: 16px;
                        font-weight: 650;
                        vertical-stretch: 0;
                    }
                    Text {
                        text: Translations.treemap-desc;
                        color: ColorPalette.text-treemap;
                        wrap: no-wrap;
                        overflow: elide;
                        font-size: 12px;
                        vertical-stretch: 0;
                    }
                    // Hover info box
                    Rectangle {
                        border-radius: 8px;
                        background: ColorPalette.bg-surface;
                        border-width: 1px;
                        border-color: ColorPalette.border-card;
                        vertical-stretch: 0;
                        VerticalLayout {
                            padding: 8px;
                            spacing: 4px;
                            Text {
                                text: root.chart-hover-name == "" ? root.chart-hover-text : root.chart-hover-name;
                                color: ColorPalette.text-hover-name;
                                font-size: 16px;
                                font-weight: 700;
                                overflow: elide;
                                wrap: no-wrap;
                            }
                            Text {
                                text: root.chart-hover-name == "" ? "" : root.chart-hover-text;
                                color: ColorPalette.text-hover-meta;
                                font-size: 13px;
                                overflow: elide;
                                wrap: no-wrap;
                            }
                            Text {
                                text: root.chart-hover-path;
                                color: ColorPalette.text-accent;
                                font-size: 12px;
                                overflow: elide;
                                wrap: no-wrap;
                            }
                        }
                    }
                    chart-canvas := Rectangle {
                        horizontal-stretch: 1;
                        vertical-stretch: 1;
                        border-radius: 8px;
                        background: ColorPalette.bg-chart;
                        border-width: 1px;
                        border-color: ColorPalette.border-card;
                        clip: true;
                        changed width => {
                            root.chart-area-resized(self.width, self.height);
                        }
                        changed height => {
                            root.chart-area-resized(self.width, self.height);
                        }
                        if (root.has-results): Image {
                            width: parent.width;
                            height: parent.height;
                            source: root.chart-image;
                            image-fit: fill;
                        }
                        if (!root.has-results): Text {
                            text: root.scanning ? Translations.scanning : Translations.color-legend;
                            color: ColorPalette.text-muted;
                            wrap: word-wrap;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                            font-size: 13px;
                        }
                        chart-touch := TouchArea {
                            moved => { root.chart-hovered(self.mouse-x, self.mouse-y); }
                            clicked => { root.chart-left-clicked(self.mouse-x, self.mouse-y); }
                            double-clicked => { root.chart-double-clicked(self.mouse-x, self.mouse-y); }
                            pointer-event(event) => {
                                if (event.button == PointerEventButton.right && event.kind == PointerEventKind.up) {
                                    root.chart-right-clicked(self.mouse-x, self.mouse-y);
                                }
                            }
                            scroll-event(event) => {
                                if (event.delta-y > 0px) { root.chart-scrolled(ScrollDirection.up); }
                                else if (event.delta-y < 0px) { root.chart-scrolled(ScrollDirection.down); }
                                return EventResult.accept;
                            }
                        }
                        if (root.context-menu-visible): Rectangle {
                            x: 0px; y: 0px;
                            width: parent.width; height: parent.height;
                            background: #00000000;
                            TouchArea { clicked => { root.close-context-menu-requested(); } }
                            Rectangle {
                                width: 200px;
                                height: 120px;
                                x: Math.max(6px, Math.min(root.context-menu-x, parent.width - self.width - 6px));
                                y: Math.max(6px, Math.min(root.context-menu-y, parent.height - self.height - 6px));
                                border-radius: 6px;
                                border-width: 1px;
                                border-color: ColorPalette.border-context;
                                background: ColorPalette.bg-context;
                                VerticalBox {
                                    padding: 6px;
                                    spacing: 4px;
                                    Text {
                                        text: root.context-menu-title;
                                        color: ColorPalette.text-context;
                                        wrap: word-wrap;
                                        font-size: 11px;
                                    }
                                    VerticalBox {
                                        spacing: 2px;
                                        AppButton {
                                            label: Translations.open;
                                            horizontal-stretch: 1;
                                            clicked => { root.open-item-requested(OpenTarget.item); }
                                        }
                                        AppButton {
                                            label: Translations.open-parent;
                                            horizontal-stretch: 1;
                                            clicked => { root.open-item-requested(OpenTarget.parent); }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    // Category filter legend
                    ScrollView {
                        height: 80px;
                        VerticalLayout {
                            spacing: 4px;
                            padding-top: 2px;
                            padding-bottom: 2px;
                            HorizontalLayout {
                                spacing: 4px;
                                LegendBadge {
                                    label: Translations.cat-audio;
                                    swatch-color: root.audio-color;
                                    enabled: root.cat-audio-enabled;
                                    clicked => { root.toggle-category(Category.audio); }
                                }
                                LegendBadge {
                                    label: Translations.cat-video;
                                    swatch-color: root.video-color;
                                    enabled: root.cat-video-enabled;
                                    clicked => { root.toggle-category(Category.video); }
                                }
                                LegendBadge {
                                    label: Translations.cat-image;
                                    swatch-color: root.image-color;
                                    enabled: root.cat-image-enabled;
                                    clicked => { root.toggle-category(Category.image); }
                                }
                                LegendBadge {
                                    label: Translations.cat-archive;
                                    swatch-color: root.archive-color;
                                    enabled: root.cat-archive-enabled;
                                    clicked => { root.toggle-category(Category.archive); }
                                }
                                LegendBadge {
                                    label: Translations.cat-document;
                                    swatch-color: root.document-color;
                                    enabled: root.cat-document-enabled;
                                    clicked => { root.toggle-category(Category.document); }
                                }
                                LegendBadge {
                                    label: Translations.cat-code;
                                    swatch-color: root.code-color;
                                    enabled: root.cat-code-enabled;
                                    clicked => { root.toggle-category(Category.code); }
                                }
                                LegendBadge {
                                    label: Translations.cat-disk-image;
                                    swatch-color: root.disk-image-color;
                                    enabled: root.cat-disk-image-enabled;
                                    clicked => { root.toggle-category(Category.disk-image); }
                                }
                                LegendBadge {
                                    label: Translations.cat-binary;
                                    swatch-color: root.binary-color;
                                    enabled: root.cat-binary-enabled;
                                    clicked => { root.toggle-category(Category.binary); }
                                }
                                LegendBadge {
                                    label: Translations.cat-other;
                                    swatch-color: root.other-color;
                                    enabled: root.cat-other-enabled;
                                    clicked => { root.toggle-category(Category.other); }
                                }
                                Rectangle { horizontal-stretch: 1; }
                                AppButton {
                                    label: Translations.filter-reset;
                                    clicked => { root.filter-reset(); }
                                }
                                AppButton {
                                    label: Translations.filter-clear;
                                    clicked => { root.filter-clear(); }
                                }
                            }
                            Text {
                                text: root.filter-summary;
                                color: root.filter-active ? ColorPalette.success : ColorPalette.text-muted;
                                font-size: 12px;
                                vertical-alignment: center;
                                overflow: elide;
                                wrap: no-wrap;
                            }
                        }
                    }
                    // Top files section
                    HorizontalBox {
                        spacing: 4px;
                        vertical-stretch: 0;
                        Text {
                            text: Translations.top-files;
                            color: ColorPalette.text-primary;
                            font-size: 13px;
                            font-weight: 600;
                            vertical-alignment: center;
                        }
                        Rectangle { horizontal-stretch: 1; }
                        AppButton {
                            label: root.top-entries-visible ? Translations.hide : Translations.show;
                            clicked => { root.top-entries-visible = !root.top-entries-visible; }
                        }
                    }
                    if (root.top-entries-visible): Rectangle {
                        height: 160px;
                        border-radius: 8px;
                        background: ColorPalette.bg-surface;
                        border-width: 1px;
                        border-color: ColorPalette.border-card;
                        if (root.top-entries.length > 0): ListView {
                            for entry in root.top-entries: Rectangle {
                                height: 42px;
                                background: ColorPalette.bg-list-odd;
                                clip: true;
                                Rectangle {
                                    y: 3px;
                                    x: 8px;
                                    height: 18px;
                                    width: parent.width - 16px;
                                    HorizontalLayout {
                                        spacing: 4px;
                                        Text {
                                            text: entry.name;
                                            color: ColorPalette.text-hover-name;
                                            font-weight: 600;
                                            overflow: elide;
                                            wrap: no-wrap;
                                            vertical-alignment: center;
                                            horizontal-stretch: 1;
                                            font-size: 12px;
                                        }
                                        Text {
                                            text: entry.meta;
                                            color: ColorPalette.text-accent;
                                            overflow: elide;
                                            wrap: no-wrap;
                                            vertical-alignment: center;
                                            horizontal-stretch: 0;
                                            font-size: 11px;
                                        }
                                        Text {
                                            text: entry.size_label;
                                            color: ColorPalette.success;
                                            font-weight: 600;
                                            overflow: elide;
                                            wrap: no-wrap;
                                            vertical-alignment: center;
                                            horizontal-stretch: 0;
                                            font-size: 12px;
                                        }
                                    }
                                }
                                Text {
                                    y: 23px;
                                    x: 8px;
                                    width: parent.width - 16px;
                                    height: 17px;
                                    text: entry.path;
                                    color: ColorPalette.text-path;
                                    overflow: elide;
                                    wrap: no-wrap;
                                    vertical-alignment: center;
                                    font-size: 11px;
                                }
                            }
                        }
                        if (root.top-entries.length == 0): Text {
                            text: Translations.after-scan;
                            color: ColorPalette.text-muted;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}
