<nav class="navbar navbar-dark bg-inverse" [class.darwin]="platform == 'darwin'">
    <a class="navbar-brand" href="#">MyCard</a>
    <ul class="nav navbar-nav">
        <!--
        <li [ngClass]="{active: routingService.component == 'store'}" class="nav-item">
            <a (click)="changeFouce('store')" class="nav-link" href="#">商店</a>
        </li>
        -->
        <li [ngClass]="{active: routingService.component == 'lobby'}" class="nav-item">
            <a (click)="changeFouce('lobby')" class="nav-link" href="#">{{'library'| translate}}<span class="sr-only">(current)</span></a>
        </li>
        <li [ngClass]="{active: routingService.component == 'community'}" class="nav-item">
            <a (click)="changeFouce('community')" class="nav-link" href="#">{{'community'| translate}}</a>
        </li>
    </ul>
    <div class="navbar-right">
        <div id="user">
            <a href="#forum" class="require-login profile">
                <img id="avatar" src="https://ygobbs.com/letter_avatar_proxy/v2/letter/a/e47774/36.png" alt="image">
            </a>
            <a href="#forum" class="require-login profile item" id="username"></a>
            <a (click)="changeFouce('login');" href="#ygopro" id="logout" class="require-login item">切换账号</a>
            <a (click)="refresh()" href="#ygopro" id="refresh" class="item">刷新</a>
        </div>
        <div id="window-buttons" [class.darwin]="platform == 'darwin'">
            <i id="minimize" class="fa fa-minus" aria-hidden="true"></i>
            <i id="maximize" class="fa fa-expand" aria-hidden="true"></i>
            <i id="restore" class="fa fa-clone" hidden aria-hidden="true"></i>
            <i id="close" class="fa fa-times" aria-hidden="true"></i>
        </div>
    </div>
</nav>

<login class="page" [ngClass]="{hide: routingService.component != 'login'}"></login>
<store class="page" [ngClass]="{hide: routingService.component != 'store'}"></store>
<lobby class="page" [ngClass]="{hide: routingService.component != 'lobby'}"></lobby>
<webview id="community" class="page" [ngClass]="{hide: routingService.component != 'community'}"
         src="https://ygobbs.com"></webview>