<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    {csrf_meta_tag()}
    {live_title_tag assigns[:page_title] || "<%= inspect(app_module) %>", suffix: " · Phoenix Framework"}
    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
  </head>
  <body>
    <header class="bg-neutral-900">
      <section class="container mx-auto">
        <nav class="flex items-center justify-between flex-wrap p-6">
          <div class="flex items-center flex-shrink-0 text-white mr-6">
            <a href="/" class="font-semibold text-xl tracking-tight">Surface UI</a>
          </div>
          <div class="w-full block flex-grow md:flex md:items-center md:w-auto">
            <div class="text-sm md:flex-grow">
              {#if Application.spec(:surface_catalogue)}
                <a href="/catalogue" class="block mt-4 md:inline-block md:mt-0 text-teal-200 hover:text-white mr-4">
                  Catalogue
                </a>
              {/if}
              {#if function_exported?(Routes, :live_dashboard_path, 2)}
                {link "Live Dashboard", to: Routes.live_dashboard_path(@conn, :home), class: "block mt-4 md:inline-block md:mt-0 text-teal-200 hover:text-white mr-4"}
              {/if}
            </div>
            <div>
              <a href="https://surface-ui.org" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">surface-ui.org</a>
            </div>
          </div>
        </nav>
      </section>
    </header>
    {@inner_content}
  </body>
</html>
