<simple-notifications [options]="notificationOptions"></simple-notifications>
<router-outlet name="menu"></router-outlet>
<div id="page">
  <div class="w3-bar">
    <breadcrumb prefix="Home" [useBootstrap]="false" class="breadcrumb w3-bar-item"></breadcrumb>
    <div class="w3-bar-item w3-right w3-tiny theme-l1"><span *ngIf="dataService.Servers?.User?.SteamId">Logged in as {{dataService.Servers.User.Name}} | <a [href]="getLogoutUrl()">Logout</a> | </span><span *ngIf="!dataService.Servers?.User?.SteamId"><a href="#" (click)="openLogin($event)">Login</a> | </span><span *ngIf="this.dataService.hasFeatureAccess('pages', 'admin-server')"><a href="#" (click)="openAdminOptions($event)">Admin Options</a> | </span>Theme: <a href="#" (click)="setTheme('light')">Light</a> | <a href="#" (click)="setTheme('dark')">Dark</a></div>
  </div>
  <router-outlet></router-outlet>
</div>
<div id="modal_login" class="w3-modal" [style.display]="showLogin ? 'block' : 'none'">
  <div class="w3-modal-content w3-card-4 w3-animate-zoom" (clickOutside)="closeLogin($event)" style="font-size: 0;">
    <header class="w3-container theme-d1"> 
      <span (click)="showLogin = false" class="w3-button theme-d1 w3-xlarge w3-display-topright">&times;</span>
      <h2>Log In</h2>
    </header>
    <form class="w3-container theme-l2 w3-medium" method="post" [action]="getLoginUrl()" ngNoForm>
      <div class="w3-section">
        <p>To give you access to personal information, first, we must verify your identity.</p>
        <p>Please authenticate with our app through Steam by clicking on the button below.</p>
        <input name="returnUrl" type="hidden" [value]="currentUrl" />
        <button type="submit" class="w3-button w3-block theme-d1 w3-section w3-padding" name="provider" title="Log in using your Steam account">Go to Steam</button>
      </div>
    </form>
  </div>
</div>
<div id="modal_admin" class="w3-modal" [style.display]="showAdmin ? 'block' : 'none'">
  <div class="w3-modal-content w3-card-4 w3-animate-zoom" (clickOutside)="showAdmin = false" style="font-size: 0;">
    <header class="w3-container theme-d1"> 
      <span (click)="showAdmin = false" class="w3-button theme-d1 w3-xlarge w3-display-topright">&times;</span>
      <h2>Admin Options</h2>
    </header>
    <div class="w3-container w3-medium theme-l2">
      <div class="w3-section">
        These setting are configured in the application configuration editor/config.json but can be generated and previewed here.
      </div>
    </div>
    <div class="w3-container w3-medium theme-l2">
      <div class="w3-section"><button class="w3-button theme-d1" style="width: 100%;" (click)="openCustomTheme($event, customTheme)">Create Custom Theme</button></div>
      <div class="w3-section">
        <button class="w3-button theme-d1" style="width: 100%;" (click)="previewOverrideMenuOption = !previewOverrideMenuOption"><i [ngClass]="{'w3-hide': !previewOverrideMenuOption}" class="material-icons" style="margin: -5px 5px -5px -5px; vertical-align: middle;">check</i>{{(previewOverrideMenuOption ? previewMenuName + " Preview Enabled" : "Preview " + previewMenuName )}}</button>
      </div>
    </div>
  </div>
</div>
<custom-theme #customTheme></custom-theme>