import NotificationsContainer from 'notifications-container';
---hbs---

<div>
  <nav class='bg-gray-800'>
    <div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
      <div class='flex items-center justify-between h-16'>
        <div class='flex items-center'>
          <div class='flex-shrink-0'>
            <img
              class='h-8 w-8'
              src='/assets/images/logo-250x250-transp.png'
              alt='Strider'
            />
          </div>
          <div class='hidden md:block'>
            {{#if this.currentUser.user}}
              <div class='ml-4 flex items-baseline'>
                <a
                  href='/'
                  {{!-- inactive: px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 --}}
                  {{!-- active:  px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700 --}}
                  class='ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700'
                >
                  Dashboard
                </a>

                <a
                  href='/projects'
                  class='ml-2 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700'
                >
                  Projects
                </a>

                <div class='ml-2 relative'>
                  <div>
                    <button
                      type='button'
                      class='max-w-xs px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700'
                      {{on 'click' (fn (mut this.openAdmin) (not this.openAdmin))}}
                    >
                      Admin
                    </button>
                  </div>

                  {{#if this.openAdmin}}
                    <div
                      class='origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg'
                    >
                      <div class='py-1 rounded-md bg-white shadow-xs'>
                        <a
                          href='/admin/invites'
                          class='block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100'
                        >
                          Invites
                        </a>
                        <a
                          href='/admin/users'
                          class='block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100'
                        >
                          Users
                        </a>
                        <a
                          href='/admin/projects'
                          class='block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100'
                        >
                          Projects
                        </a>
                        <a
                          href='/admin/plugins'
                          class='block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100'
                        >
                          Plugins
                        </a>
                      </div>
                    </div>
                  {{/if}}
                </div>
              </div>
            {{/if}}
          </div>
        </div>
        <div class='hidden md:block'>
          <div class='ml-4 flex items-center md:ml-6'>
            {{!-- <button
              type='button'
              class='p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700'
            >
              <svg
                class='h-6 w-6'
                stroke='currentColor'
                fill='none'
                viewBox='0 0 24 24'
              >
                <path
                  stroke-linecap='round'
                  stroke-linejoin='round'
                  stroke-width='2'
                  d='M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'
                ></path>
              </svg>
            </button> --}}
            {{#if this.currentUser.user}}
              <div class='ml-3 relative'>
                <div>
                  <button
                    type='button'
                    class='max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid'
                    {{on 'click' (fn (mut this.open) (not this.open))}}
                  >
                    <img
                      class='h-8 w-8 rounded-full'
                      src={{this.currentUser.user.gravatar}}
                      alt='avatar'
                    />
                  </button>
                </div>

                {{#if this.open}}
                  <div
                    class='origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg'
                  >
                    <div class='py-1 rounded-md bg-white shadow-xs'>
                      <a
                        href='/account'
                        class='block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100'
                      >
                        Account
                      </a>
                      <a
                        href='/logout'
                        class='block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100'
                      >
                        Sign out
                      </a>
                    </div>
                  </div>
                {{/if}}
              </div>
            {{/if}}
          </div>
        </div>
        <div class='-mr-2 flex md:hidden'>
          <button
            type='button'
            class='inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white'
            {{on 'click' (fn (mut this.open) (not this.open))}}
          >
            <svg
              class='h-6 w-6'
              stroke='currentColor'
              fill='none'
              viewBox='0 0 24 24'
            >
              <path
                class={{if this.open 'hidden' 'inline-flex'}}
                stroke-linecap='round'
                stroke-linejoin='round'
                stroke-width='2'
                d='M4 6h16M4 12h16M4 18h16'
              ></path>
              <path
                class={{if this.open 'inline-flex' 'hidden'}}
                stroke-linecap='round'
                stroke-linejoin='round'
                stroke-width='2'
                d='M6 18L18 6M6 6l12 12'
              ></path>
            </svg>
          </button>
        </div>
      </div>
    </div>

    {{#if this.currentUser.user}}
      <div class="hidden md:hidden {{if this.open 'block' 'hidden'}}">
        <div class='px-2 pt-2 pb-3 sm:px-3'>
          <a
            href='/'
            class='block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700'
          >
            Dashboard
          </a>

          <a
            href='/projects'
            class='block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700'
          >
            Projects
          </a>
        </div>
        <div class='pt-4 pb-3 border-t border-gray-700'>
          <div class='flex items-center px-5'>
            <div class='flex-shrink-0'>
              <img
                class='h-10 w-10 rounded-full'
                src={{this.currentUser.user.gravatar}}
                alt='User avatar'
              />
            </div>
            <div class='ml-3'>
              <div class='text-base font-medium leading-none text-white'>
                {{this.currentUser.user.name}}
              </div>
              <div class='mt-1 text-sm font-medium leading-none text-gray-400'>
                {{this.currentUser.user.email}}
              </div>
            </div>
          </div>
          <div class='mt-3 px-2'>
            <a
              href='/account'
              class='block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700'
            >
              Account
            </a>
            <a
              href='/logout'
              class='mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700'
            >
              Sign out
            </a>
          </div>
        </div>
      </div>
    {{/if}}
  </nav>
  {{!-- <header class='bg-white shadow'>
    <div class='max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8'>
      <h2 class='text-xl font-bold leading-tight text-gray-900'>
        Dashboard
      </h2>
    </div>
  </header> --}}
  <main class='bg-gray-100 main'>
    <div class='max-w-7xl mx-auto py-6 sm:px-6 lg:px-8'>
      {{outlet}}
      {{! <!-- Replace with your content -->
      <div class="px-4 py-6 sm:px-0">
        <div class="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
      </div>
      <!-- /End replace --> }}
    </div>
  </main>
</div>

<NotificationsContainer @placement='bottom-right' />
