<div class="navbar is-light is-fixed-top">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item has-text-weight-bold" href="/">
                <svg xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px; margin-right: .5rem;" viewBox="0 0 24 24">
                    <path fill="#8D5699" d="M11.5,1L2,6V8H21V6" />
                    <path fill="#75C5BA" d="M4,10V17H7V10H4M10,10V17H13V10M16,10V17H19V10" />
                    <path fill="#8D5699" d="M2,22H21V19H2" />
                </svg>
                Banq
                <span style="margin-left: 2px; font-size: 10px; font-variant-position: super;">ALPHA</span>
            </a>
            <a id="navbar-burger" class="navbar-burger burger"><span></span><span></span><span></span></a>
        </div>
        <div id="navbar-menu" class="navbar-menu">
            @if (Auth::check()):
                <div class="navbar-start">
                    @$accounts = Accounts::select([ 'user_id' => Auth::id() ])->fetchAll()
                    @if (count($accounts) > 0):
                        <div class="navbar-item has-dropdown is-hoverable">
                            <a class="navbar-link is-arrowless" href="/accounts">Accounts</a>
                            <div class="navbar-dropdown">
                                @foreach ($accounts as $account):
                                    <a class="navbar-item" href="/accounts/{{ $account->id }}">{{ $account->name }}</a>
                                @endforeach
                            </div>
                        </div>
                    @else:
                        <a class="navbar-item" href="/accounts">Accounts</a>
                    @endif

                    @$cards = Cards::selectPageByUser(Auth::id(), 1, 5)->fetchAll()
                    @if (count($cards) > 0):
                        <div class="navbar-item has-dropdown is-hoverable">
                            <a class="navbar-link is-arrowless" href="/cards">Cards</a>
                            <div class="navbar-dropdown">
                                @foreach ($cards as $card):
                                    <a class="navbar-item" href="/cards/{{ $card->id }}">{{ $card->name }}</a>
                                @endforeach
                            </div>
                        </div>
                    @else:
                        <a class="navbar-item" href="/cards">Cards</a>
                    @endif

                    @$transactions = Transactions::selectPageByUser(Auth::id(), 1, 5)->fetchAll()
                    @if (count($transactions) > 0):
                        <div class="navbar-item has-dropdown is-hoverable">
                            <a class="navbar-link is-arrowless" href="/transactions">Transactions</a>
                            <div class="navbar-dropdown">
                                @foreach ($transactions as $transaction):
                                    <a class="navbar-item" href="/transactions/{{ $transaction->id }}">{{ $transaction->name }}</a>
                                @endforeach
                            </div>
                        </div>
                    @else:
                        <a class="navbar-item" href="/transactions">Transactions</a>
                    @endif

                    @$payment_links = PaymentLinks::selectPageByUser(Auth::id(), 1, 5)->fetchAll()
                    @if (count($payment_links) > 0):
                        <div class="navbar-item has-dropdown is-hoverable">
                            <a class="navbar-link is-arrowless" href="/payment-links">Payment Links</a>
                            <div class="navbar-dropdown">
                                @foreach ($payment_links as $payment_link):
                                    <a class="navbar-item" href="/payment-links/{{ $payment_link->id }}">{{ $payment_link->name }}</a>
                                @endforeach
                            </div>
                        </div>
                    @else:
                        <a class="navbar-item" href="/payment-links">Payment Links</a>
                    @endif

                    @if (Auth::user()->role == Users::ROLE_ADMIN):
                        <div class="navbar-item has-dropdown is-hoverable">
                            <a class="navbar-link is-arrowless" href="/admin">Admin</a>
                            <div class="navbar-dropdown">
                                <a class="navbar-item" href="/admin/devices">Devices</a>
                                <a class="navbar-item" href="/admin/users">Users</a>
                                <a class="navbar-item" href="/admin/sessions">Sessions</a>
                                <a class="navbar-item" href="/admin/accounts">Accounts</a>
                                <a class="navbar-item" href="/admin/cards">Cards</a>
                                <a class="navbar-item" href="/admin/transactions">Transactions</a>
                                <a class="navbar-item" href="/admin/payment-links">Payment Links</a>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="navbar-end">
                    <div class="navbar-item" style="display: flex; align-items: center;">
                        <img style="border-radius: 50%; margin-right: 12px;" src="https://www.gravatar.com/avatar/<?= md5(Auth::user()->email) ?>?s=48" alt="User gravater">
                        <span>{{ Auth::user()->username }}</span>
                    </div>
                    <div class="navbar-item">
                        <div class="buttons">
                            <a class="button is-link" href="/auth/settings">Settings</a>
                            <a class="button" href="/auth/logout">Logout</a>
                        </div>
                    </div>
                </div>
            @else:
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="buttons">
                            <a class="button is-link" href="/auth/login">Login</a>
                            <a class="button" href="/auth/register">Register</a>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
