<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Yomichan Options</title>
        <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
        <style>
            .options-anki {
                display: none;
            }

            .tab-content {
                border-bottom: 1px #ddd solid;
                border-left:   1px #ddd solid;
                border-right:  1px #ddd solid;
                padding:       10px;
            }

            .error-dlg {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <h1>Yomichan <small>Options</small></h1>
            </div>

            <div class="options-general">
                <h2>General</h2>

                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="scan-length" class="control-label col-sm-2">Scan length</label>
                        <div class="col-sm-10"><input type="number" min="1" id="scan-length" class="form-control"></div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label class="control-label"><input type="checkbox" id="activate-on-startup"> Activate on startup</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label class="control-label"><input type="checkbox" id="load-enamdict"> Load <a href="http://www.edrdg.org/enamdict/enamdict_doc.html">ENAMDICT</a> (requires restart)</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label class="control-label"><input type="checkbox" id="select-matched-text"> Select matched text</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label class="control-label"><input type="checkbox" id="enable-anki-connect"> Enable <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a></label>
                            </div>
                        </div>
                    </div>
                </form>

            </div>

            <div class="options-anki">
                <h2>Anki</h2>

                <div class="alert alert-danger error-dlg error-dlg-connection">
                    <strong>Unable to connect</strong>: is the <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a> extension for <a href="http://ankisrs.net/">Anki</a> installed and running?
                </div>
                <div class="alert alert-warning error-dlg error-dlg-version">
                    <strong>Unsupported version</strong>: the installed version of the <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a> extension for <a href="http://ankisrs.net/">Anki</a> is not compatible with this release.
                </div>

                <form class="form-horizontal options-anki-controls">
                    <div class="form-group">
                        <label for="anki-card-tags" class="control-label col-sm-2">Card tags</label>
                        <div class="col-sm-10"><input type="text" id="anki-card-tags" class="form-control"></div>
                    </div>

                    <ul class="nav nav-tabs col-sm-offset-2 col-sm-10">
                        <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="tab-content col-sm-offset-2 col-sm-10">
                        <div id="vocab" class="tab-pane fade in active">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="anki-vocab-deck">Deck</label>
                                <div class="col-sm-10">
                                    <select class="form-control anki-deck" id="anki-vocab-deck"></select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="anki-vocab-model">Model</label>
                                <div class="col-sm-10">
                                    <select class="form-control anki-model" id="anki-vocab-model"></select>
                                </div>
                            </div>

                            <table class="table table-bordered anki-fields">
                                <thead>
                                    <tr>
                                        <th>Field</th>
                                        <th>Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                            <p>Supported field tags: <code>{expression}</code>, <code>{reading}</code>, <code>{glossary}</code></p>
                        </div>

                        <div id="kanji" class="tab-pane fade">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="anki-kanji-deck">Deck</label>
                                <div class="col-sm-10">
                                    <select class="form-control anki-deck" id="anki-kanji-deck"></select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="anki-kanji-model">Model</label>
                                <div class="col-sm-10">
                                    <select class="form-control anki-model" id="anki-kanji-model"></select>
                                </div>
                            </div>

                            <table class="table table-bordered anki-fields">
                                <thead>
                                    <tr>
                                        <th>Field</th>
                                        <th>Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                            <p>Supported field tags: <code>{character}</code>, <code>{onyomi}</code>, <code>{kunyomi}</code>, <code>{glossary}</code></p>
                        </div>
                    </div>
                </form>

            </div>

            <div style="text-align: right;">
                <small><a href="https://foosoft.net/projects/yomichan-chrome">Homepage</a> &bull; <a href="legal.html">Legal</a></small>
            </div>
        </div>

        <script src="../lib/jquery-2.2.2.min.js"></script>
        <script src="../lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
        <script src="js/polyfill-gecko.js"></script>
        <script src="js/options.js"></script>
        <script src="js/options-form.js"></script>
    </body>
</html>