<template name="admin">
    {{> alerts}}
    <div class="landing">
        {{> header}}
          <div class="row" style="margin-top: 20px; height: 100%;">
            <div class="col-md-6 col-md-offset-1 admin-container" style="height: 80%;">
              <div>
                <h1>Stations</h1><a href="#" data-toggle="modal" data-target="#addStation">(+)</a>
              </div>
              {{#each playlists}}
                <p>{{display}}</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>{{roomUserNum}}</td>
                    <td></td>
                    <td>{{reportsCount display}}</td>
                    <td>{{queueCount display}}</td>
                    <td><a href="/admin/stations" id={{display}}>Edit</a></td>
                  </tr>
                </table>
              {{/each}}
              <button class="btn btn-danger col-md-6 col-md-offset-3" id="rrating" data-toggle="modal" data-target="#confirmModal">Reset All Ratings</button>
            </div>
            <div class="col-md-3 col-md-offset-1 admin-container" style="height: 80%;">
              <div>
                <h1>Site statistics</h1>
              </div>
              <p>Total Users Online: {{usersOnline}}</p>
              <p>Total Registered Users: {{allUsers}}</p>
              <a href="/admin/queues">Edit the queues</a>
            </div>
          </div>
          <div id="addStation" class="modal fade" role="dialog">
              <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                      <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Create new station</h4>
                      </div>
                      <div class="modal-body">
                        <div id="croom_container">
                          <label for="croom_display" class="croom_label">Room Display Name (eg 'Edm'):</label>
                          <div class="input-group">
                            <input type="text" class="croom" id="croom_display" name="croom" required />
                          </div>
                          <label for="croom_tag" class="croom_label">Room Tag Name (eg 'edm'):</label>
                          <div class="input-group">
                            <input type="text" class="croom" id="croom_tag" name="croom" required />
                          </div>
                          <input type="checkbox" name="two" id="two"/>
                          <label id="two-label" for="two">Make Room Private?</label>
                          <button class="btn btn-warning btn-block" id="croom_create">Create</button>
                        </div>
                      </div>
                      <div class="modal-footer">
                          <button id="close-modal-a" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                  </div>

              </div>
          </div>
    </div>

    <div id="confirmModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Confirm Reset</h4>
                </div>
                <div class="modal-body">
                    <h3 style="margin-top: 0">Are you sure you want to reset all likes and dislikes?</h3>
                    <button id="rreset_confirm" class="btn btn-danger">Reset All Ratings</button>
                </div>
                <div class="modal-footer">
                    <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</template>
