{ config, lib, ... }:
let
  inherit (lib)
    mkOption
    types
    ;
  cfg = config;
in
{
  # TODO: enable i18n, e.g. via a nested attribute for language-specific content
  options.pages = mkOption {
    description = ''
      Collection of pages on the site
    '';
    type = with types; attrsOf (submodule config.content-types.page);
  };

  config.files = with lib; cfg.templates.files (attrValues config.pages);

  config.content-types.page = { name, config, ... }: {
    imports = [ cfg.content-types.document ];
    options = {
      title = mkOption {
        description = "Page title";
        type = types.str;
        default = name;
      };
      description = mkOption {
        description = ''
          One-sentence description of page contents
        '';
        type = types.str;
      };
      summary = mkOption {
        description = ''
          One-paragraph summary of page contents
        '';
        type = types.str;
      };
      body = mkOption {
        description = ''
          Page contents in CommonMark
        '';
        type = types.str;
      };
    };

    config.outputs.html = cfg.templates.html.page config;
  };

  config.templates.html.page = lib.template cfg.templates.html.dom (page: {
    html = {
      head = {
        title.text = page.title;
        meta.description = page.description;
        link.canonical = lib.head page.locations;
        link.stylesheets = [
          # TODO: allow enabling preload with a flag
          { href = "${page.link cfg.assets."style.css"}"; }
          { href = "${page.link cfg.assets."fonts.css"}"; }
        ];
      };
      body.content = [
        ''
          <header>
            <input type="checkbox" id="menu-toggle" hidden>
            <label for="menu-toggle" hidden>
              <svg class="menu-open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20">
               <path d="M0 4 H20 M0 10 H20 M0 16 H20" stroke="currentColor" stroke-width="2"/>
              </svg>
              <svg class="menu-close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20">
                <path d="M2 2L18 18M18 2L2 18" stroke="currentColor" stroke-width="2"/>
              </svg>
            </label>
            ${lib.indent "  " (cfg.menus.main.outputs.html page)}
          </header>
        ''
        {
          section = {
            attrs = { };
            heading.content = page.title;
            content = [
              (cfg.templates.html.markdown { inherit (page) name body; })
            ];
          };
        }
      ];
    };
  });
}