/ Account Sessions Dialog
%div{'layout' => 'screen', 'layout-id' => 'account/sessionProperties', id: 'account-session-properties', '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-properties-content-scroller
      .content-wrapper.account-session-properties
        #account-session-properties-div
          .left-panel
            .right-no-left
              %strong{style: "font-weight: bold;"} Date & Time
            .clearall.left-column
              Date:
            .right-column
              %input#session-prop-start-date{type: "text"}
            .clearall.right-no-left
              .icheckbuttons.datetime_tbd_check
                %input{type: "checkbox", id: "date_time_tbd"}
              %label.datetime_tbd_label{for: "date_time_tbd"}Date and time TBD
              .clearall
            .clearall.left-column
              Start:
            .right-column
              %select#start-time-prop-list
            .clearall.left-column
              End:
            .right-column
              %select#end-time-prop-list
            .clearall.left-column
              Time Zone:
            .right-column
              = timezone_list({id: 'timezone-prop-list', style: 'width: 100%'})
            .clearall.left-column
              Recurring:
            .right-column
              %select#recurring-mode-prop-list
                %option.label{value: "once"} Not Recurring
                %option.label{value: "weekly"} Weekly
            .clearall
          .right-panel
            .right-no-left
              %strong{style: "font-weight: bold;"} Other Properties
            .clearall.left-column
              Genre:
            .right-column
              #divSessionGenre
                #session-prop-genre
                  = render "genreSelector"
            .clearall.left-column
              Name:
            .right-column
              #divSessionName
                %input#session-prop-name{type: "text", name: "session-prop-name", style: "width: 98%;"}
            .clearall.left-column
              Description:
            .right-column
              #divSessionDescription
                %textarea.session-prop-desc#session-prop-desc{rows: 3, name: "session-prop-description"}
            .clearall.left-column
              Language:
            .right-column
              %select#session-prop-lang-list
                - music_session_languages.each do |language|
                  %option{value: "#{language[:id]}"} #{language[:label]}
            .clearall.left-column
              Musician Access:
            .right-column
              %select#session-prop-musician-access
                %option{value: "only-rsvp"} Only RSVP musicians may join
                %option{value: "musicians-approval", selected: "selected"} Musicians may join by approval
                %option{value: "musicians"} Musicians may join at will
            .clearall.left-column
              Fan Access:
            .right-column
              %select#session-prop-fans-access
                %option{value: "listen-chat-each", selected: "selected"} Fans may listen, chat with each other
                %option{value: "no-listen-chat"} Fans may not listen to session
            .clearall.right-no-left
              .icheckbuttons.open-rsvp-check
                %input{type: "checkbox", id: "open-rsvp"}
              %label.open-rsvp-label{for: "open-rsvp"} Allow interested JamKazam musicians to request a RSVP
              .clearall
            .clearall.left-column
              Legal:
            .right-column
              %select#session-policy
                %option{value: "Standard"} Standard
                %option{value: "Creative Commons"} Creative Commons
                %option{value: "Offline"} Offline
            .clearall.left-column
              Notation Files:
            .right-column
              .spinner-small.upload-spinner
              .select-files-section
                %a.button-orange.btn-select-files SELECT FILES...
                %input{type: "file", class: "hidden", id: "session-select-files", value: "Select Files...",
                       accept: ".pdf, .png, .jpg, .jpeg, .gif, .xml, .mxl, .txt", multiple: "true"}
                .selected-files-section
                  %ul#selected-filenames
              .clearall
            .clearall
          .clearall
          .action-bar
            .left
              %a.button-grey{href: "#", target: "_blank"} HELP
            .right
              %a.button-grey{href: "javascript:history.go(-1)"} CANCEL
              %a.button-orange{href: "#", id: "session-update"} UPDATE PROPERTIES
        .clearall
  / end content scrolling area