<!DOCTYPE html>
<html lang="en">
<head>
  <title>Good Music - Good Feeling</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{{ static_root }}/css/bootstrap.min.css">
  <script>
    window.deezer_downloader_api_root = '{{ api_root }}';
  </script>
  <script src="{{ static_root }}/js/jquery.min.js"></script>
  <script src="{{ static_root }}/js/popper.min.js"></script>
  <script src="{{ static_root }}/js/bootstrap.min.js"></script>
  <script>
      var show_mpd_features = {{ use_mpd }};
  </script>
  <script src="{{ static_root }}/js/custom.js"></script>
  <script src="{{ static_root }}/js/jquery.jgrowl.min.js"></script>
  <link rel="stylesheet" href="{{ static_root }}/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="{{ static_root }}/css/jquery.jgrowl.min.css" />
  <link rel="stylesheet" type="text/css" href="{{ static_root }}/css/custom.css" />

<style>
    .footer {
      position: fixed;
      bottom: 0;
      width: 80%;
      left: 10%;
      height: 40px;
      background-color: #f5f5f5;
      text-align: center;
    }
</style>

</head>
<body id="body" >

<div class="container">
  
  <br>

  <div class="row">

   <ul id="navigation" class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="nav-songs-albums" data-toggle="tab" href="#songs_albums">Songs/Albums (1)</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav-youtubedl" data-toggle="tab" href="#youtubedl">Audio/Video downloader (2)</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav-spotify-playlists" data-toggle="tab" href="#spotify-playlists">Spotify Playlists (3)</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav-deezer" data-toggle="tab" href="#deezer">Deezer (4)</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav-task-queue" data-toggle="tab" href="#queue">Queue (5)</a>
    </li>
  </ul>
  </div>   <!-- end row -->

  <!-- Tab panes -->
  <div class="tab-content">
    
     <div id="songs_albums" class="container tab-pane active">
         <br>
         <audio src="" controls style="float:right" id="audio_tag"></audio>
         <h3>Download songs and albums</h3>

        <div class="input-group">
            <div class="search-container col-md-6 col-lg-5 col-xs-12">
                <input type="text" class="search" id="songs-albums-query" placeholder="Search for ..." >
                <button type="button" class="search" onclick="$('#songs-albums-query').val('')" class="search">
                    <i class="fa fa-times"></i>
                </button>
                <button type="button" class="search" id="search_deezer">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>

        <div class="tabs-category">
            <button id="deezer-search-track" class="btn-category active" href="#">Tracks</button>
            <button id="deezer-search-album" class="btn-category" href="#">Albums</button>
            <button id="deezer-search-artist" class="btn-category" href="#">Artists</button>
        </div>
        
         <table id="results" class="table">
            <thead>
                <tr>
                    <th id="col-cover" style="width: 56px"></th>
                    <th id="col-artist">Artist</th>
                    <th id="col-title">Title</th>
                    <th id="col-album">Album</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
         </table>
     </div> <!-- end div tab songs/albums -->
    
     <div id="youtubedl" class="container tab-pane fade">
         <br>
         <h3>Download audio files via youtube-dl</h3>
         <div class="input-group">
            <input type="text" class="form-control" id="youtubedl-query" placeholder="Download audio from YouTube, Invidious, Vimeo, Soundcloud, ... " />
        </div>
         <br>
        <span class="input-group-btn">
          <button type="button" class="btn btn-info" id="yt_download_play" title="Download & Play Audio">
              <i class="fa fa-play"></i> Download & Play
          </button>
          <button type="button" class="btn btn-info" id="yt_download" title="Download Audio">
              <i class="fa fa-download"></i> Download Audio
          </button>
          <button type="button" class="btn btn-info" onclick="$('#youtubedl-query').val('')" title="Clear">
              <i class="fa fa-times"></i> Clear
          </button>
        </span>
        <br/>
        <br/>
         <h3>Download video files via youtube-dl</h3>

        <div class="input-group">
            <input type="text" class="form-control" id="youtubedl-query-video" placeholder="Download video from YouTube, Invidious, Vimeo, Soundcloud, ... " />
        </div>
         <br>
        <span class="input-group-btn">
          <button type="button" class="btn btn-info" id="yt_download_video" title="Download Video">
              <i class="fa fa-download"></i> Download Video
          </button>
          <button type="button" class="btn btn-info" onclick="$('#youtubedl-query-video').val('')" title="Clear">
              <i class="fa fa-times"></i> Clear
          </button>
        </span>
     </div> 
     <!-- end div tab youtube-dl -->
    
     <div id="spotify-playlists" class="container tab-pane fade">
       <br>
       <h3>Download Spotify playlist</h3>
       <div class="input-group">
           <input type="text" class="form-control" id="spotify-playlist-name" placeholder="name of spotify playlist" />
           &nbsp;
           <input type="text" class="form-control" id="spotify-playlist-url" placeholder="url or id of the playlist" />
           &nbsp;
       </div>
       <br>
       <div class="input-group">
               <span class="input-group-btn">
                  <button type="button" class="btn btn-info" id="spotify_download_play" title="Download & Play">
                      <i class="fa fa-play"></i> Download & Play
                  </button>
                  <button type="button" class="btn btn-info" id="spotify_download" title="Download">
                      <i class="fa fa-download"></i> Download
                  </button>
                  <button type="button" class="btn btn-info" id="spotify_zip" title="Give me a zip">
                      <i class="fa fa-file-archive-o"></i> Give me a zip
                  </button>
                  <button type="button" class="btn btn-info" onclick="$('input[id^=\'spotify\']').val('')" title="Clear">
                      <i class="fa fa-times"></i> Clear
                  </button>
               </span>
       </div>
     </div> <!-- end div tab spotify playlists -->

     <div id="deezer" class="container tab-pane fade">
       <br>
       <h3>Download Deezer playlist</h3>
       <div class="input-group">
           <input type="text" class="form-control" id="deezer-playlist-url" placeholder="url or id of the playlist" />
           &nbsp;
       </div>
       <br>
       <div class="input-group">
               <span class="input-group-btn">
                <button type="button" class="btn btn-info" id="deezer_playlist_download_play" title="Download & Play">
                      <i class="fa fa-play"></i> Download & Play
                  </button>
                  <button type="button" class="btn btn-info" id="deezer_playlist_download" title="Download">
                      <i class="fa fa-download"></i> Download
                  </button>
                  <button type="button" class="btn btn-info" id="deezer_playlist_zip" title="Give me a zip">
                      <i class="fa fa-file-archive-o"></i> Give me a zip
                  </button>
                  <button type="button" class="btn btn-info" onclick="$('#deezer-playlist-url').val('')" title="Clear">
                      <i class="fa fa-times"></i> Clear
                  </button>
               </span>
       </div>
       
       <br>
       <h3>Download Deezer favorite songs</h3>
       <div class="input-group">
           <input type="text" class="form-control" id="deezer-favorites-userid" placeholder="user id of Deezer user"songs />
           &nbsp;
       </div>
       <br>
       <div class="input-group">
               <span class="input-group-btn">
                <button type="button" class="btn btn-info" id="deezer_favorites_download_play" title="Download & Play">
                      <i class="fa fa-play"></i> Download & Play
                  </button>
                  <button type="button" class="btn btn-info" id="deezer_favorites_download" title="Download">
                      <i class="fa fa-download"></i> Download
                  </button>
                  <button type="button" class="btn btn-info" id="deezer_favorites_zip" title="Give me a zip">
                      <i class="fa fa-file-archive-o"></i> Give me a zip
                  </button>
                  <button type="button" class="btn btn-info" onclick="$('#deezer-favorites-userid').val('')" title="Clear">
                      <i class="fa fa-times"></i> Clear
                  </button>
               </span>
       </div>
     
     </div> <!-- end div tab deezer playlists -->

    <div id="queue" class="container tab-pane fade">
      <br>
      <h3>Queue</h3>
       
      <table id="task-list" class="table">
        <thead>
            <tr>
                <th>Description</th>
                <th>Args</th>
                <th>State</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
     </table>
    </div> <!-- end div tab queue -->
     

    <footer class="footer">
      <div class="container">
		<span class="text-muted">
			ctrl+m: focus search bar |
			Enter: search songs |
			Ctrl+Shift+[1-7]: navigation | 
        </span>
      </div>
    </footer>


<style>
html, body, .container, .tab-content, .tab-pane .form-group {
  height: 95%;
}
textarea.form-control {
  height: 95%;
}

#werbung:link, #werbung:visited, #werbung:hover, #werbung:active { color: red }

</style>
	

</div> <!-- end div container -->

</body>
</html>

