From 10226663bddfb2cea8c6d18420ccee9f847034ef Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Sat, 21 May 2016 20:17:12 -0700
Subject: Adding tabs

---
 ext/bg/options.html | 59 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 39 insertions(+), 20 deletions(-)

(limited to 'ext/bg/options.html')

diff --git a/ext/bg/options.html b/ext/bg/options.html
index 9b8be64b..9dd9959b 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -19,7 +19,8 @@
 
             <div class="options-general">
                 <h2>General</h2>
-                <div class="form-horizontal">
+
+                <form class="form-horizontal">
                     <div class="form-group">
                         <label for="scanLength" class="control-label col-sm-2">Scan length</label>
                         <div class="col-sm-10"><input type="number" value="20" min="1" id="scanLength" class="form-control"></div>
@@ -56,35 +57,53 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                </form>
+
             </div>
 
             <div class="options-anki">
                 <h2>Anki</h2>
 
-                <div class="form-horizontal">
-                    <div class="form-group">
-                        <label class="col-sm-2 control-label">Profile</label>
-                        <div class="col-sm-10">
-                            <label class="radio-inline"><input type="radio" name="ankiProfile" checked>Vocab</label>
-                            <label class="radio-inline"><input type="radio" name="ankiProfile">Kanji</label>
-                        </div>
-                    </div>
+                <form class="form-horizontal">
+                    <ul class="nav nav-tabs">
+                        <li class="active"><a href="#vocab" data-toggle="tab">Vocabulary</a></li>
+                        <li><a href="#kanji" data-toggle="tab">Kanji</a></li>
+                    </ul>
 
-                    <div class="form-group">
-                        <label class="col-sm-2 control-label" for="ankiDeck">Deck</label>
-                        <div class="col-sm-10">
-                            <select class="form-control" id="ankiDeck"></select>
+                    <div class="tab-content">
+                        <div id="vocab" class="tab-pane fade in active">
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label" for="ankiVocabDeck">Deck</label>
+                                <div class="col-sm-10">
+                                    <select class="form-control ankiDeck" id="ankiVocabDeck"></select>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label" for="ankiVocabModel">Model</label>
+                                <div class="col-sm-10">
+                                    <select class="form-control ankiModel" id="ankiVocabModel"></select>
+                                </div>
+                            </div>
                         </div>
-                    </div>
+                        <div id="kanji" class="tab-pane fade">
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label" for="ankiKanjiDeck">Deck</label>
+                                <div class="col-sm-10">
+                                    <select class="form-control ankiDeck" id="ankiKanjiDeck"></select>
+                                </div>
+                            </div>
 
-                    <div class="form-group">
-                        <label class="col-sm-2 control-label" for="ankiModel">Model</label>
-                        <div class="col-sm-10">
-                            <select class="form-control" id="ankiModel"></select>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label" for="ankiKanjiModel">Model</label>
+                                <div class="col-sm-10">
+                                    <select class="form-control ankiModel" id="ankiKanjiModel"></select>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
+                </form>
+
             </div>
 
             <div style="text-align: right;">
-- 
cgit v1.2.3