get_main_page :: () -> string {
    builder : String_Builder;
    add_navbar(*builder);
    print_to_builder(*builder, "<div class=\"archive-layout\">\n");
    add_sidebar(*builder);
    print_to_builder(*builder, start_grid, state.recipes.count, state.recipes.count);
    for recipe : state.recipes {
        print_to_builder(*builder, card, recipe.id, recipe.image, recipe.name, recipe.category, recipe.duration);
    }
    print_to_builder(*builder, "%", end_grid);
    print_to_builder(*builder, "</div>\n");
    return builder_to_string(*builder);
}

#scope_file

start_grid : string = #string DONE
<main class="main-content">
    <header class="archive-header">
        <h2 class="mono" style="font-size: 1rem; color: var(--ink);">// RECIPES</h2>
        <div class="mono">Showing % of %</div>
    </header>

    <div class="grid-dense">
DONE

card : string = #string DONE
<a href="/recipe?id=%" class="asset-card">
    <div class="asset-img"><img src="%" alt="Image of recipe"></div>
    <h3 class="asset-title">%</h3>
    <div class="asset-meta mono"><span>%</span> <span>%</span></div>
</a>
DONE

end_grid : string = #string DONE
    </div>
</main>
DONE

add_sidebar :: (builder: *String_Builder) {

    categories : Table(string, int);
    for recipe : state.recipes {
        categoryptr := table_find_pointer(*categories, recipe.category);
        if categoryptr {
            table_set(*categories, recipe.category, categoryptr.* + 1);
        } else {
            table_set(*categories, recipe.category, 1);
        }
    }

    print_to_builder(builder, "<aside class=\"sidebar\">\n");
    print_to_builder(builder, "<div class=\"filter-group\">\n");
    print_to_builder(builder, "<span class=\"filter-title\">Category</span>\n");
    for count, category : categories {
        print_to_builder(builder, "<div class=\"filter-option\">% <span class=\"count\">%</span></div>", category, count);
    }
    print_to_builder(builder, "</div>\n");
    print_to_builder(builder, "</aside>\n"); 
}