{% load static %}

<header id="app-header" data-component="header">
  <div class="h-10 border-b w-full flex items-center text-sm flex-none"
       data-component="toolbar">
    <div class="toolbar-sections flex items-stretch w-full h-10 bg-blue-600 text-white">
      <div class="min-w-0 px-4"><a href="{% url 'django_lookbook:index' %}" class="flex items-center space-x-3">
        <svg width="0.925rem" viewBox="0 0 18 22" xmlns="http://www.w3.org/2000/svg">
          <g stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"
             stroke-linejoin="round">
            <path d="M3.5 1H17v20H3.5A2.5 2.5 0 0 1 1 18.5v-15A2.5 2.5 0 0 1 3.5 1Z"></path>
            <path d="M1.153 19.36c0-.737.261-1.188.596-1.57.417-.475.985-.79 1.751-.79H17M6.801 5.1v7.554L6.8 12.7h5.57"></path>
          </g>
        </svg>
        <span class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
          Django Lookbook
        </span>
      </a>
      </div>

      <div class="min-w-0 ml-auto flex items-center -mt-px">
        <div class="flex items-center pl-2 pr-2">
          <a href="https://github.com/rails-inspire-django/django-lookbook"
             target="_blank"
             class="ml-auto opacity-100" title="Github"
          >
            <i style="height: 1.5rem; width: 1.5rem; " class="icon-stroke-2" data-component="icon">
              <svg>
                <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#github"></use>
              </svg>
            </i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>