{% extends 'telemeta/base.html' %}
{% load telemeta_tags %}
{% load i18n %}

{% block title %}
{% trans "Add to playlist" %}
{% endblock %}
{% block extra_stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}telemeta/css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}telemeta/css/search.css" />
{% endblock %}
{% block content %}

    <form method="POST" action="{%url "add_confirmation" type %}">{% csrf_token %}
    <div class="row">
        <div class="col-md-4">
            <table class="listing" style="width:100%">
           <thead>
            <tr><th>{% trans "Selected items : "%}</th>

            </tr>
           </thead><tbody>
           {% ifequal type "item" %}
                {% for item in selected_items_list %}
                    <tr>

                     <td><a href="#">
                        {{item}}</a></td>
                    </tr>
                {% endfor %}
            {% else %}
                {% for item in selected_items_list %}
                    <tr>

                     <td><a href="#">
                        {{item.title}}</a></td>
                    </tr>
                {% endfor %}
            {% endifequal %}
            </tbody>
            </table>
        </div>
        <div class="col-md-4 col-md-offset-3">
              <label for="selection">select your playlist : </label>
              <select name="playlist_id" style="width:100%;" id="selection">
                    {% for playlist in existing_playlists %}
                        <option value="{{playlist.id}}">{{playlist.title}}</option>
                    {% endfor %}
              </select>
        </div>
      </div>
      {% for item in selected_items_list %}
          <input type="hidden" name="item_id" value="{{item.id}}"/>
      {% endfor %}
      <input type="hidden" name="lastquerypath" value="{{lastquerypath}}"/>
      <div class="row">
          <div class="col-md-4"><a style="margin-top:10px;width:100%" href="{{lastquerypath}}" id="btn" class="btn btn-default">return to search results</a></div>
          <div class="col-md-4 col-md-offset-3"><button style="margin-top:10px;width:100%" type="submit" id="btn" class="btn btn-default">{% trans "Add to Playlist" %}</button></div>
      </div>
  </form>
{% endblock %}
{% block extra_javascript %}
    <script src="{{ STATIC_URL }}jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $("#selection").selectmenu({
                icons : {button: "ui-icon-carat-2-n-s"}
            }).selectmenu("menuWidget").addClass("overflow");
        });
    </script>
{% endblock %}
