<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   *, *::before, *::after {
  margin: 0; padding: 0;
}
html {
  font-family: "Source Code Pro", Monospace;
  font-size: 62.5%;
  line-height: 1.1;
}
body {
  color: hsl(0, 0%, 85%);
  margin: 0;
  background-color: hsl(220, 25%, 10%);
  font-size: 1.4rem;
}
input {
  background-color: hsl(0, 0%, 85%);
  border: 0;
  color: hsl(0, 0%, 15%);
  padding-left: 5px;
  width: 90px;
  height: 20px;
  outline: 0;
}
select {
  background-color: hsl(0, 0%, 85%);
  border: 0;
  color: hsl(0, 0%, 15%);
  margin-top: 3px;
  width: 60px;
  height: 20px;
  outline: 0;
}
h1 {
  text-align: center;
}
p {
  font-size: 2rem;
}
footer {
  background-color: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.05);
  border-right: 0;
  position: fixed;
  bottom: 10%;
  right: 0;
  padding-top: 4px;
  margin: 0 auto;
  width: 64px;
  z-index: 200;
}
.realms {
  background-color: hsla(0, 0%, 50%, 0.025);
  text-align: left;
  width: 300px;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  left: 10px;
  bottom: 0;
}
.realmsfilter {
  background-color: hsla(0, 50%, 50%, 0.5);
  position: fixed;
  font-size: 1.3rem;
  top: 0;
  left: 10px;
  width: 300px;
  height: 26px;
  text-align: center;
  z-index: 10;
}
.realmlist {
  background-color: hsla(0, 0%, 100%, 0);
  position: fixed;
  top: 26px;
  bottom: 0;
  text-align: left;
  width: 300px;
  height: auto;
  overflow-y: scroll;
  overflow-x: hidden;
}
.realmdetail {
  position: fixed; 
  background-color: hsla(220, 25%, 25%, 0.10);
  font-size: 1.5rem;
	padding: 0 10px;
  left: 320px;
  top: 25px;
  right: 10px;
  bottom: 25px;
}
.rname {
  float: left;
  font-size: 1.4rem;
}
.rsection {
  padding: 4px;
  text-align: right;
}
.rsection:hover {
  background-color: hsla(130, 50%, 50%, 0.50);
  cursor: pointer;
	}
.rsection:active {
  background-color: hsla(130, 50%, 50%, 0.25);
}
table {
  margin: 0 auto;
  width: 400px;
  border-collapse: collapse;
}
table > caption {
  font-size: 2.4rem;
  line-height: 4rem;
  color: hsl(60, 50%, 50%);
  border-bottom: 1px solid hsla(0, 0%, 50%, 0.5);
}
.realmdetail td:first-child {
  color: hsl(0, 50%, 50%);
  text-align: right;
  width: 120px;
  padding-right: 4px;
}
.realmdetail td {
  padding-left: 4px;
  text-align: left;
}
.firstcol {
  border-right: 1px solid hsla(0, 0%, 50%, 0.5);
}
.pvpzone {
  font-size: 1.5rem;
  line-height: 2rem;
  color: hsl(120, 50%, 50%);
  border: 0;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background-color: hsla(0, 0%, 0%, 0.0);
}
::-webkit-scrollbar-track:active {
  background-color: hsla(0, 0%, 25%, 0.5);
}
::-webkit-scrollbar-thumb {
  background-color: hsla(0, 0%, 50%, 0.5);
}
::-webkit-scrollbar-thumb:hover {
  background-color: hsla(0, 0%, 75%, 0.5);
}
::-webkit-scrollbar-thumb:active {
  background-color: hsla(0, 0%, 100%, 0.5);
}
.selected {
  background-color: hsl(210, 25%, 25%);
}
  </style>
 </head>
 <body translate="no">
  <body ng-app="wowApp">
   <div class="realms" ng-controller="RealmsCtrl">
    <div class="realmsfilter">
     <label>
      Region:
      <select ng-change="getRealmList()" ng-model="selectedRegion" ng-options="i.region for i in regions">
      </select>
     </label>
     <label>
      Filter:
      <input ng-model="searchText"/>
     </label>
    </div>
    <div class="realmlist">
     <div class="rsection" ng-class="{selected: realm==selectedRealm}" ng-click="showRealmDetails(realm)" ng-repeat="realm in realms | filter:searchText">
      <span class="rname">
       {{realm.name}}
      </span>
      <span ng-switch="" on="realm.status">
       <span ng-switch-when="true">
        online
       </span>
       <span ng-switch-when="false">
        offline
       </span>
      </span>
     </div>
    </div>
    <div class="realmdetail" ng-show="selectedRealm">
     <h1>
      World of Warcraft
      <br/>
      realm status
     </h1>
     <p>
      A quick and dirty example of using AngularJS to query World of Warcraft realm statuses using Blizzard's Community Platform API.
     </p>
     <p>
      You can filter on any of the data you see below. e.g. Filter for bloodlust to only show the realms that belong to the Bloodlust battlegroup.
     </p>
     <table>
      <caption>
       {{selectedRealm.name}}
      </caption>
      <col class="firstcol"/>
      <tr>
       <td>
        Online
       </td>
       <td>
        {{selectedRealm.status}}
       </td>
      </tr>
      <tr>
       <td>
        Population
       </td>
       <td>
        {{selectedRealm.population}}
       </td>
      </tr>
      <tr>
       <td>
        Queue
       </td>
       <td>
        {{selectedRealm.queue}}
       </td>
      </tr>
      <tr>
       <td>
        Type
       </td>
       <td>
        {{selectedRealm.type | uppercase}}
       </td>
      </tr>
      <tr>
       <td>
        Battlegroup
       </td>
       <td>
        {{selectedRealm.battlegroup}}
       </td>
      </tr>
      <tr>
       <td>
        Slug
       </td>
       <td>
        {{selectedRealm.slug}}
       </td>
      </tr>
      <tr>
       <td>
        Locale
       </td>
       <td>
        {{selectedRealm.locale}}
       </td>
      </tr>
      <tr>
       <td>
        Timezone
       </td>
       <td>
        {{selectedRealm.timezone}}
       </td>
      </tr>
     </table>
     <table>
      <caption class="pvpzone">
       Wintergrasp
      </caption>
      <col class="firstcol"/>
      <tr>
       <td>
        Next Battle
       </td>
       <td>
        {{selectedRealm.wintergrasp.next | date:'yyyy-MM-dd HH:mm:ss Z'}}
       </td>
      </tr>
      <tr ng-switch="" on="selectedRealm.wintergrasp['controlling-faction']">
       <td>
        Faction
       </td>
       <td ng-switch-when="0">
        Alliance
       </td>
       <td ng-switch-when="1">
        Horde
       </td>
      </tr>
      <tr ng-switch="" on="selectedRealm.wintergrasp.status">
       <td>
        Status
       </td>
       <td ng-switch-when="-1">
        Unknown
       </td>
       <td ng-switch-when="0">
        Idle
       </td>
       <td ng-switch-when="1">
        Populating
       </td>
       <td ng-switch-when="2">
        Active
       </td>
       <td ng-switch-when="3">
        Concluded
       </td>
      </tr>
     </table>
     <table>
      <caption class="pvpzone">
       Tol-Barad
      </caption>
      <col class="firstcol"/>
      <tr>
       <td>
        Next Battle
       </td>
       <td>
        {{selectedRealm['tol-barad'].next | date:'yyyy-MM-dd HH:mm:ss Z'}}
       </td>
      </tr>
      <tr ng-switch="" on="selectedRealm['tol-barad']['controlling-faction']">
       <td>
        Faction
       </td>
       <td ng-switch-when="0">
        Alliance
       </td>
       <td ng-switch-when="1">
        Horde
       </td>
      </tr>
      <tr ng-switch="" on="selectedRealm['tol-barad'].status">
       <td>
        Status
       </td>
       <td ng-switch-when="-1">
        Unknown
       </td>
       <td ng-switch-when="0">
        Idle
       </td>
       <td ng-switch-when="1">
        Populating
       </td>
       <td ng-switch-when="2">
        Active
       </td>
       <td ng-switch-when="3">
        Concluded
       </td>
      </tr>
     </table>
    </div>
   </div>
   <footer>
    <img alt="" src="data:image/x-png;base64, "/>
   </footer>
  </body>
 </body>
</html>
