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

window(key="course_list") > darken_ui {
    width = parent_width,
    height = parent_height,
    can_hover = true,

    on_mouse_move = "init#return true",
    on_mouse_move_over = "init#return true",
    on_mouse_move_out = "init#return true",
    on_mouse_up = "init#return true",
    on_mouse_down = "init#return true",

    background_color = rgba(0, 0, 0, 0.4),
}

window > content(style="course_list") > buttons {
    align_height = false,
    y = parent_height - 66,
    height  = 66,
    width = parent_width - 100,

    layout = "grid",
    columns = 2,
    spacing = 16,
    margin = 12,
}

window > content(style="course_list") > buttons > button(id="new") {
    tint = rgb(20, 255, 120),
}

window > content(style="course_list") > scroll_panel {
    align_height = false,
    align_width = false,
    x = 40,
    y = 40,
    height = parent_height - 100,
    width = parent_width - 50,
}

window > content(style="course_list") > scroll_panel > content {
    layout = "rows",
}

course_entry {
    height = 200,
    layout = "center",

    can_hover = true,

    on_mouse_move_over = "init#
        ui.set_cursor('base:ui/cursor/interact')
        local content = ui.builder(function()
            return content {
                'Click to edit'
            }
        end)
        ui.show_tooltip('course_key', content, evt.x, evt.y)
    ",
    on_mouse_move_out = "init#
        ui.set_cursor('base:ui/cursor/normal')
        ui.hide_tooltip('course_key')
    ",
    on_mouse_move = "init#
        ui.move_tooltip('course_key', evt.x, evt.y)
        return true
    ",
}


course_entry(deprecated=true) {
    background_color = rgba(0, 0, 0, 0.4),
}

course_entry(on_click=click) {
    on_mouse_up = list(click, "init#
        audio.play_sound('click')
        return true
    "),
}

course_entry(hover=true) {
    background_color = rgba(255, 255, 0, 0.1),
}

course_entry > header {
    align_height = false,
    layout = "center",
    height = 30,
    background_color = rgba(0, 0, 0, 0.1),
}
course_entry > header > title {
    layout = "lined",
    width = parent_width,
    y = 0,
    line_height = 30,
}
course_entry > header > title > @text {
    font_size = 30,
}

course_entry > info {
    align_height = false,
    align_width = false,
    x = 0,
    width = parent_width,
    y = 30,
    height = 65,

    layout = "grid",
    rows = 2,
    columns = 3,
    spacing = 1,
}

course_entry > info > info_text > @text {
    font_size = 21,
    y = 5,
    x = 4,
}

course_entry > info > button(id="remove") {
    tint = rgb(255, 10, 10),

    on_mouse_move_over = "ui.button#
        move_over(node, evt)
        local content = ui.builder(function()
            return content {
                'Marks the course for removal.\\nThis will prevent students from signing '
                .. 'up to this course and will remove it once all remaining students have finished.'
            }
        end)
        ui.show_tooltip('course_remove_key', content, evt.x, evt.y)
    ",
    on_mouse_move_out = "ui.button#
        move_out(node, evt)
        ui.hide_tooltip('course_remove_key')
    ",
    on_mouse_move = "init#
        ui.move_tooltip('course_remove_key', evt.x, evt.y)
        return true
    ",
}

course_entry > course_timetable_overview {
    align_height = false,
    y = parent_height - 100,
    height = 100,
    width = parent_width,

    background_color = rgba(0, 0, 0, 0.1),

    layout = "grid",
    columns = 7,
    margin = 0,
    spacing = 2,
}

course_entry > course_timetable_overview > course_day {
    background_color = rgba(0, 0, 0, 0.2),

    layout = "grid",
    rows = 5,
    spacing = 5,
    margin = 2,
}

course_entry > course_timetable_overview > course_day > center > label {
    layout = "lined",
}
course_entry > course_timetable_overview > course_day > center > label > @text {
    font_size = 18,
}
course_entry > course_timetable_overview > course_day(weekend=true) > center > label > @text {
    font_color = rgb(50, 50, 0),
}

course_entry > course_timetable_overview > course_day(weekend=true) {
    background_color = rgba(120, 0, 0, 0.2),
}

course_entry > course_timetable_overview > course_day > course_period {
    background_color = rgba(120, 120, 120, 0.5),
}
course_entry > course_timetable_overview > course_day > course_period(booked=true) {
    background_color = rgba(0, 200, 100, 1.0),
}