<template>
  <div class="page page-account page-with-subnavbar" data-name="account">
    <div class="toolbar tabbar tabbar-labels toolbar-bottom elevation-6 bg-white">
      <div class="toolbar-inner">
        <a href="/home/" data-transition="f7-cover-v" class="link">
          <i class="icon material-symbols-outlined">home</i>
          <span class="tabbar-label">Home</span>
        </a>
        <a href="/action/" data-transition="f7-cover-v" class="link">
          <i class="icon material-symbols-outlined">folder</i>
          <span class="tabbar-label">Action</span>
        </a>
        <a href="/account/" data-transition="f7-cover-v" class="link tab-link-active">
          <i class="icon material-icons">person</i>
          <span class="tabbar-label">Account</span>
        </a>
        <a href="/more/" data-transition="f7-cover-v" class="link">
          <i class="icon material-symbols-outlined">more_horiz</i>
          <span class="tabbar-label">More</span>
        </a>
      </div>
    </div>
    <div class="navbar navbar-transparent">
      <div class="navbar-bg">
      </div>
      <div class="navbar-inner sliding">
        <div class="title">
          <h4>Account</h4>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="list">
        <ul>
          <li>
            <a href="/account_edit/" data-transition="f7-dive" class="item-link item-content">
              <div class="item-media">
                <i class="icon f7-icons">pencil_circle</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Edit Account</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/address/" data-transition="f7-dive" class="item-link item-content">
              <div class="item-media">
                <i class="icon f7-icons">search_circle</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Address</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/password_change/" data-transition="f7-dive" class="item-link item-content">
              <div class="item-media">
                <i class="icon f7-icons">arrow_right_arrow_left_circle</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Change Password</div>
              </div>
            </a>
          </li>
          <li>
            <a href="/account_delete/" data-transition="f7-dive" class="item-link item-content">
              <div class="item-media">
                <i class="icon f7-icons">multiply_circle</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Delete Account</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="container">
        <div class="row">
          <a id="signout" class="btn btn-danger btn-f600 btn-block">Logout</a>
        </div>
      </div>
    </div>
  </div>
</template>