<!doctype html>
<html lang="en">
<head>
%= include 'includes/head'
</head>
<body>
<nav class="navbar navbar--simple __js-root">
<ui-app inline-template>
<ui-navbar inline-template>
<div>
<div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
<div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
<a href="/"><img src="<%= config->{styleguide} %>/images/logo-round-white.svg" class="w-8" /></a>
<span class="pl-4 font-bold text-xl lg:pr-8"><a href="/"><%= config->{name} %> - <%= config->{description} %></a></span>
</div>
<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
<a href="#" @click="show = !show" class="no-underline hover:no-underline">
<i class="ico--menu text-3xl"></i>
</a>
</div>
<div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
<div class="flex-grow"></div>
% if (current_user) {
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-4">
<span class="head-heavy-2xs"><%= current_user->{displayname} %></span>
<div class="avatar avatar--2xs">
<img src="<%= config->{piratar}%>64/<%= current_user->{username} %>.jpg" alt="<%= current_user->{displayname} %>" />
</div>
<a href="/logout"><button class="text-grey-200 hover:text-white"><i class="ico--log-out"></i></button></a>
</div>
</div>
% }
</div>
</div>
</div>
</ui-navbar>
</ui-app>
</nav>
<div class="container container--default py-8">
<section>
<main>
<%= content %>
</main>
</section>
</div>
% if ( $c->stash->{meet} ) {
<script src="/video.min.js"></script>
% }
</body>
</html>