{% extends "base.html" %}
{% block content %}
<!-- Page Content -->
<div class="container">
  <div class="row">
    <!-- Post Content Column -->
    <div class="col-lg-9">
      <!-- Title -->
      <h1 class="mt-4" style="margin-bottom: 0rem;">
        IRC!Radio ala Scoob!
      </h1>
      <h5 class="mt-4" style="margin-bottom: 1rem;">
	Thanks, dsc_!
      </h5>
      <p>Enjoy the music :)</p>

      <hr>

      <audio controls src="/{{ settings.icecast2_mount }}">Your browser does not support the<code>audio</code> element.</audio>
      <p> </p>

      <h3>Now playing: </h3>
      <div id="now_playing" style="padding-top:6px; margin-bottom: 1.75rem;"></div>

      <h5>Previous: </h5>
      <div id="prev_one" style="font-size:12px;">Nothing here yet</div>
      <div id="prev_two" style="font-size:12px;"></div>

      <hr>

      <h4>Command list:</h4>
      <pre style="font-size:12px;">!np         - current song
!tune       - upvote song
!boo        - downvote song
!request    - search and queue a song by title or YouTube id
!dj+        - add a YouTube ID to the radiostream
!dj-        - remove a YouTube ID
!ban+       - ban a YouTube ID and/or nickname
!ban-       - unban a YouTube ID and/or nickname
!skip       - skips current song
!listeners  - show current amount of listeners
!queue      - show queued up music
!queue_user - queue a random song by user
!search     - search for a title
!stats      - stats
      </pre>

      <hr>

      <div class="row">
        <div class="col-md-3">
          <h4>History</h4>
          <a href="/history.txt" target="_blank">View in new tab</a>
        </div>

        <div class="col-md-5">
		
          <h4>View User Library
            <small style="font-size:12px"></small>
          </h4>
          <form target="_blank" method="GET" action="/library">
            <div class="input-group mb-3 style=no-gutters">
              <input type="text" class="form-control" id="name" name="name" placeholder="username...">
              <div class="input-group-append">
                <input class="btn btn-outline-secondary" type="submit" value="Search">
              </div>
            </div>
          </form>
        </div>
     </div>

      <hr>

      <div class="row">
        <div class="col-md-8">
	  <h4>Quick Search
            <small style="font-size:12px">(general)</small>
          </h4>
             <div class="input-group mb-3">   
	       <input type="text" class="form-control" id="general" name="general" placeholder="query...">
             </div>
	</div>
	  <div class="col-md-12">
	    <table class="table table-sm table-hover table-bordered" id="table" style="font-size:12px">
              <thead>
                <tbody style="">
                </tbody>
	      </thead>
            </table>
          </div>
      </div>

      <hr>

      <h4>IRC</h4>
      <pre>{{ settings.irc_host }}:{{ settings.irc_port }}
{{ settings.irc_channels | join(" ") }}
      </pre>
    </div>
  </div>
</div>

<script src="static/search.js"></script>

{% endblock %}