@inject CustomAuthenticationStateProvider AuthStateProvider;
@inject State State;
<nav class="left drawer l">
  <header>
    <nav>
      <AuthorizeView>
        <Authorized>
          <button class="transparent circle large">
            <img class="responsive avatar" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
            <menu class="no-wrap">
              @foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
                <a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
                  <img class="tiny circle avatar" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address" />
                  <span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
                </a>
              }
              <a class="row" @onclick='() => AuthStateProvider.Logout()'>
                <i class="fa-solid fa-door-open"></i>
                <span>Logout</span>
              </a>
            </menu>
          </button>
          <div>
            Hey, @State.Name. <br />
            <a class="address" href="/person/@State.SelectedAddressName"><i class="fa-solid fa-fw fa-at tiny"></i>@State.SelectedAddressName</a>
          </div>
        </Authorized>
        <NotAuthorized>
          <button class="transparent square large">
            <img class="responsive" src="/img/prami-neighbourhood.svg">
            <menu class="no-wrap">
              <a class="row" href="/login">
                <i class="fa-solid fa-door-closed"></i>
                <span>Login</span>
              </a>
            </menu>
          </button>
          <div>
            Hey there. <br />
            <a href="/login">Login?</a>
          </div>
        </NotAuthorized>
      </AuthorizeView>
    </nav>
  </header>
  <NavLink class="row nav-link" href="/statuslog/latest">
    <i class="fa-solid fa-message-smile"></i>
    <div>Status.lol</div>
  </NavLink>
  <NavLink class="row nav-link" href="/pics">
    <i class="fa-solid fa-images"></i>
    <div>Some.pics</div>
	</NavLink>
	<NavLink class="row nav-link" href="/ephemeral">
    <i class="fa-light fa-comment-dots"></i>
    <div>Eph.emer.al</div>
	</NavLink>
  <NavLink class="row nav-link" href="/now">
    <i class="fa-duotone fa-seedling"></i>
    <div>Now.garden</div>
	</NavLink>
</nav>

<nav class="left m">
  <header>
    <AuthorizeView>
      <Authorized>
        <button class="transparent circle">
          <img class="responsive" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
          <menu class="no-wrap">
            <a class="row">
              <img class="tiny" data-emoji="👋">
              <span>Hey, @State.Name.</span>
            </a>
            @foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
              <a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
                <img class="tiny circle" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address">
                <span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
              </a>
            }
            <a class="row" @onclick='() => AuthStateProvider.Logout()'>
              <i class="fa-solid fa-door-open"></i>
              <span>Logout</span>
            </a>
          </menu>
        </button>
      </Authorized>
      <NotAuthorized>
        <button class="transparent square">
          <img class="responsive" src="/img/prami-neighbourhood.svg">
          <menu class="no-wrap">
            <a class="row">
              <i class="medium" data-emoji="👋"></i>
              <span>Hey there.</span>
            </a>
            <a class="row" href="/login">
              <i class="fa-solid fa-door-closed"></i>
              <span>Login</span>
            </a>
          </menu>
        </button>
      </NotAuthorized>
    </AuthorizeView>
  </header>
  <NavLink class="nav-link" href="/statuslog/latest">
    <i class="fa-solid fa-message-smile"></i>
    <small>Status.lol</small>
  </NavLink>
  <NavLink class="nav-link" href="/pics">
    <i class="fa-solid fa-image"></i>
    <small>Some.pics</small>
  </NavLink>
  <NavLink class="nav-link" href="/ephemeral">
    <i class="fa-light fa-comment-dots"></i>
    <small>Eph.emer.al</small>
  </NavLink>
  <NavLink class="nav-link" href="/now">
    <i class="fa-duotone fa-seedling"></i>
    <small>Now.garden</small>
	</NavLink>
</nav>

<nav class="bottom s">
  <NavLink class="nav-link" href="/statuslog/latest">
    <i class="fa-solid fa-message-smile"></i>
    <small>Status.lol</small>
  </NavLink>
  <NavLink class="nav-link" href="/pics">
    <i class="fa-solid fa-image"></i>
    <small>Some.pics</small>
  </NavLink>
  <NavLink class="nav-link" href="/ephemeral">
    <i class="fa-light fa-comment-dots"></i>
    <small>Eph.emer.al</small>
  </NavLink>
  <NavLink class="nav-link" href="/now">
    <i class="fa-duotone fa-seedling"></i>
    <small>Now.garden</small>
	</NavLink>

  <AuthorizeView>
    <Authorized>
      <NavLink>
        <button class="transparent circle small">
          <img class="responsive" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
          <menu>
            <a class="row">
              <img class="tiny" data-emoji="👋">
              <span>Hey, @State.Name.</span>
            </a>
            @foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
              <a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
                <img class="tiny circle" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address">
                <span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
              </a>
            }
            <a class="row" @onclick='() => AuthStateProvider.Logout()'>
              <i class="fa-solid fa-door-open"></i>
              <span>Logout</span>
            </a>
          </menu>
        </button>
        <small class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@State.SelectedAddressName</small>
      </NavLink>
    </Authorized>
    <NotAuthorized>
      <button class="transparent square">
        <img class="responsive" src="/img/prami-neighbourhood.svg">
        <menu>
          <a class="row">
            <i class="medium" data-emoji="👋"></i>
            <span>Hey there.</span>
          </a>
          <a class="row" href="/login">
            <i class="fa-solid fa-door-closed"></i>
            <span>Login</span>
          </a>
        </menu>
      </button>
    </NotAuthorized>
  </AuthorizeView>
</nav>

@code {
  public void changeAddress(AddressResponseData address) {
    State.SelectedAddress = address;
  }
}