doctype html
html(lang="en")
  head
    include head
    mixin head()
    link(href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css", rel="stylesheet")
  body
    #wrap
      nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
        include nav
        mixin navheader()
        #nav-collapsible.collapse.navbar-collapse
          - var cname = "/r/" + channelName
          ul.nav.navbar-nav
            mixin navdefaultlinks(cname)
            li: a(href="#", onclick="javascript:showUserOptions()") Options
            li: a(href="#", onclick="javascript:$('#channeloptions').modal()") Channel Settings
          mixin navloginlogout(cname)
      section#mainpage
        .container
          #motdrow.row
            .col-lg-12.col-md-12
              #motdwrap.well
                button#togglemotd.close.pull-right(type="button")
                  span.glyphicon.glyphicon-minus
                #motd
                .clear
          #announcements.row
          #drinkbarwrap.col-lg-12.col-md-12.row
            #drinkbar
              h1#drinkcount
          #main.row
            #chatwrap.col-lg-5.col-md-5
              #chatheader
                i#userlisttoggle.glyphicon.glyphicon-chevron-up.pull-left.pointer(title="Show/Hide Userlist")
                span#usercount.pointer Not Connected
                span#modflair.label.label-default.pull-right.pointer M
                span#adminflair.label.label-default.pull-right.pointer A
              #userlist
              #messagebuffer
              input#chatline.form-control(type="text", maxlength="240", style="display: none")
              #guestlogin.input-group
                span.input-group-addon Guest login
                input#guestname.form-control(type="text", placeholder="Name")
            #videowrap.col-lg-7.col-md-7
              p#currenttitle Nothing Playing
              #ytapiplayer
          #controlsrow.row
            #leftcontrols.col-lg-5.col-md-5
              button#newpollbtn.btn.btn-sm.btn-default New Poll
            #rightcontrols.col-lg-7.col-md-7
              #qualitywrap.dropdown.btn-group
                button#qdrop.btn.btn-sm.btn-default.dropdown-toggle(data-toggle="dropdown") Quality
                  b.caret
                mixin quality_item(id, text)
                  li(role="presentation")
                    a(id="#{id}", role="menuitem", href="javascript:void(0)") #{text}
                ul.dropdown-menu(role="menu", aria-labelledby="qdrop")
                  mixin quality_item("quality_auto", "Quality: Auto")
                  mixin quality_item("quality_240p", "240p")
                  mixin quality_item("quality_360p", "360p")
                  mixin quality_item("quality_480p", "480p")
                  mixin quality_item("quality_720p", "720p")
                  mixin quality_item("quality_1080p", "1080p")
              button#mediarefresh.btn.btn-sm.btn-default Refresh Media
              
          #playlistrow.row
            #leftpane.col-lg-5.col-md-5
              #leftpane-inner.row
                #pollwrap.col-lg-12.col-md-12
                #searchwrap.col-lg-12.col-md-12
                  button#showsearch.btn.btn-default.btn-block(data-toggle="collapse", data-target="#searchcontrol") Search Library/YouTube
                  #searchcontrol.collapse
                    .row.vertical-spacer
                      #querywrap.col-lg-12.col-md-12
                        .input-group
                          input#library_query.form-control(type="text")
                          span.input-group-btn
                            button#library_search.btn.btn-default Library
                          span.input-group-btn
                            button#youtube_search.btn.btn-default YouTube
                    ul#library.videolist.col-lg-12.col-md-12
                #playlistmanagerwrap.col-lg-12.col-md-12
                  button#showplaylistmanager.btn.btn-default.btn-block(data-toggle="collapse", data-target="#playlistmanager") Playlist Manager
                  #playlistmanager.collapse
                    .row.vertical-spacer
                      .col-lg-12.col-md-12
                        .input-group
                          input#userpl_name.form-control(type="text", placeholder="Playlist Name")
                          span.input-group-btn
                            button#userpl_save.btn.btn-default Save
                      ul#userpl_list.col-lg-12.col-md-12
            #rightpane.col-lg-7.col-md-7
              #rightpane-inner.row
                #playlistcontrolswrap.col-lg-12.col-md-12
                  button#showplaylistcontrols.btn.btn-default.btn-block(data-toggle="collapse", data-target="#playlistcontrols") Playlist Controls
                  #playlistcontrols.collapse
                    .row.vertical-spacer
                      .col-lg-12.col-md-12
                        .input-group
                          input#mediaurl.form-control.input-block-level(type="text", placeholder="Media URL")
                          span.input-group-btn
                            button#queue_next.btn.btn-default Next
                          span.input-group-btn
                            button#queue_end.btn.btn-default At End
                    hr
                    .row
                      #customembedwrap.col-lg-12.col-md-12
                        button#showcustomembed.btn.btn-default.btn-block(data-toggle="collapse", data-target="#customembed") Custom Embed
                        #customembed.collapse
                          | Paste the embed code below and click Next or At End.
                          | Acceptable embed codes are <code>&lt;iframe&gt;</code> and <code>&lt;object&gt;</code> tags.
                          textarea#customembed_code.input-block-level.form-control(rows="3")
                    hr
                    .row
                      #extended_controls.col-lg-12.col-md-12
                        button#clearplaylist.btn.btn-default.btn-block Clear Playlist
                        button#shuffleplaylist.btn.btn-default.btn-block Shuffle Playlist
                #voteskipwrap.col-lg-12.col-md-12.col-sm-12.col-xs-12.btn-group
                  button#voteskip.btn.btn-default Voteskip
                  button#getplaylist.btn.btn-default Get Playlist URLs
                  button#qlockbtn.btn.btn-danger(title="Playlist Locked")
                    i.glyphicon.glyphicon-lock
                .col-lg-12.col-md-12
                  #queue.videolist
                  #plmeta
                    span#plcount 0 items
                    span#pllength 00:00:00
          #resizewrap.row
            .col-lg-5.col-md-5
            #videowidth.col-lg-7.col-md-7
          #sitefooter
    #useroptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
      .modal-dialog
        .modal-content
          .modal-header
            button.close(data-dismiss="modal", aria-hidden="true") &times;
            h4 User Preferences
            ul.nav.nav-tabs
              li: a(href="#us-general", data-toggle="tab") General
              li: a(href="#us-playback", data-toggle="tab") Playback
              li: a(href="#us-chat", data-toggle="tab") Chat
              li: a(href="#us-mod", data-toggle="tab", style="") Moderator
          .modal-body
            .tab-content
              include useroptions
              mixin us-general()
              mixin us-playback()
              mixin us-chat()
              mixin us-mod()
          .modal-footer
            button.btn.btn-primary(type="button", data-dismiss="modal", onclick="javascript:saveUserOptions()") Save
            button.btn.btn-default(type="button", data-dismiss="modal") Close
    #channeloptions.modal.fade(tabindex="-1", role="dialog", aria-hidden="true")
      .modal-dialog
        .modal-content
          .modal-header
            button.close(data-dismiss="modal", aria-hidden="true") &times;
            h4 Channel Settings
            ul.nav.nav-tabs
              li: a(href="#cs-miscoptions" data-toggle="tab") General Settings
              li: a(href="#cs-adminoptions" data-toggle="tab") Admin Settings
              li.dropdown
                a#cs-edit-dd-toggle(href="#", data-toggle="dropdown") Edit
                  span.caret
                ul.dropdown-menu
                  li: a(href="#cs-motdeditor", data-toggle="tab", tabindex="-1") Edit MOTD
                  li: a(href="#cs-csseditor", data-toggle="tab", tabindex="-1") Edit CSS
                  li: a(href="#cs-jseditor", data-toggle="tab", tabindex="-1") Edit Javascript
                  li: a(href="#cs-chanranks", data-toggle="tab", tabindex="-1") Edit user ranks
              li: a(href="#cs-banlist", data-toggle="tab", tabindex="-1") Ban list
          .modal-body
            .tab-content
              include channeloptions
              mixin miscoptions()
              mixin adminoptions()
              mixin motdeditor()
              mixin csseditor()
              mixin jseditor()
              mixin banlist()
              mixin recentjoins()
              mixin chanranks()
          .modal-footer
            button.btn.btn-default(type="button", data-dismiss="modal") Close
    include footer
    mixin footer()
    script(src="//code.jquery.com/ui/1.10.3/jquery-ui.js")
    script(src="/assets/js/iourl.js")
    //script(src="#{ioUrl}/socket.io/socket.io.js")
    //script(type="text/javascript").
    //  var IOSERVER = "#{ioUrl}";
    //  var SOCKET = io.connect(IOSERVER);
    //  $('#channeloptions').modal();
    //  $('#channeloptions a[href="#cs-miscoptions"]').tab('show');
    script(src="/assets/js/data.js")
    script(src="/assets/js/util.js")
    script(src="/assets/js/player.js")
    script(src="/assets/js/paginator.js")
    script(src="/assets/js/ui.js")
    script(src="/assets/js/callbacks.js")
    script(src="https://www.youtube.com/iframe_api")