Mini Kabibi Habibi

layout peopleSelector {
    constant:

    interface:
        showProgress : false;
        showPeopleView: false;
        showNoPeopleFoundView: false;
        showDetails : false;
        showTagsView: false;

    view TView(
        placement: place_column,
        margin: 10,
        width: 280)
    {
        TOptional(bind: @showProgress, horizontal: align_fill, placement: place_row, margin: 5, spacing: 0)
        {
            column(spacing: 0, margin: 0, vertical: align_center) {
                TView(height: 8) {} //Workaround as TIconSeriesView isn't aligning at center
                TIconSeriesView(
                    identifier : @spinner,
                    width      : 32,
                    height     : 32,
                    vertical   : align_center);
            }
            TStaticText(name: "$$$/PeopleSelector/DetectingPeople=Detecting people", vertical : align_center);
        }
        TOptional(bind: @showNoPeopleFoundView, placement: place_row, horizontal: align_fill, margin: 0, spacing: 0)
        {
            TView(width:32, height: 40) {} //So that the text appears at the same place as in the progress view.
            TStaticText(name: "$$$/PeopleSelector/NoPeopleFound=No people found", vertical : align_center);
        }
        TOptional(bind: @showPeopleView, horizontal: align_fill)
        {
            TImageGrid(identifier: @peopleGroup, columns: 5, item_size: 44, item_gap: 10, max_items: 20, control_padding: 0, vertical: align_center);
            TOptional(bind: @showTagsView, horizontal: align_fill)
            {
                TTagButton(identifier: @personTag);
                TSeparator(height: 1, horizontal: align_fill);
                
                TFixedGrid(identifier: @tagsGrid, horizontal: align_fill);
                row(horizontal: align_right)
                {
                    TButton(name: "$$$/ControlsStrings/Cancel=Cancel",
                            identifier: @cancel,
                            font: static_small_bold_font,
                            width: gToolOptionsIconWidth,
                            height: gToolOptionsIconHeight,
                            overrideStyle: true,
                            dialogButton: true);
                    TButton(name: "$$$/PeopleSelector/Apply=Apply",
                            identifier: @applyButton,
                            font: static_small_bold_font,
                            width: gToolOptionsIconWidth,
                            height: gToolOptionsIconHeight,
                            default: true,
                            overrideStyle: true,
                            dialogButton: true);                            
                }
            }
        }
    }
}