.navbar.navbar-default.navbar-fixed-top(role="navigation")
  .container
    .navbar-header
      %button.navbar-toggle(type="button")
        %span.sr-only Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      %a.navbar-brand(href="#" data-move-to="top") Narou.rb WEB UI
    .navbar-collapse.collapse
      %ul.nav.navbar-nav
        %li.dropdown
          %a.dropdown-toggle(data-toggle="dropdown" href="#")
            表示
            %span.caret
          %ul.dropdown-menu(role="menu")
            %li#action-view-all
              %a(href="#") 全ての項目を表示
            %li#action-view-setting
              %a(href="#") 表示する項目を設定
            %li.divider
            %li#action-view-without-frozen.active
              %a(href="#")
                %span
                  %span.active-ok.glyphicon.glyphicon-ok
                  凍結中以外を表示
            %li#action-view-frozen.active
              %a(href="#")
                %span
                  %span.active-ok.glyphicon.glyphicon-ok
                  凍結中を表示
            %li.divider
            %li#action-view-reset
              %a(href="/") 表示設定を全てリセット
        %li.dropdown
          %a.dropdown-toggle(data-toggle="dropdown" href="#")
            選択
            %span#badge-number-of-selecting.badge 0
            %span.caret
          %ul#dropdown-menu-select.dropdown-menu(role="menu")
            %li#action-select-view
              %a(href="#")
                %span 表示されている小説を選択
                %span.shortcut Ctrl+A
            %li#action-select-all
              %a(href="#")
                %span 全ての小説を選択
                %span.shortcut Shift+A
            %li#action-select-clear
              %a(href="#")
                %span 選択を全て解除
                %span.shortcut ESC
            %li.divider
            %li#action-select-mode-single
              %a(href="#")
                %span
                  %span.active-ok.glyphicon.glyphicon-ok
                  シングル選択モード
                %span.shortcut S
            %li#action-select-mode-rect
              %a(href="#")
                %span
                  %span.active-ok.glyphicon.glyphicon-ok
                  範囲選択モード
                %span.shortcut R
        %li
          %a.dropdown-toggle(data-toggle="dropdown" href="#")
            タグ
            %span.caret
          %ul.dropdown-menu(role="menu")
            %li
              #tag-list-canvas
            %li.divider
            %li#action-tag-edit.enable-selected
              %a(href="#")
                %span
                  選択した小説のタグを編集
      %ul.nav.navbar-nav.navbar-right
        %li.dropdown
          %a.dropdown-toggle(data-toggle="dropdown" href="#")
            %span.glyphicon.glyphicon-cog.hidden-xs
            %span.visible-xs-inline
              オプション
            %span.caret
          %ul.dropdown-menu(role="menu")
            %li#action-option-settings
              %a(href="/settings")
                %span
                  %span.glyphicon.glyphicon-wrench
                  環境設定
            %li.divider
            %li#action-option-help
              %a(href="/help")
                %span
                  %span.glyphicon.glyphicon-question-sign
                  ヘルプ
            %li#action-option-about
              %a(href="#")
                %span
                  %span.glyphicon.glyphicon-info-sign
                  Narou.rb について
            %li.divider
            %li#action-option-server-shutdown
              %a(href="#")
                %span
                  %span.glyphicon.glyphicon-off
                  サーバをシャットダウン
      %p#queue-text.navbar-text.navbar-right(data-toggle="tooltip" title="キューに積まれた処理の数")
        %span.glyphicon.glyphicon-inbox
        %span#queue 0
      .navbar-form.navbar-right(role="search")
        .form-group
          .input-group
            %span#myFilter-search-icon.glyphicon.glyphicon-search
            %input#myFilter.form-control(placeholder="Filter" type="text")/
            %span#myFilter-clear.glyphicon.glyphicon-remove-circle

.container.container-main.theme-showcase(role="main")
  -# 初めて表示した時のメッセージ
  - if @is_first_access
    .alert.alert-info.fade.in(role="alert")
      %button.close(type="button" data-dismiss="alert")
        %span(aria-hidden="true") ×
        %span.sr-only Close
      %h2 Welcome
      %p 最初に簡単な操作説明があるヘルプをご覧下さい。なお、このメッセージは今回のみ表示されます。
      %p(style="margin-top:20px")
        %a.btn.btn-primary(href="/help" role="button") ヘルプを見る »

  -# コンソール
  #console-container
    #console.console
    #console-buttons.console-buttons
      %span.console-trash.glyphicon.glyphicon-trash(data-toggle="tooltip" title="ログと履歴を削除")
      %span.console-expand
        %span.glyphicon.glyphicon-resize-full(data-toggle="tooltip" title="拡大")
        %span.glyphicon.glyphicon-resize-small.hide(data-toggle="tooltip" title="縮小")

  -# 操作パネル
  #control-panel
    .btn-group
      %button#button-download.btn.btn-primary(type="button" data-toggle="tooltip" |
                              title="新規ダウンロード") Download |
      %button.btn.btn-primary.dropdown-toggle(type="button" data-toggle="dropdown")
        %span.caret
        %span.sr-only Toggle Dropdown
      %ul.dropdown-menu(role="menu")
        %li
          %a#button-download-force(href="#") 選択した小説を強制再ダウンロード
    .btn-group
      %button#button-update.btn.btn-success(type="button") Update
    .btn-group
      %button#button-send.btn.btn-warning(type="button") Send
    .btn-group
      %button.btn.btn-info.dropdown-toggle.enable-selected(type="button" data-toggle="dropdown")
        Freeze
        %span.caret
        %span.sr-only Toggle Dropdown
      %ul.dropdown-menu(role="menu")
        %li
          %a#button-freeze-on(href="#") 選択した小説を凍結
        %li
          %a#button-freeze-off(href="#") 選択した小説の凍結を解除
    .btn-group
      %button.btn.btn-danger.dropdown-toggle.enable-selected(type="button" data-toggle="dropdown")
        Remove
        %span.caret
        %span.sr-only Toggle Dropdown
      %ul.dropdown-menu(role="menu")
        %li
          %a#button-remove(href="#") 選択した小説を削除
        %li
          %a#button-remove-with-file(href="#") 選択した小説をファイルも含めて削除
    %button#button-convert.btn.btn-default.enable-selected(type="button" data-toggle="tooltip" |
                            title="選択した小説を変換") Convert |
    .btn-group
      %button.btn.btn-default.dropdown-toggle.enable-selected(type="button" data-toggle="dropdown")
        Other
        %span.caret
        %span.sr-only Toggle Dropdown
      %ul.dropdown-menu(role="menu")
        %li
          %a#button-diff(href="#") 選択した小説の最新の差分を表示(diff)
        %li
          %a#button-inspect(href="#") 選択した小説の調査状況ログを表示(inspect)
        %li
          %a#button-folder(href="#") 選択した小説の保存フォルダを開く(folder)
        %li
          %a#button-backup(href="#") 選択した小説のバックアップを作成(backup)

  -# 小説の一覧テーブル
  %div
    %table#novel-list.dataTable.table.table-bordered(cellspacing="0" width="100%")
      %thead

-# 範囲選択後に表示するメニュー
%ul#rect-select-menu.dropdown-menu(role="menu")
  %li#rect-select-menu-select
    %a(href="#") 選択
  %li#rect-select-menu-clear
    %a(href="#") 解除
  %li#rect-select-menu-reverse
    %a(href="#") 反転
  %li#rect-select-menu-cancel
    %a(href="#") キャンセル

-# 個別メニュー
%ul#context-menu.dropdown-menu(role="menu")
  %li#context-menu-setting
    %a(href="#") 小説の変換設定
  %li#context-menu-update
    %a(href="#") 更新
  %li#context-menu-send
    %a(href="#") 送信
  %li#context-menu-freeze-toggle
    %a(href="#") 凍結 or 解凍
  %li#context-menu-remove
    %a(href="#") 削除
  %li#context-menu-remove-with-file
    %a(href="#") 完全に削除
  %li#context-menu-convert
    %a(href="#") 変換
  %li#context-menu-diff
    %a(href="#" data-move-to="top") 差分表示
  %li#context-menu-inspect
    %a(href="#") 調査状況ログを表示
  %li#context-menu-folder
    %a(href="#") 保存フォルダを開く
  %li#context-menu-backup
    %a(href="#") バックアップを作成

-# 個別表示用コンソール
#console-dialog.modal.fade(tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true")
  .modal-dialog
    .modal-content
      .modal-header
        %button(type="button" class="close" data-dismiss="modal")
          %span(aria-hidden="true") ×
          %span.sr-only Close
        %h4.modal-title サブコンソール
      .modal-body
        #each-console.console
      .modal-footer
        %button.btn.btn-primary(type="button" data-dismiss="modal") 閉じる