{% extends "MuzichFavoriteBundle::layout.html.twig" %}

{% block title %}{{ playlist.name }}{% endblock %}
{% block mainbox_classes %}{% endblock %}

{% block content %}
  
  <div class="top_tools">
    <div class="show_options">
      
      <a class="autoplay_playlist button darkbutton" href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id }) }}" >
        {{ 'playlist.read'|trans({}, 'elements') }}
      </a>

      {% if app.user %}
        {% if not playlist.owned(app.user) and viewed_user.id != app.user.id %}
          {% if not app.user.havePlaylistPicked(playlist) %}
            <a class="playlist_pick button darkbutton" href="{{ path_token('playlist_pick', { 'playlist_id' : playlist.id }) }}" >
              {{ 'playlist.pick'|trans({}, 'elements') }}
            </a>
          {% else %}
            <a class="playlist_unpick button darkbutton" href="{{ path_token('playlist_unpick', { 'playlist_id' : playlist.id }) }}" >
              {{ 'playlist.unpick'|trans({}, 'elements') }}
            </a>
          {% endif %}
        {% endif %}
      {% endif %}
      
      <a class="button darkbutton" href="{{ path('playlists_user', {'user_slug' : viewed_user.slug}) }}" >
        {{ 'user.view_playlists'|trans({}, 'users') }}
      </a>
      
    </div>
    
    <h1>{{ playlist.name }}</h1>
    
    {% include "MuzichCoreBundle:Tag:tag_cloud.html.twig" with {
      'tags' : playlist.tags
    } %}
    
    {% if playlist.elements|length %}
      <form action="{{ path_token('playlist_update_order', { 'playlist_id' : playlist.id }) }}" method="post">
        <ul class="playlist_elements {% if app.user%}{% if playlist.owned(app.user) %}owned{% endif %}{% endif %}">
          {% for element in playlist.elements %}
            <li class="playlist_element">
              
              <input type="hidden" name="elements[]"  value="{{ element.id }}" />
              
              
              <div class="actions">
                
                {% if app.user%}
                  {% if playlist.owned(app.user) %}
                    <a class="drag" href="#">
                      <img src="{{ asset('/img/drag3.png') }}" alt="drag" />
                    </a>
                  {% endif %}
                {% endif %}
                
                {% if element.type|can_autoplay_type %}
                  <a class="autoplay_playlist" 
                    href="{{ path('playlist_datas_for_autoplay', { 'playlist_id' : playlist.id, 'offset' : loop.index0 }) }}"
                    title="{{ 'playlist.start_here'|trans({}, 'elements') }}"
                  >
                    <img src="{{ asset('/img/1361037350_control_play.png') }}" alt="playlist" />
                  </a>
                {% else %}
                  <img class="autoplay_off" src="{{ asset('/img/1361037350_control_play_off.png') }}" alt="playlist" />
                {% endif %}
                
                {% if app.user%}
                  {% if playlist.owned(app.user) %}
                    <a 
                      class="remove_element" 
                      href="{{ path_token('playlist_remove_element', { 'playlist_id' : playlist.id, 'index' : loop.index0 }) }}"
                      title="{{ 'playlist.remove_element'|trans({}, 'elements') }}"
                    >
                      <img src="{{ asset('/img/icon_close_2.png') }}" alt="delete" />
                    </a>
                  {% endif %}
                {% endif %}
              </div>
              
              <div class="actions_right">
                <a 
                  class="open_element" 
                  href="{{ path('element_get_one', { 'element_id' : element.id }) }}" data-id="{{ element.id }}"
                  title="{{ 'playlist.open'|trans({}, 'elements') }}"
                  >
                  <img src="{{ asset('/img/icon_more_2.png') }}" alt="open" />
                </a>
              </div>
              
              <div class="title">
                {{ element.name }}
              </div>
              
              <div class="content_opened"></div>
              
            </li>
          {% endfor %}
        </ul>
      </form>
    {% endif %}
  
  </div>
  
{% endblock %}