@extends('layouts.app')

@section('tab-bar')
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
        @foreach (AuthServiceProvider::$viewMenu as $viewType => $viewTypeVal)
            @can($viewType)
                @if (!is_array($viewTypeVal))
                    <a href="{{ $viewType }}"
                        class="mdl-layout__tab {{ $selectedView == $viewType ? 'is-active' : '' }}">@lang('general.' . $viewType)</a>
                @else
                    <div id="top-menu-{{ $viewType }}" class="expandSlideMenu">
                        <a href="#"
                            class="mdl-layout__tab {{ $selectedView == $viewType ? 'is-active' : '' }}">@lang('general.' . $viewType)</a>
                    </div>
                @endif
            @endcan
        @endforeach
    </div>
    @foreach (AuthServiceProvider::$viewMenu as $viewType => $viewTypeVal)
        @can($viewType)
            @if (is_array($viewTypeVal))
                <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect mdl-color--indigo-200"
                    for="top-menu-{{ $viewType }}">
                    @foreach ($viewTypeVal as $viewTypeSubmenu)
                        @can($viewTypeSubmenu)
                            <a href="{{ $viewTypeSubmenu }}">
                                <li class="mdl-menu__item mdl-typography--text-uppercase">@lang('general.' . $viewTypeSubmenu)</li>
                            </a>
                        @endcan
                    @endforeach
                </ul>
            @endif
        @endcan
    @endforeach
@endsection

@section('headers')
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@endsection

@section('content')
    <main class="mdl-layout__content" style="overflow-x: visible;">
        @include($selectedView)
    </main>

    <style>
        .logged-as {
            margin-right: 0.5em;
        }

        @media screen and (max-width: 768px) {
            .mdl-layout__header-row {
                padding: 0 16px !important;
            }

            .logged-as {
                display: none;
            }

            .backButton {
                margin-right: 0.3em;
                font-size: 1.8em;
            }

            .title-container {
                font-size: 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                max-width: 35%;
            }

            .mdl-layout__tab-bar-button {
                width: 30px;
            }

            .mdl-layout__tab-bar {
                width: calc(100% - 30px);
                padding: 0 0 0 25px;
            }

            .mdl-card {
                min-height: 30px;
            }
        }
    </style>
@endsection