---
import Layout from '../layouts/Layout.astro'
import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding, Modal } from '../../fwt/'
import { FiLogOut } from 'solid-icons/fi'
import { ofetch } from 'ofetch'
import Table from '../components/Table/Table'
---

<script>
  import gsap from 'gsap'
  const modal = document.getElementById('modal')
  const modalButton = document.getElementById('modal-button')

  modalButton?.addEventListener('click', () => {
    gsap.to(modal, {
      duration: 0,
      display: 'block',
      ease: 'power2.out',
    })
  })

  modal?.addEventListener('click', () => {
    gsap.to(modal, {
      duration: 0,
      display: 'none',
      ease: 'power2.out',
    })
  })
</script>

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

          <Row content="left" gap={1}>
            <span class="name">Patrick Alvin Alcala</span>
            <Link to="/"><FiLogOut size={25} /></Link>
          </Row>
        </Display>

        <Row content="center">
          <h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
        </Row>

        <Table client:load />
      </Row>
    </Padding>

    <div id="modal" style="display: none">
      <Modal background="rgba(0,0,0,0.5)">
        <h1>SAMPLE</h1>
      </Modal>
    </div>
  </Page>

  <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
  </style>
</Layout>