---
import Layout from '../layouts/Layout.astro'
import PasswordManagerComponent from '../components/PageComponents/Password-Manager/PasswordManagerComponent.tsx'
import PageTitle from '../components/PageTitle/PageTitle.tsx'
---

<Layout title="Password Manager - AIO Tools">
  <main class="page">
    <PageTitle title="Password Manager" description="Manage your passwords securely and privately. Recommended to be pair with Password Generator for best security." />

    <section class="content">
      <PasswordManagerComponent client:visible />
    </section>
  </main>
</Layout>

<style lang="sass">
  @use '/src/styles/breakpoint.sass' as view

  .page
    font-family: 'Inter', sans-serif
    text-align: center
    margin: 4rem 0 0 0
    transition: margin 0.4s ease-in-out

    @media screen and (max-width: view.$tablet)
      margin-top: 1rem

  .content
    display: flex
    justify-content: center
    align-items: center
    // border: 1px solid #ffffff
    // padding: 2rem
    // border-radius: 8px
</style>