{% extends 'base/main_base.html' %}

{% block title %}Music{% endblock %}

{% block extra_nav %}
<li class='dropdown'>
  <a class='pointer dropdown-toggle' data-toggle='dropdown'>Fetch New Music <span class="caret"></span></a>
  <ul class='dropdown-menu' role='menu'>
    <li><a class='pointer' id='soundcloud_fetch'>From SoundCloud</a></li>
    <li><a class='pointer' id='youtube_fetch'>From Youtube</a></li>
  </ul>
</li>
<li><a id='open_settings' class='pointer'><i class="fa fa-cog"></i> Settings</a></li>
{% endblock %}

{% block content %}
<div id="wrapper" class="custom_scrollbar" tabindex="0">
  <div id='sidebar'>
  </div>
  <div id='content'>
  </div>
  <div id='bottom_bar' class='disable_selection' tabindex="1">
    <div class='current_time'></div>
    <div class='duration'></div>
    <input type="text" id="scrub_bar" data-slider-value="0" data-slider-id="scrub_bar_slider" value="" data-slider-max="100" data-slider-step="0.1" data-slider-tooltip="hide" />
    <div id="current_info">&nbsp;</div>
    <div class="controls">
      <i id="repeat" class="fa fa-retweet fa-3x blue"></i>
      <span id="repeat_badge" class="badge hidden">1</span>
      <i id="prev" class="fa fa-fast-backward fa-3x"></i>
      <i id="playpause" class="fa fa-play fa-3x"></i>
      <i id="next" class="fa fa-fast-forward fa-3x"></i>
      <i id="shuffle" class="fa fa-random fa-3x"></i>
    </div>
    <div id="settings_bar">
    </div>
  </div>
</div>
<audio id='current_track'><source id="current_src" type='audio/mpeg'></audio>
<div class="options_container"></div>
<div class='hidden'>
  <div id="player"></div>
</div>
{% raw %}
<script type="text/swig" id='sidebar_template'>
  <div id="sidebar_height_wrapper">
    <div class="input-group input-group-sm">
      <span class="input-group-addon"><i class='fa fa-search'></i></span>
      <input type="text" class="form-control search-input" placeholder="Search" value="{{search}}">
    </div>
    <h3>{{title}}</h3>
    <ul class="nav disable_selection custom_scrollbar">
      {% if fixed %}<li class='dropdown-header'>Auto-Playlists</li>{% endif %}
      {% for playlist in fixed %}
        <li><a href="#playlist/{{playlist.attributes._id}}">{{playlist.attributes.title}}</a></li>
      {% endfor %}
      {% if fixed %}<li class='dropdown-header'>Playlists</li>{% endif %}
      {% for playlist in editable %}
        <li><a href="#playlist/{{playlist.attributes._id}}">{{playlist.attributes.title}}</a></li>
      {% endfor %}
    </ul>
    <div class='sidebar_controls'>
    <button class='add_playlist btn btn-default'>Add Playlist</button>
    </div>
  </div>
</script>
<script type='text/swig' id='song_template'>
  <div class='playlist_meta'>
    <h1><span id='playlist_header'>{{title}}</span>
    {% if editable %}
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
          Options <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a class='download_playlist' target='_blank' href='/downloadplaylist/{{_id}}'>Download Playlist</a></li>
          <li><a class='rename_playlist'>Rename Playlist</a></li>
          <li><a class='delete_playlist'>Delete Playlist</a></li>
        </ul>
      </div>
    {% endif %}</h1><p>{{numSongs}} Songs - {{totalDuration}}</p>
  </div>
  <table class='table song_table disable_selection'>
    <thead>
      <th class='title_th'>Title
        {% if sort_col == 'title' %}{% if sort_asc %}<i class="fa fa-chevron-up"></i>{% else %}<i class="fa fa-chevron-down"></i>{% endif %}{% endif %}
      </th>
      <th class='display_artist_th'>Artist
        {% if sort_col == 'display_artist' %}{% if sort_asc %}<i class="fa fa-chevron-up"></i>{% else %}<i class="fa fa-chevron-down"></i>{% endif %}{% endif %}
      </th>
      <th class='album_th'>Album
        {% if sort_col == 'album' %}{% if sort_asc %}<i class="fa fa-chevron-up"></i>{% else %}<i class="fa fa-chevron-down"></i>{% endif %}{% endif %}
      </th>
      <th class='date_added_th'>Date Added
        {% if sort_col == 'date_added' %}{% if sort_asc %}<i class="fa fa-chevron-up"></i>{% else %}<i class="fa fa-chevron-down"></i>{% endif %}{% endif %}
      </th>
      <th class='duration_th'><i class="fa fa-clock-o"></i>
        {% if sort_col == 'duration' %}{% if sort_asc %}<i class="fa fa-chevron-up"></i>{% else %}<i class="fa fa-chevron-down"></i>{% endif %}{% endif %}
      </th>
      <th class='play_count_th'>Plays
        {% if sort_col == 'play_count' %}{% if sort_asc %}<i class="fa fa-chevron-up"></i>{% else %}<i class="fa fa-chevron-down"></i>{% endif %}{% endif %}
      </th>
    </thead>
    <tbody class='song_body'>
      <tr id="top-spacer" data-index='spacer' style="height: 0"/>
      <tr id="bottom-spacer" data-index='spacer' style="height: 0"/>
    </tbody>
  </table>
</script>
<script type='text/swig' id='song_item'>
<tr id="{{song.attributes._id}}" data-index="{{index}}" class='song_row {% if selected %}selected{% endif %}'>
<td>
  <div class='option_div'>
    <i class='fa fa-plus-square-o options'></i>
  </div>
  <img class='cover' src='{{song.getCover()}}'/>
  <span class='song_text'>{{song.attributes.title}}</span>
</td>
<td><span class='colsearch'>{{song.attributes.display_artist}}</span></td>
<td><span class='colsearch'>{{song.attributes.album}}</span></td>
{% if song.attributes.is_youtube %}
  <td>(not in library)</td>
  <td></td>
  <td></td>
{% else %}
  <td>{{song.attributes.date_added|prettyPrintDateAdded}}</td>
  <td>{{song.attributes.duration|prettyPrintSeconds}}</td>
  <td>{{song.attributes.play_count}}</td>
{% endif %}
</tr>
</script>
<script type="text/swig" id="current_info_template">
  <img class='info_cover' src='{{song.getCover()}}'/>
  <div class='info_wrapper'>
    <p class="info_title">{{song.attributes.title}}</p>
    <p class="info_detail"><span class='colsearch'>{{song.attributes.display_artist}}</span> - <span class='colsearch'>{{song.attributes.album}}</span> <i class='fa fa-plus-square-o info_options'></i></p>
  </div>
</script>
<script type="text/swig" id="info_template">
<div class="row">
<form class="form-horizontal clearfix edit_form" role="form">
  <input type="hidden" id="edit_id" value="{{track.attributes._id}}" />
  <div class="form-group">
    <label class="col-sm-2 control-label">Cover</label>
    <div class="col-sm-10 img_block">
      <img class='info_cover detailed' src='{{track.getCover()}}'/>
      <div class='drop_placeholder'>Drop Artwork Here</div>
      <div class='btn btn-default find_cover_art'>Find Cover Art</div>
    </div>
  </div>
  <div class="form-group">
    <label for="title" class="col-sm-2 control-label">Title</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="title" value="{{track.attributes.title}}">
    </div>
  </div>
  <div class="form-group">
    <label for="artist" class="col-sm-2 control-label">Artist</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="artist" value="{{track.attributes.display_artist}}">
    </div>
  </div>
  <div class="form-group">
    <label for="album" class="col-sm-2 control-label">Album</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="album" value="{{track.attributes.album}}">
    </div>
  </div>
</form>
<div class='col-sm-12'>
<h3>Misc Info</h3>
<p>Duration: {{track.attributes.duration|prettyPrintSeconds}}</p>
<p>
  Location: {% if onserver %}<a class='btn btn-primary open_dir' title="{{music_dir}}{{track.attributes.location}}">Open in File Manager</a>{% else %}
  {{music_dir}}{{track.attributes.location}}{% endif %}
</p>
<p><div class="btn btn-primary correct_info">Auto-find info</div></p>
</div>
</div>
</script>
<script type="text/swig" id="options_template">
<div class="dropdown open {{dropup}}">
  <ul class="dropdown-menu options-menu custom_scrollbar" role="menu">
    {% if type == 'youtube' %}
      <li class="save_youtube"><a>Save to Library</a></li>
    {% endif %}
    <li class='add_to_queue'><a>Add to Queue</a></li>
    {% if numSelected == 1 %}
      {% if type == 'normal' %}
        <li class="view_info"><a>Detailed Info</a></li>
      {% endif %}
      <li class="similar_songs"><a>Generate Mix</a></li>
    {% endif %}
    {% if type == 'normal' %}
      <li class="rewrite_tags"><a>Write metadata to file</a></li>
      {% if current_playlist.editable %}
        <li class='remove_from_playlist' id='{{current_playlist._id}}'><a>Remove from playlist</a></li>
      {% endif %}
      <li class="hard_rescan"><a>Hard Rescan</a></li>
      <li class="divider"></li>
      {% if recents.length %}
        <li role="presentation" class="dropdown-header">Recents</li>
        {% for playlist in recents %}
          {% if playlist.attributes.editable %}
          <li class='add_to_playlist' id="{{playlist.attributes._id}}"><a>{{playlist.attributes.title}}</a></li>
          {% endif %}
        {% endfor %}
      {% endif %}
      <li role="presentation" class="dropdown-header">Add to Playlist</li>
      {% for playlist in playlists %}
        {% if playlist.attributes.editable %}
        <li class='add_to_playlist' id="{{playlist.attributes._id}}"><a>{{playlist.attributes.title}}</a></li>
        {% endif %}
      {% endfor %}
    {% endif %}
  </ul>
</div>
</script>
<script type="text/swig" id="settings_bar_template">
  <i class="fa fa-volume-up fa-2x volume_icon"></i>
  <input type="text" id="vol_bar" data-slider-id="vol_bar_slider" data-slider-max="100" data-slider-step="0.1" data-slider-value="{{vol}}" data-slider-tooltip="hide" />
  <button id='remote_setup' class='btn btn-primary'>Remote Setup</button>
</script>
<script type="text/swig" id="control_template">
  <p>This functionality allows you to control you music player by going to <code>{{host}}/remote</code></p>
  <div class='form-horizontal'>
    <div class="form-group">
      <label for="comp_name_input" class='col-sm-3'>Remote name</label>
      <div class='col-sm-9'>
        <input class="form-control" id="comp_name_input" type="text" value="{{comp_name}}" placeholder="Living Room Computer" />
      </div>
    </div>
  </div>
</script>
<!-- settings view templates -->
<script type="text/swig" id="settings_template">
<div>
{% if message %}
<div class="alert alert-success">{{message}}</div>
{% endif %}
<form class="form-horizontal clearfix edit_form" role="form">
  <div class="form-group">
    <label for="music_dir_val" class="col-sm-2 control-label">Music Directory</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="music_dir_val" value="{{music_dir}}">
    </div>
  </div>
  <div class="form-group">
    <label for="country_code" class="col-sm-2 control-label">Country Code</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="country_code" value="{{country_code}}">
    </div>
  </div>
</form>
</div>
</script>
<!-- sync templates/data -->
<script type="text/swig" id='sync_body_template'>
<div>
  <h1>Sync <small class="pull-right back_to_songs btn btn-primary">Back To Music</small></h1>
  <p>Enter the addresses so the servers each know which host they will be syncing with.</p>
  <div class='form-container form-horizontal'>
    <div class="form-group">
      <label class="col-sm-3 control-label">This Server</label>
      <div class="col-sm-9"><input class='form-control' type='text' id='remote_a' value='{{this_ip}}' /></div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">Remote Address</label>
      <div class="col-sm-9"><input class='form-control' type='text' id='remote_b' value='{{remote_ip}}' /></div>
    </div>
    <div class="form-group">
      <div class='col-sm-9 col-sm-offset-3'><a class='btn btn-primary' id='fetch_data'>Fetch Libraries</a></div>
    </div>
  </div>
  <p>Select the playlists you would like to be moved to the other machine</p>
  <div class='row'>
    <div class='col-sm-5 playlists_left'></div>
    <div class='col-sm-2 sync_div'><div class='btn btn-primary sync_btn'>
      <i class="fa fa-chevron-left"></i> Sync <i class="fa fa-chevron-right"></i>
    </div></div>
    <div class='col-sm-5 playlists_right'></div>
  </div>
</div>
</script>
<script type="text/swig" id='sync_template'>
<h3>{{title}}</h3>
<p>
{% for playlist in playlists %}
  <input type="checkbox" id="{{side}}_{{playlist.attributes._id}}"> <label for="{{side}}_{{playlist.attributes._id}}">{{playlist.attributes.title}}</label><br/>
{% endfor %}
</p>
</script>
{% endraw %}
<script type="text/javascript">
var this_ip = "{{ip}}";
var country_code = "{{country_code}}";
var on_mobile = false;
</script>
{% endblock %}
{% block scripts %}
{% endblock %}