.dialog.openJamTrackDialog-overlay.ftue-overlay.tall#open-jam-track-dialog layout="dialog" layout-id="open-jam-track-dialog"

  .content-head
    = image_tag "content/icon_add.png", {:width => 19, :height => 19, :class => 'content-icon' }
    h1
      | open a jamtrack

  .dialog-inner

    = react_component 'JamTrackAutoComplete', {:onSearch => 'window.JK.OpenJamTrackDialogInstance.search', show_purchased_only:true}

    button.search-btn.button-orange SEARCH
    .recording-wrapper
      table.open-jam-tracks cellspacing="0" cellpadding="0" border="0"
        thead
          tr
            th.jamtrack-name align="left"
              | NAME
            th.jamtrack-artist align="left"
              | ORIGINAL ARTIST
            th.jamtrack-state align="left"
              | DOWNLOADED
              a.downloaded-jamtrack-help href="#"
                | ?
        tbody

    br

    .left.paginator-holder

    .help-links
      a.what-are-jamtracks href='#'
        | What are JamTracks?
      a href='/client#/jamtrack/search' rel="external"
        | Shop for JamTracks
    .right
      a href="#" class="button-grey" layout-action="cancel"
        | CANCEL


    br clear="all"


  script#template-jam-track-row type="text/template"
    tr data-recording-id="{{data.jamTrackId}}" data-local-state="{{data.jamTrackState}}"
      td.jamtrack-name
        | {{data.name}}
      td.jamtrack-artist
        | {{data.artist}}
      td.jamtrack-state
        | {{data.downloaded}}