<template name="admin">
    {{> alerts}}
    <div class="landing">
        {{> header}}
          <div class="row" style="margin-top: 20px; height: 100%;">
            <div class="col-md-5 col-md-offset-1 admin-container" style="height: 50%;">
              <h1>Playlists</h1>
              {{#each playlists}}
                <p>{{display}} playlist</p>
                <table class="table" style="border-bottom: 1px solid white;">
                  <tr>
                    <th>Songs</th>
                    <th>Users</th>
                    <th>Admins</th>
                    <th>Reports</th>
                    <th>Queue</th>
                  </tr>
                  <tr>
                    <td>{{songs.length}}</td>
                    <td></td>
                    <td></td>
                    <td>{{reports}}</td>
                    <td>{{queueCount @index}}</td>
                    <td><a href="/stations">Edit</a></td>
                  </tr>
                </table>
              {{/each}}
            </div>
            <div class="col-md-4 col-md-offset-1 admin-container" style="height: 30%;">
              <h1>Site statistics</h1>
              <p>Total Users: {{{users}}}</p>
            </div>
            <div style="clear: both;"></div>
                <div class="col-md-5 col-md-offset-1 admin-container" style="height: 50%;">
                    <h1>Reports</h1>
                </div>
                <div class="col-md-4 col-md-offset-1 admin-container" style="height: 50%">
                    <h1>Reports</h1>
                </div>
          </div>

          <ul class="bg-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
    </div>
</template>
