export default async (eleventyConfig: any) => {
  const slugify = eleventyConfig.getFilter("slugify")

  return (data: any) => {
    return `
      <!doctype html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Repositories</title>
          <link rel="stylesheet" href="/css/design-board.css">
        </head>
        <body>
          <div class="container my-4">
            <div class="row">
              <div class="col">
                <h1>Tucker's Repositories</h1>
              </div>
            </div>
            <div class="row">
              <div class="col d-flex flex-wrap">
                ${data.repos.map((repo) => {
                  return `
                    <div class="mx-2 card bezel-gray" style="width: 18rem;">
                      <div class="card-body">
                        <h2 class="card-title fs-5">${repo.name}</h2>
                        ${repo.description ? `<p class="card-text">${repo.description}</p>` : ''}
                        <a href="${data.reposPath}/${slugify(repo.name)}/branches/${repo.defaultBranch}" class="btn btn-primary text-white">Go to ${repo.name}</a>
                      </div>
                    </div>
                  `
                }).join('')}
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
  `
  }
}