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

window > content(style="staff_hire") > 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="staff_hire") > scroll_panel {
    y = 48,
    x = 48,
    width = 275,
    height = 377,
    align_height = false,
    align_width = false,
}

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

window > content(style="staff_hire") > 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="staff_hire") > preview {
    y = 48,
    x = parent_width - (275 + 200),
    width = 450,
    height = 377,
    align_height = false,
    align_width = false,
    background_color = rgba(0, 0, 0, 0.1),
}

window > content(style="staff_hire") > preview > buttons {
    y = parent_height - 50,
    width = parent_width - 10,
    height = 60,
    layout = "grid",
    columns = 3,
    rows = 1,

    margin = 16,
    spacing = 15,
}


window > content(style="staff_hire") > preview > buttons  > price_tag {
    border_width = border_width(40.0),
    border = border_image("ui/background_grid_green", 40, 40,  true),
    shadow = shadow(3.0, 3.0, rgba(0, 0, 0, 0.8), 5.0, 0.0, "outset"),
    width = 120,
}

window > content(style="staff_hire") > preview > buttons  > price_tag(can_afford=false) {
    border = border_image("ui/background_grid", 40, 40,  true),
    tint = rgb(255, 1, 0),
}

window > content(style="staff_hire") > preview > buttons  > price_tag > @text {
    font_size = 17,
    width = 120,
    height = 20,
    x = 8,
    y = 5,
    font_color = rgb(0, 0, 0),
}

window > price_tag(can_afford=false) > @text {
    font_color = rgb(0, 60, 60),
}

window > content(style="staff_hire") > preview > icon(img=image) {
    x = 3,
    y = 3,
    width = 54,
    height = 54,
    border_width = border_width(40.0),
    border = border_image("ui/background_grid", 40, 40,  true),
    shadow = shadow(3.0, 3.0, rgba(0, 0, 0, 0.3), 5.0, 0.0, "outset"),
}

window > content(style="staff_hire") > preview > icon(img=image) > icon_content {
    width = 54,
    height = 54,
    image = image,
}

window > content(style="staff_hire") > preview > icon > pin {
    image = "ui/pin_small",
    width = 24,
    height = 24,
    x = 40,
    y = -15,
}

window > content(style="staff_hire") > preview > icon > pin > pin_color {
    image = "ui/pin_small_tint",
    width = 24,
    height = 24,
    tint = rgb(255, 140, 200),
}

window > content(style="staff_hire") > preview > skills {
    x = (parent_width / 2) - 150,
    y = 80,
    layout = "rows",
    width = 300,
}

window > content(style="staff_hire") > preview > description_back {
    width = 354,
    height = 54,
    y = 3,
    x = 73,
    border_width = border_width(40.0),
    border = border_image("ui/background_grid", 40, 40,  true),
    shadow = shadow(3.0, 3.0, rgba(0, 0, 0, 0.3), 5.0, 0.0, "outset"),
}

window > content(style="staff_hire") > preview > description_back > pin {
    image = "ui/pin_small",
    width = 24,
    height = 24,
    x = 342,
    y = -15,
}

window > content(style="staff_hire") > preview > description_back > pin > pin_color {
    image = "ui/pin_small_tint",
    width = 24,
    height = 24,
    tint = rgb(140, 100, 255),
}

window > content(style="staff_hire") > preview > description {
    layout = "lined",
    width = 350,
    line_height = 25,
    y = 5,
    x = 75,
}

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

window > content(style="staff_hire") > 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,
}


window > content(style="staff_hire") > staff_preview {
    y = 48,
    x = parent_width - (275 + 110),
    width = 275,
    height = 377,
    align_height = false,
    align_width = false,
    background_color = rgb(255, 0, 255),
}

window > content(style="staff_hire") > staff_preview > icon(img=image) {
    image = image,
    x = 0,
    y = 0,
    width = 275,
    height = 200,
    background_color = rgb(255, 0, 0),
}

window > content(style="staff_hire") > staff_preview > description {
    layout = "lined",
    width = 265,
    line_height = 25,
    y = 205,
    x = 5,
    background_color = rgb(0, 255, 0),
}

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