mixin lcheckbox(id, label)
  .form-group
    label.control-label.col-sm-4(for=id)= label
    .col-sm-8
      .checkbox
        input(type="checkbox", id=id)

mixin rcheckbox(id, label)
  .form-group
    .col-sm-8.col-sm-offset-4
      .checkbox
        label(for=id)
          input(type="checkbox", id=id)
          = label

mixin textbox(id, label, placeholder)
  .form-group
    label.control-label.col-sm-4(for=id)= label
    .col-sm-8
      if placeholder
        input.form-control(id=id, type="text", placeholder=placeholder)
      else
        input.form-control(id=id, type="text")

mixin us-general
  #us-general.tab-pane
    h4 General Preferences
    form.form-horizontal(action="javascript:void(0)")
      .form-group
        label.control-label.col-sm-4(for="#us-theme") Theme
        .col-sm-8
          select#us-theme.form-control
            option(value="/css/themes/light.css") Light
            option(value="/css/themes/bootstrap-theme.min.css") Bootstrap
            option(value="/css/themes/slate.css") Slate
            option(value="/css/themes/cyborg.css") Cyborg
            option(value="/css/themes/modern.css") Modern
      .form-group
        label.control-label.col-sm-4(for="#us-layout") Layout
        .col-sm-8
          select#us-layout.form-control
            option(value="default") Compact
            option(value="synchtube") Synchtube (flipped)
            option(value="fluid") Fluid
            option(value="synchtube-fluid") Synchtube + Fluid
            option(value="hd") HD
      .col-sm-4
      .col-sm-8
        p.text-danger Changing layouts may require refreshing to take effect.
      +rcheckbox("us-no-channelcss", "Ignore Channel CSS")
      +rcheckbox("us-no-channeljs", "Ignore Channel Javascript")
      .clear

mixin us-scripts
  #us-scriptcontrol.tab-pane
    h4 Script Access
    table.table
      thead
        tr
          th Channel
          th Type
          th Preference
          th Clear

mixin us-playback
  #us-playback.tab-pane
    h4 Playback Preferences
    form.form-horizontal(action="javascript:void(0)")
      +rcheckbox("us-synch", "Synchronize video playback")
      +textbox("us-synch-accuracy", "Synch threshold (seconds)", "2")
      +rcheckbox("us-wmode-transparent", "Set wmode=transparent")
      .form-group
        .col-sm-4
        .col-sm-8
          p.text-info Setting <code>wmode=transparent</code> allows objects to be displayed above the video player, but may cause performance issues on some systems.
      +rcheckbox("us-hidevideo", "Remove the video player")
      +rcheckbox("us-playlistbuttons", "Hide playlist buttons by default")
      +rcheckbox("us-oldbtns", "Old style playlist buttons")
      .form-group
        label.control-label.col-sm-4(for="#us-default-quality") Quality Preference
        .col-sm-8
          select#us-default-quality.form-control
            option(value="auto") Auto
            option(value="240") 240p
            option(value="360") 360p
            option(value="480") 480p
            option(value="720") 720p
            option(value="1080") 1080p
            option(value="best") Highest Available
      .form-group
        .col-sm-4
        .col-sm-8
          p.text-info Due to technical changes on YouTube's side, the CyTube quality preference can no longer be automatically applied on YouTube videos.  See <a href="https://github.com/calzoneman/sync/issues/726" rel="noopener noreferer" target="_blank">this GitHub issue</a> for details.
      +rcheckbox("us-peertube", "Accept PeerTube embeds automatically")

mixin us-chat
  #us-chat.tab-pane
    h4 Chat Preferences
    form.form-horizontal(action="javascript:void(0)")
      +rcheckbox("us-chat-timestamp", "Show timestamps in chat")
      +rcheckbox("us-sort-rank", "Sort userlist by rank")
      +rcheckbox("us-sort-afk", "Sort AFKers to bottom")
      .col-sm-4
      .col-sm-8
        p.text-info The following 3 options apply to how and when you will be notified if a new chat message is received while CyTube is not the active window.
      .form-group
        label.control-label.col-sm-4(for="#us-blink-title") Blink page title on new messages
        .col-sm-8
          select#us-blink-title.form-control
            option(value="never") Never
            option(value="onlyping") Only when I am mentioned or PMed
            option(value="always") Always
      .form-group
        label.control-label.col-sm-4(for="#us-ping-sound") Notification sound on new messages
        .col-sm-8
          select#us-ping-sound.form-control
            option(value="never") Never
            option(value="onlyping") Only when I am mentioned or PMed
            option(value="always") Always
      .form-group
        label.control-label.col-sm-4(for="#us-notifications") Desktop notifications on new messages
        .col-sm-8
          select#us-notifications.form-control
            option(value="never") Never
            option(value="onlyping") Only when I am mentioned or PMed
            option(value="always") Always
      +rcheckbox("us-sendbtn", "Add a send button to chat")
      +rcheckbox("us-no-emotes", "Disable chat emotes")
      +rcheckbox("us-strip-image", "Remove images from chat")
      .form-group
        label.control-label.col-sm-4(for="#us-chat-tab-method") Tab completion method
        .col-sm-8
          select#us-chat-tab-method.form-control
            option(value="Cycle options") Cycle options
            option(value="Longest unique match") Longest unique match

mixin us-mod
  #us-mod.tab-pane
    h4 Moderator Preferences
    form.form-horizontal(action="javascript:void(0)")
      +rcheckbox("us-modflair", "Show name color")
      +rcheckbox("us-shadowchat", "Show shadowmuted messages")
      +rcheckbox("us-show-ip-in-tooltip", "Show IP addresses in profile tooltip")