<nav class="flex items-center justify-between flex-wrap bg-grey-dark p-6 w-full z-10 bg-gray-800">
  <div class="flex items-center flex-no-shrink text-white mr-6">
    <a class="text-white no-underline hover:text-white hover:no-underline" href="/">
      <span class="text-2xl pl-2"><i class="em em-grinning"></i> <%= I18n.t! "en", "site.title" %></span>
    </a>
  </div>

  <div class="block lg:hidden">
    <button id="nav-toggle" class="flex items-center px-4 py-2 border rounded text-white border-grey-dark hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
    </button>
  </div>

  <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block pt-6 lg:pt-0" id="nav-content">
    <ul class="list-reset lg:flex justify-end flex-1 items-center">
      <%= if has_role?(@conn, :admin) do %>
        <li class="mr-3">
          <a class="inline-block py-2 px-4 text-white no-underline" href="/admin">Admin</a>
        </li>
      <% end %>
      <%= if Pow.Plug.current_user(@conn) do %>
        <li class="mr-3">
          <%= link "Sign Out", to: Routes.pow_session_path(@conn, :delete), method: :delete, class: "inline-block text-white  no-underline hover:text-white hover:text-underline py-2 px-4" %>
        </li>
      <% else %>
      <% end %>
    </ul>
  </div>
</nav>