<brls:Box
        highlightCornerRadius="8"
        wireframe="false"
        width="auto"
        height="auto">
    <brls:Box
            id="video/card/pic_box"
            axis="row"
            width="30%"
            height="100%">
        <brls:Image
                id="video/card/picture"
                scalingType="fill"
                width="30%"
                height="100%"
                image="@res/pictures/video-card-bg.png"
                cornerRadius="4"/>

        <brls:Box
                id="video/card/badge/boxTop"
                backgroundColor="#FF0000"
                positionType="absolute"
                cornerRadius="4"
                padding="4"
                positionTop="8"
                positionRight="8">
            <brls:Label
                    id="video/card/badge/top"
                    textColor="#FFFFFF"
                    fontSize="16"
                    height="16"
                    horizontalAlign="center"/>
        </brls:Box>


        <brls:Box
                id="video/card/badge/box/bottom"
                positionBottom="0"
                positionType="absolute"
                background="vertical_linear"
                paddingLeft="10"
                paddingRight="10"
                width="100%"
                height="10%"
                alignItems="center">
            <brls:Label
                    id="video/card/label/bottom"
                    positionType="absolute"
                    positionRight="8"
                    positionBottom="8"
                    textColor="#FFFFFF"
                    fontSize="16"/>
        </brls:Box>
    </brls:Box>

    <brls:Box
            margin="10"
            axis="column">
        <brls:Box
                wireframe="false"
                alignItems="center"
                marginBottom="4"
                height="30">
            <brls:Box
                    cornerRadius="4"
                    borderThickness="1"
                    borderColor="@theme/font/grey"
                    marginRight="8"
                    height="20"
                    padding="2">
                <brls:Label
                        id="video/card/label/type"
                        fontSize="14"
                        height="16"
                        horizontalAlign="center"
                        textColor="@theme/font/grey"/>
            </brls:Box>

            <TextBox
                    wireframe="false"
                    grow="1"
                    id="video/card/label/title"
                    fontSize="20"
                    lineHeight="1.5"/>
        </brls:Box>

        <brls:Label
                wireframe="false"
                id="video/card/label/subtitle"
                fontSize="16"
                singleLine="true"
                marginBottom="8"/>
        <brls:Label
                wireframe="false"
                id="video/card/label/actor"
                fontSize="16"
                singleLine="true"
                marginBottom="8"/>
        <brls:Label
                grow="1"
                wireframe="false"
                id="video/card/label/desc"
                fontSize="16"
                lineHeight="1.3"
                textColor="@theme/font/grey"/>
        <brls:Box
                alignItems="flexEnd"
                width="100%">
            <brls:Label
                    wireframe="false"
                    id="video/card/label/count"
                    fontSize="16"
                    marginRight="8"
                    singleLine="true"/>
            <brls:Label
                    wireframe="false"
                    id="video/card/label/score"
                    fontSize="24"
                    singleLine="true"
                    textColor="@theme/font/yellow_1"/>
        </brls:Box>
    </brls:Box>
</brls:Box>