import { html, css, sanitize } from '../templater.js'
import base from '../styles/base.js'

const body = async (ctx, { path, title }) => html`
  <footer>
    <p>Fugiat consectetur veniam sit ullamco. Aute do voluptate velit nulla nisi aliqua fugiat nulla sunt dolor nostrud. Est adipisicing sint eiusmod voluptate sunt dolor.</p>
    <p>Et duis pariatur veniam aliquip. Nisi occaecat ea commodo amet. Sunt commodo aliquip ullamco ad do magna commodo ut eiusmod. Id nostrud deserunt in excepteur ipsum laborum tempor dolor. Nisi ipsum elit magna sit exercitation ut aliqua irure laboris et.</p>
    <p>Eu cupidatat in ut nisi reprehenderit dolore. Consectetur reprehenderit id in ad eu duis anim. Ipsum ut velit in velit occaecat enim laboris Lorem nostrud.</p>
    <dl>
      <dt>Path:</dt>
      <dd>${sanitize(path)}</dd>
      <dt>Title:</dt>
      <dd>${sanitize(title)}</dd>
    </dl>
  </footer>
`

const styles = css`
  footer {
    display: flex;
    flex-wrap: wrap;
  }

  footer > * {
    flex: 1;
    flex-basis: 30rem;
    margin: 2rem;
    margin-bottom: 0;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  footer dt {
    font-weight: bolder;
  }

  footer dd {
    margin-left: 1rem;
  }
`

export async function Footer (ctx, { path, title }) {
  ctx.css.add(styles)
  ctx.body = await body(ctx, { path, title })

  return ctx
}