/ Account Sessions Dialog
%div{'layout' => 'screen', 'layout-id' => 'account/sessionDetail', id: 'account-session-detail', 'layout-arg' => 'id', class: 'screen secondary'}
  .content-head
    .content-icon
      = image_tag "content/icon_account.png", :width => 27, :height => 20
    %h1 my account
    = render "screen_navigation"

  / session detail area
  .content-body
    .content-body-scroller.session-detail-scroller#session-detail-content-scroller
      .content-wrapper.account-session-detail
        .sessions-header
          .left.sessions-caption
            %h2 session details:
          .right.session-buttons
            %a.cancel-rsvp.button-orange{href: "#"} CANCEL RSVP
            %a.session-detail-page.button-orange{href: "#", rel:'external'} SESSION PAGE
            %a.invite-others.button-orange{'layout-link' => 'select-invites','href' => "#"} INVITE OTHERS
          .clearall

        .paginate-wait
          Fetching session details...
          .spinner-small
        #account-session-detail-div
        .clearall
  / end content scrolling area

%script{type: 'text/template', id: 'template-account-session-detail'}
  = "{% if (data.has_pending) { %}"
  .pending-rsvps.dark-box
    .box-header
      %h2.left
        RSVPs
      .right.rsvp-help-notice
        {{data.notification_msg}}
      .clearall
    #pendingRSVPs
      %table.rsvp-table
        %tbody
          {{data.pending_rsvps}}
  = "{% } %}"
  .session-musicians.dark-box
    .box-header
      %h2.left
        Session Musicians
      .clearall
    #session-rsvps
      .musician-left
        RSVPs
      .musician-right
        %table.rsvp-table
          %tbody
            {{data.session_rsvps}}
      .clearall
    #still-needed
      .musician-left
        Still Needed
      .musician-right
        %table.rsvp-table
          %tbody
            {{data.still_needed}}
      .clearall
    #invited-users
      .musician-left
        Invited
      .musician-right
        %table.rsvp-table
          %tbody
            %tr
              {{data.invited_users}}
      .clearall
  .session-properties.dark-box
    .box-header
      %h2.left
        Session Properties
      .right
        = "{% if (data.is_owner) { %}"
        %a.button-orange.update-session{href: "/client#/account/sessionProperties/{{data.id}}"} UPDATE
        = "{% } %}"
      .clearall
    #session-properties
      {{data.session_properties}}

%script{type: 'text/template', id: 'template-account-pending-rsvp'}
  %tr
    %td.avatar-cell
      %a{href: "/client#/profile/{{data.user_id}}", 'user-id' => "{{data.user_id}}", 'hoveraction' => "musician", class: 'avatar-tiny'}
        %img{src: "{{data.avatar_url}}"}
    %td
      {{data.user_name}}
    %td
      {{data.instruments}}
    %td
      {{data.latency}}
    %td.rsvp-buttons
      %a{href: "/client#/profile/{{data.user_id}}", class: 'button-orange left', 'user-id' => "{{data.user_id}}"} PROFILE
      %a{href: "#", class: 'button-orange left approveRsvpRequest', 'data-instrument-text' => "{{data.instrument_text}}", 'user-id' => "{{data.user_id}}", 'request-id' => "{{data.request_id}}", 'user-name' => "{{data.user_name}}"} APPROVE
      %a{href: "#", class: 'button-orange left declineRsvpRequest', 'user-id' => "{{data.user_id}}", 'request-id' => "{{data.request_id}}"} DECLINE
      .clearall
    .clearall

%script{type: 'text/template', id: 'template-account-session-rsvp'}
  %tr
    %td.avatar-cell
      %a{href: "/client#/profile/{{data.id}}", 'user-id' => "{{data.id}}", 'hoveraction' => "musician", class: 'avatar-tiny'}
        %img{src: "{{data.avatar_url}}"}
    %td
      {{data.user_name}}
    %td
      {{data.instruments}}
    %td
      {{data.latency}}
    %td.rsvp-buttons
      = "{% if (data.is_owner == true) { %}"
      %a{href: "#", class: 'button-orange cancelSessionRsvp', 'request-id' => "{{data.request_id}}"} CANCEL
      = "{% }; %}"
  .clearall

%script{type: 'text/template', id: 'template-account-session-properties'}
  .session-properties-left Date/Time:
  .session-properties-right
    {{data.pretty_scheduled_start_with_timezone}}
  .clearall.session-properties-left Genre:
  .session-properties-right
    {{data.genres}}
  .clearall.session-properties-left Name:
  .session-properties-right
    {{data.name}}
  .clearall.session-properties-left Description:
  .session-properties-right
    {{data.description}}
  .clearall.session-properties-left Notation Files:
  .session-properties-right
    %table.rsvp-table
      %tbody
        %tr
          = "{% _.each(data.music_notations, function(notation) { %}"
          %td
            %a{href: "/music_notations/{{notation.id}}"}
              {{notation.file_name}}
          = "{% }); %}"
    {{data.notations}}
  .clearall.session-properties-left Language:
  .session-properties-right
    {{data.language_description}}
  .clearall.session-properties-left Access:
  .session-properties-right
    {{data.musician_access_description}} {{data.fan_access_description}}
  .clearall.session-properties-left Legal:
  .session-properties-right
    {{data.legal_policy}}
  .clearall.session-properties-left Fan Page:
  .session-properties-right
    {{data.share_url}}
  .clearall


%script{type: 'text/template', id: 'template-account-invited'}
  %td
    %a{href: "#", 'user-id' => "{{data.user_id}}", 'hoveraction' => "musician", class: 'avatar-tiny'}
      %img{src: "{{data.avatar_url}}"}

// also used by musicians page
%script{type: 'text/template', id: 'template-account-session-latency'}
  %span.latency{class: "{{data.latency_style}}", 'data-user-id' => "{{data.id}}", 'data-audio-latency' => "{{data.audio_latency || ''}}", 'data-full-score' => "{{data.full_score || ''}}", 'data-internet-score' => "{{data.internet_score || ''}}"}
    {{data.latency_text}}
  %span.latency-info
    {{data.latency_info}}
