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 d-flex flex-wrap"},
      data.repos.map((repo) => {
        return (
          m('div', {class: "col", style: "flex-basis: 50%; max-width: 50%;"},
            m('div', {class: "my-2 card bezel-gray flex-grow-1"},
              m('div', {class: "card-header"},
                m('a', {class: "card-title fs-5", href: `${data.reposPath}/${slugify(repo.name)}/branches/${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)}/branches/${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
  }
}