<template>
 <Background
  class="un-bg-gradient-to-tr un-from-blue-800 un-to-blue-600"
 >
  <Row
   align-items="center"
   text-color="light"
   data-bs-theme="dark"
  >
   <Col padding="3 lg-5">
    <b-div display="none lg-block">
     <b-h levle="2">
      User Details
     </b-h>
    </b-div>
    <Breadcrumb margin="t-3">
     <BreadcrumbItem>
      Profile
     </BreadcrumbItem>
     <BreadcrumbItem active>
      User Details
     </BreadcrumbItem>
    </Breadcrumb>
   </Col>
   <Col
    col="auto"
    padding="3 lg-5"
   >
    <b-div display="none lg-block">
     <b-button
      style="background-color: rgba(247,250,255,.1);"
     >
      Sign Out
     </b-button>
    </b-div>
   </Col>
  </Row>
 </Background>
</template>

<template>
 <Row align-items="lg-center">
  <Col
   col="lg"
   margin="b-2 b-lg-0"
  >
   <Breadcrumb margin="b-0">
    <BreadcrumbItem>
     <Anchor to="/">
      Available
     </Anchor>
    </BreadcrumbItem>
    <BreadcrumbItem>
     <Anchor to="/">
      California
     </Anchor>
    </BreadcrumbItem>
    <BreadcrumbItem>
     <Anchor to="/">
      San Francisco
     </Anchor>
    </BreadcrumbItem>
    <BreadcrumbItem>
     <Anchor to="/">
      Apartment
     </Anchor>
    </BreadcrumbItem>
    <BreadcrumbItem
     active
    >
     123 Elm Street, Maplewood, CA90210
    </BreadcrumbItem>
   </Breadcrumb>
  </Col>

  <Col col="lg-auto">
   <b-button
    color="ghost-secondary"
    margin="e-2"
    icon="bi:star"
   >
    Favorite
   </b-button>
   <b-button
    color="ghost-secondary"
    icon="bi:send"
    margin="e-2"
   >
    Forward
   </b-button>
  </Col>
 </Row>
</template>

<template>
 <Background background-color="light">
  <Row align-items="center">
   <Col>
    <b-h
     level="4"
     margin="3"
    >
     Products Grid
    </b-h>
   </Col>
   <Col
    col="sm-auto"
   >
    <Breadcrumb margin="3">
     <BreadcrumbItem>
      <Anchor to="/">
       Shop
      </Anchor>
     </BreadcrumbItem>
     <BreadcrumbItem>
      <Anchor to="/">
       Products
      </Anchor>
     </BreadcrumbItem>
     <BreadcrumbItem
      active
     >
      Grid
     </BreadcrumbItem>
    </Breadcrumb>
   </Col>
  </Row>
 </Background>
</template>