---
import Layout from '../layouts/Layout.astro'
import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
import { RiArrowsArrowGoBackLine } from 'solid-icons/ri'
---

<Layout title="Dashboard - OCBO e-Sign">
  <Page alignment="column">
    <Padding left={4.75} right={4.75}>
      <Row content="split">
        <Display desktop tablet>
          <Row content="left" gap={2}>
            <Logo size={140} />
            <h1>OCBO e-Sign</h1>
          </Row>
        </Display>

        <Link to="/">
          <Row content="left" gap={1}>
            <span class="name">Go Back</span>
            <RiArrowsArrowGoBackLine size={25} />
          </Row>
        </Link>
      </Row>
    </Padding>
  </Page>
</Layout>

<style lang="sass">
  @use '/src/styles/variables.sass' as vars
  @use 'sass:color'

  .padding
    margin: 11rem
    border: 1px solid red

  h1
    font-size: 3.25rem
    color: vars.$textColor

  .div
    width: 8rem

  .name
    font-size: 1.25rem

  .table
    width: 100%
    border-collapse: collapse
    margin: 2rem

    th, td
      border: 1px solid vars.$tableBorderColor
      padding: 0.75rem
      text-align: left
      font-size: 1.1rem

    td:nth-child(1)
      width: 12rem

    td:nth-child(3)
      width: 9rem

    th
      background-color: vars.$tableHeaderBackground
      color: white
</style>