export component BatteryWidget {
    in property <int> bar_height;
    in property <string> battery_status;         // charging / discharging / notcharging / unknown
    in property <int> battery_capacity;          // numeric percentage
    in property <string> battery_capacity_level; // critical / low / normal / high / full
    in property <string> battery_icon;

    callback show_battery();

    height: bar_height * 1px;
    width: bar_height * 1px;

    Rectangle {
        background: touch_area.pressed ? #4a5f70
                  : touch_area.has-hover ? #6d8a4d
                  : #8e9162;
        border-radius: 3px;

        HorizontalLayout {
            padding-left: 3px;
            padding-right: 3px;

            Text {
                text: battery_icon;
                color: white;
                vertical-alignment: center;
                horizontal-alignment: center;
            }
        }

        touch_area := TouchArea {
            clicked => { show_battery(); }
        }
    }
}