sudara/alonetone

<%= render partial: 'form' %>
<div id="columns" class="edit_playlist_columns" data-controller="playlist-sort">
  <div id="left">
    <p class="left_instructions">
      Reorder tracks by dragging them by their handle <span class="mini_handle_icon"><%== render file: svg_path('svg/icon_mini_handle_for_instructions.svg') %></span> icon.<br>
      Remove them with the <span class="mini_remove_icon"><%== render file: svg_path('svg/icon_mini_x_for_instructions.svg') %></span>
 icon.
    </p>
    <div class="box">
      <div class="left_column_box_header">
        <h2><%= @playlist.title %></h2>
        <div>
           <span class="playlist_track_size" data-playlist-sort-target="trackCount"><%= pluralize @playlist.tracks_count, 'track' %></span> <span class="playlist_dash">&mdash;</span>
           <span class="playlist_total_time" data-playlist-sort-target="totalTime"><%= @playlist.play_time %></span>
        </div>
      </div>
      <div class="sortable" data-playlist-sort-target="sortable">
        <% @playlist.tracks.each do |track| %>
        <div class="asset playlist_asset" data-controller="normal-playback playlist-update" data-normal-playback-unopenable-value="true"
           data-id="<%= track.id %>" data-time="<%= track.asset.seconds %>">
          <%= render partial: 'assets/asset', locals: { asset: track.asset } %>
          <a href="#" class='remove' data-playlist-update-target="remove" data-action="playlist-update#remove">
            <div class="remove_inner">
                <%== render file: svg_path('svg/icon_x.svg') %>
            </div>
          </a>
        </div>
        <% end %>
      </div>
      <div class="playlist_size">
        <%= "<span data-playlist-sort-target='size'>#{@playlist.tracks.size}</span> tracks by #{@playlist.is_mix? ? "various artists" : @playlist.user.name}".html_safe %>
      </div>
    <div class="small_spinner" data-playlist-sort-target="spinner"></div>
    </div>
  </div>

  <div id="right">
    <p class="right_instructions">
       Click the <span class="mini_add_icon"><%== render file: svg_path('svg/icon_mini_+_for_instructions.svg') %></span> icon on a track below to add it to the playlist selection.
    </p>
    <div id="playlist_sources" class="box draggable_wrapper">
        <div class="right_column_box_header">
          <h2>Available tracks</h2>
          <div class="available_tracks_total">
            <%= @user.assets_count %> tracks total
          </div>
        </div>
        <div id="playlist_tabs">
          <ul id="playlist_source_options" class="tabs" data-playlist-sort-target="tabs">
            <li><%= link_to 'your uploads', '#your_uploads', class: 'playlist_option', id: 'open_your_stuff' if @user.has_tracks? %></li>
          </ul>
        </div>
        <div class="mini_paginator">
          <%== pagy_nav @assets_pagy %>
        </div>
        <div id="your_uploads" class="playlist_source">
          <% @assets.each do |asset| %>
            <div class="asset playlist_asset stitches_track" data-controller="normal-playback playlist-update"
            data-normal-playback-unopenable-value="true" id="asset_<%= asset.id %>"  data-time="<%= asset.seconds %>"
            data-action="track:play->normal-playback#play track:pause->normal-playback#pause track:playing->normal-playback#playing
            track:ended->normal-playback#stop">
              <%= render partial: 'assets/asset', locals: { asset: asset } %>
              <a href="#" class='add' data-playlist-update-target="add" data-action="playlist-update#add">
                <div class="add_inner">
                  <%== render file: svg_path('svg/icon_+.svg') %>
                </div>
              </a>
              <a href="#" class='remove' data-playlist-update-target="remove" data-action="playlist-update#remove">
                <div class="remove_inner">
                    <%== render file: svg_path('svg/icon_x.svg') %>
                </div>
              </a>
            </div>
          <% end %>
        </div>
    </div>
  </div>
  <%= link_to 'add_track_url', add_track_user_playlist_path(@user, @playlist.permalink),
    data: { 'playlist-sort-target': 'addUrl' }, class: 'hidden add_url' %>
  <%= link_to 'remove_track_url', remove_track_user_playlist_path(@user, @playlist.permalink),
    data: { 'playlist-sort-target': 'removeUrl' }, class: 'hidden remove_url' %>
  <%= link_to "sort tracks url", sort_tracks_user_playlist_path(@user, @playlist.permalink),
    data: { 'playlist-sort-target': 'sortUrl' }, class: 'hidden sort_url' %>
</div>