
window > content(style="item_list") {
    layout = "center",
}

window > content(style="item_list") > buttons {
    align_height = false,
    y = parent_height - 70,
    width = parent_width - 50,
    height = 72,
    layout = "grid",
    columns = 2,
    rows = 1,

    margin = 16,
    spacing = 200,
}

window > content(style="item_list") > scroll_panel {
    y = 48,
    x = 48,
    width = 275,
    height = 377,
    align_height = false,
    align_width = false,
}

window > content(style="item_list") > scroll_panel(rows=rows) > content {
    layout = "grid",
    columns = 1,
    rows = rows,
    spacing = 10,
    margin = 0,
    height = rows * 40,
}

window > content(style="item_list") > scroll_panel(rows=rows) > content > button(selected=true) {
    border = border_image("ui/button_tint", 15, 15, true),
    tint = rgb(0.0, 0.8, 0.8),
}

window > content(style="item_list") > preview {
    y = 48,
    x = parent_width - (275 + 32),
    width = 275,
    height = 377,
    align_height = false,
    align_width = false,
}

window > content(style="item_list") > preview > icon(img=image) {
    image = image,
    x = 0,
    y = 0,
    width = 275,
    height = 200,
}

window > content(style="item_list") > preview > description {
    layout = "lined",
    width = 265,
    line_height = 25,
    y = 205,
    x = 5,
}

window > content(style="item_list") > preview > description > @text {
    font_size = 25,
    font_color = rgb(0, 0, 0),
}

window > content(style="item_list") > preview > description > @text(entity_requirement=true) {
    font_color = rgb(0, 0, 120),
}
window > content(style="item_list") > preview > description > @text(entity_requirement_info=true) {
    font_color = rgb(0, 0, 255),
    text_shadow = text_shadow(1.0, 1.0, "#000044", 1.0),
}

window > content(style="item_list") > preview > description > bullet_point {
    width = 25,
    height = 25,
    image = "ui/bullet_point",
    tint = rgb(0, 0, 120),
}

window > content(style="item_list") > scroll_panel(rows=rows) > content > button(key=key, requirements=req) {
    on_mouse_move_over = "ui.tooltip#
        local key = node:get_property_string('key')
        local req = node:get_property_table('requirements')

        local content = ui.new('requirements')
        local title = ui.new('content')
        title:add_child(ui.new_text('Requirements:'))
        content:add_child(title)

        for _, r in ipairs(req) do
            local info = ui.new('content')
            if r.met then
                local checkmark = ui.new('icon')
                checkmark:set_property_string('img', 'ui/checkmark')
                info:add_child(checkmark)
            else
                local checkmark = ui.new('icon')
                checkmark:set_property_string('img', 'ui/cross')
                info:add_child(checkmark)
            end
            add_text(info, ' ' .. r.info)
            info:set_property_bool('met', r.met)
            content:add_child(info)
        end

        ui.show_tooltip(key, content, evt.x, evt.y)
    ",
    on_mouse_move_out = "init#
        local key = node:get_property_string('key')
        ui.hide_tooltip(key)
    ",
    on_mouse_move = "init#
        local key = node:get_property_string('key')
        ui.move_tooltip(key, evt.x, evt.y)
    ",
}


tooltip > requirements {
    layout = "rows",
    width = 350,
}

tooltip > requirements > content {
    layout = "lined",
    width = 350,
    line_height = 23,
    height = 25,
}
tooltip > requirements > content > @text {
    font_size = 20,
    font_color = rgb(255, 60, 60),
}
tooltip > requirements > content(met=true) > @text {
    font_size = 20,
    font_color = rgb(160, 255, 160),
}


tooltip > requirements > content > @text(highlight=true) {
    font_color = rgb(0, 255, 0),
}
tooltip > requirements > content > @text(special=true) {
    font_color = rgb(255, 255, 0),
}
tooltip > requirements > content > icon(img=img) {
    image = img,
    width = 25,
    height = 25,
}