import {NavHelper} from './helpers/nav.ts'

export default async (
  eleventyConfig: any,
  data: any,
  nav: ReturnType<typeof NavHelper>
) => {
  const slugify = eleventyConfig.getFilter("slugify")

  return `
    <div class="d-flex flex-wrap">
      ${data.branches.map((branch) => {
        return `
          ${branch.repoName === data.branchInfo.repoName
            ? `
              <div class="card bezel-gray m-2 flex-grow-1" style="flex-basis: 20rem; max-width: 20rem;">
                <div class="card-header">
                  <a class="card-title" href="${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches">${branch.branchName}</a>
                  ${branch.branchName === data.branchInfo.branchName ? '<div class="badge rounded-pill bg-secondary mx-1">current</div>' : ''}
                  ${branch.branchName === data.reposConfig.repos[branch.repoName].defaultBranch ? '<div class="badge rounded-pill bg-info text-dark mx-1">default</div>' : ''}
                </div>
                <div class="card-body">
                  <p>${branch.description || ''}</p>
                  <p>${branch.ahead} commits ahead, ${branch.behind} commits behind <span class="font-monospace">${branch.compareTo}</span></p>
                </div>
                <div class="card-footer">
                  <a class="m-1 btn btn-outline-primary shadow-none" href="${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches">Switch to branch</a>
                </div>
              </div>
            `
            : ''
          }
        `
      }).join('')}
    </div>
  `
}