import m from 'mithril'
import render from 'mithril-node-render'

export default (_reposConfig: any, eleventyConfig: any, data: any) => {
  const slugify = eleventyConfig.getFilter("slugify")

  const pageContent = m('div', {class: "container"}, [
    m('div', {class: "row my-3"},
      m('div', {class: "col"},
        m('h1', data.reposConfig.defaultTemplateConfiguration?.allRepositoriesPageTitle || "All Repositories")
      )
    ),
    m('div', {class: "row"},
      m('div', {class: "col d-flex flex-wrap"},
        data.repos.map((repo) => {
          return (
            m('div', {class: "m-2 card bezel-gray flex-grow-1", style: "flex-basis: 20rem;"},
              m('div', {class: "card-header"},
                m('a', {class: "card-title fs-5", href: `${data.reposPath}/${slugify(repo.name)}/branch/${repo.defaultBranch}`}, repo.name)
              ),
              m('div', {class: "card-body"},
                repo.description ? m('p', {class: "card-text"}, repo.description) : null
              ),
              m('div', {class: "card-footer"}, [
                m('a', {
                  href: `${data.reposPath}/${slugify(repo.name)}/branch/${repo.defaultBranch}`,
                  class: "ms-0 me-2 my-2 btn btn-primary text-white"
                }, 'Go to site'),
                m('button', {
                  class: "mx-1 my-2 btn btn-outline-secondary shadow-none dropdown-toggle clone-popover-btn",
                  'data-copy-text': repo.cloneUrl
                }, 'Clone'),
                (data.reposConfig.repos[repo.name].defaultTemplateConfiguration?.homepageButtons || []).map((button) => {
                  return m('a', {
                    class: "mx-1 my-2 btn btn-outline-secondary shadow-none",
                    href: button.url,
                    target: button.newTab ? '_blank' : '_self'
                  }, [button.text, button.newTab ? [' ', m('span', m.trust('⧉'))] : null])
                })
              ])
            )
          )
        })
      )
    )
  ])

  return {
    rootPath: `${data.reposPath}/`,
    pageTitle: 'Repositories',
    pageContent
  }
}