
<div class="wrapper">

    <div id="main" class="container">

        <div id="offcanvasmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
            <ul class="nav navmenu-brand navmenu-tbbrand">
                <li>
                    <img data-id="userpic" src="<%= TB.GUI.getProfilePicUrl() %>" class="img-responsive img-circle img-thumbnail profile-pic-size-offcanvas"  />
                    <br />
                    <span data-id="username">&nbsp;</span>
                </li>
            </ul>
            <ul class="nav navmenu-nav">
                <li><button class="btn btn-link" title="Einstellungen" data-action="settings">Einstellungen</button></li>
                <li><button class="btn btn-link" title="Teams" data-action="profiles">Teams (<span data-id="offcanvas-num_profiles">1</span>)</button></li>
            </ul>
            <ul class="nav navmenu-nav">
                <% if ( !TB.Env.isNativeMobile() ) {    %>
                    <li><button class="btn btn-link" title="Preise" data-action="pricing">Preise</button></li>
                <% }    %>
                <li><button class="btn btn-link" title="Support" data-action="support">Support</button></li>
                <li><button class="btn btn-link" title="Hilfe" data-action="help">Hilfe</button></li>
                <li><button class="btn btn-link" title="Über" data-action="about" href="about">Über</button></li>
            </ul>
            <ul class="nav navmenu-nav">
                <li><button  class="btn btn-link" title="Logout" data-action="logout">Logout</button></li>
            </ul>
        </div>

        <nav class="navbar navbar-fixed-top">
            <div class="container" style="background-color: #fff;">
                <div class="row">
                    <div class="header_navigation">
                        <div class="pull-left">
                            <a href="#/">
                                <img src="<?= Francis_Utils_Config::get( 'url.client' ) ?>/img/tb-icon.png" style="margin: 6px 18px;"/>
                            </a>
                        </div>
                        <div class="pull-right">
                            <div href="#" id="sidenavtoggle"><span></span></div>
                        </div>
                        <div class="pull-right">
                            <div id="team-select">
                                <a href="<%= TB.Controller.getUrl( 'Profiles' ) %>"></a>
                            </div>
                        </div>
                    </div>
                    <div id="main_navigation" class="tabs tabs-style-underline">
                        <nav>
                            <ul>
                                <li>
                                    <a href="<%= TB.Controller.getUrl( 'News' ) %>"
                                       data-nav-id="news"
                                       title="News"
                                       class="icon pe-7s-chat">
                                        <span>News</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="<%= TB.Controller.getUrl( 'Appointment' ) %>"
                                       data-nav-id="appointment"
                                       title="Termine"
                                       class="icon pe-7s-date">
                                        <span>Termine</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="<%= TB.Controller.getUrl( 'Team' ) %>"
                                       data-nav-id="team"
                                       title="Team"
                                       class="icon pe-7s-users">
                                        <span>Team</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="<%= TB.Controller.getUrl( 'Player' ) %>"
                                       data-nav-id="player"
                                       title="Profil"
                                       class="icon pe-7s-id">
                                        <span>Profil</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="<%= TB.Controller.getUrl( 'Stats' ) %>"
                                       data-nav-id="stats"
                                       title="Statistik"
                                       class="icon pe-7s-graph2">
                                        <span>Statistik</span>
                                    </a>
                                </li>

                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </nav>


        <div class="row content-row">
            <div id="page-loader" style="text-align: center; padding-top: 30px;">
                <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
                </svg>
            </div>
            <div id="content" class="page">
            </div>
        </div>
    </div>

    <div id="main_auth" class="container">
    </div>

</div>


<div id="tbmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">
                    &nbsp;
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div id="modal-content" class="col-md-12">
                        &nbsp;
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="modal-btn-close"
                        type="button"
                        class="btn btn-default"
                        data-dismiss="modal">
                    &nbsp;
                </button>
                <button id="modal-btn-confirm"
                        type="button"
                        class="btn btn-primary">
                    &nbsp;
                </button>
            </div>
        </div>
    </div>
</div>