<template>
  <f7-page name="home">
    <!-- Top Navbar -->
    <f7-navbar>
      <f7-nav-left>
        <f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
      </f7-nav-left>
      <f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title>
    </f7-navbar>
    <!-- Page content-->
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;">
      <h2>Anatomy Lab Visual Identification Neural Network</h2>
      <h4>Veterinary Anatomy Edition</h4>
      <p>Select a region to begin</p>
      <f7-segmented raised style="flex-wrap: wrap;">
        <f7-button style="height: auto; width: auto;" href="/detect/thorax/">
          <img src="../assets/regions/thorax.svg" />
        </f7-button>
        <f7-button style="height: auto; width: auto;" href="/detect/abdomen/">
          <img src="../assets/regions/abdpel.svg" />
        </f7-button>
        <f7-button style="height: auto; width: auto;" href="/detect/limbs/">
          <img src="../assets/regions/limb.svg" />
        </f7-button>
        <f7-button style="height: auto; width: auto;" href="/detect/head/">
          <img src="../assets/regions/headneck.svg" />
        </f7-button>
      </f7-segmented>
    </div>
  </f7-page>
</template>