{{template "main" .}}
{{define "content"}}
    <div class="container-fluid no-padding">
        <div class="row no-margin">
            <div class="col-12 no-padding">
                <ul class="nav nav-pills nav-fill" id="nav">
                    <li class="nav-item">
                        <a class="nav-link no-radius" href="#pane-keyboard">KEYBOARD</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link no-radius" href="#pane-i3">I3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link no-radius" href="#pane-pointer">MOUSE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link no-radius" href="#pane-media">MEDIA</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link no-radius" href="#pane-desktop">DESKTOP</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link no-radius btn-fullscreen" data-target="html" href="#">💻</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div id="pane-keyboard" class="pane">
            <div class="row">
                <div class="col-12">
                    <p class="legend">Live text</p>
                </div>
                <div class="form-group col-12">
                    <input type="text" class="form-control live-text" name="text">
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p class="legend">TEXT</p>
                </div>
                <div class="form-group col-6">
                    <input type="text" class="form-control" id="text">
                </div>
                <div class="col-6">
                    <button type="button" id="text-send" class="btn btn-primary">Send</button>
                    <button type="button" id="text-clear" class="btn btn-secondary">Clear</button>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p class="legend">Keys</p>
                </div>
                <div class="col-12">
                    <button type="button" data-msg='{"type":"key","value":"left"}' class="btn btn-secondary">←</button>
                    <button type="button" data-msg='{"type":"key","value":"up"}' class="btn btn-secondary">↑</button>
                    <button type="button" data-msg='{"type":"key","value":"down"}' class="btn btn-secondary">↓</button>
                    <button type="button" data-msg='{"type":"key","value":"right"}' class="btn btn-secondary">→</button>
                </div>
                <div class="line col-12"></div>
                <div class="col-12">
                    <button type="button" data-msg='{"type":"key","value":"escape"}' class="btn btn-secondary">Escape</button>
                    <button type="button" data-msg='{"type":"key","value":"tab"}' class="btn btn-secondary">TAB</button>
                    <button type="button" data-msg='{"type":"key","value":"backspace"}' class="btn btn-secondary">Backspace</button>
                    <button type="button" data-msg='{"type":"key","value":"enter"}' class="btn btn-secondary">Enter</button>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p class="legend">Shortcuts</p>
                </div>
                <div class="col-9" id="shortcuts_special_keys">
                    <label class="btn btn-secondary" for="shortcuts_special_key_ctrl">
                        <input type="checkbox" value="ctrl" id="shortcuts_special_key_ctrl">
                        ctrl
                    </label>
                    <label class="btn btn-secondary" for="shortcuts_special_key_shift">
                        <input type="checkbox" value="shift" id="shortcuts_special_key_shift">
                        shift
                    </label>
                    <label class="btn btn-secondary" for="shortcuts_special_key_alt">
                        <input type="checkbox" value="alt" id="shortcuts_special_key_alt">
                        alt
                    </label>
                    <label class="btn btn-secondary" for="shortcuts_special_key_win">
                        <input type="checkbox" value="win" id="shortcuts_special_key_win">
                        win
                    </label>
                </div>
                <div class="form-group col-3">
                    <input type="text" id="shortcut-key" class="form-control" name="shortcuts_char">
                </div>
                <div class="col-12">
                    <button type="button" id="shortcut-send" class="btn btn-primary">Send</button>
                    <button type="button" id="shortcut-clear" class="btn btn-secondary">Clear</button>
                </div>
            </div>
        </div>

        <div id="pane-i3" class="pane">
            <div class="row">
                <div class="col-12">
                    <p class="legend">Workspaces</p>
                </div>
                <div class="col-12">
                    <button type="button" data-msg='{"type":"workspace","value":"1. IRC"}' class="btn btn-secondary btn-sm">1. IRC</button>
                    <button type="button" data-msg='{"type":"workspace","value":"2. WWW"}' class="btn btn-secondary btn-sm">2. WWW</button>
                    <button type="button" data-msg='{"type":"workspace","value":"3. MAIL"}' class="btn btn-secondary btn-sm">3. MAIL</button>
                    <button type="button" data-msg='{"type":"workspace","value":"6. MEDIA"}' class="btn btn-secondary btn-sm">6. MEDIA</button>
                    <button type="button" data-msg='{"type":"workspace","value":"7. WORK"}' class="btn btn-secondary btn-sm">7. WORK</button>
                    <button type="button" data-msg='{"type":"workspace","value":"8. VM"}' class="btn btn-secondary btn-sm">8. VM</button>
                </div>
                <div class="col-12">
                    <button type="button" data-msg='{"type":"workspace","value":"4"}' class="btn btn-secondary btn-sm">4</button>
                    <button type="button" data-msg='{"type":"workspace","value":"5"}' class="btn btn-secondary btn-sm">5</button>
                    <button type="button" data-msg='{"type":"workspace","value":"9"}' class="btn btn-secondary btn-sm">9</button>
                    <button type="button" data-msg='{"type":"workspace","value":"10"}' class="btn btn-secondary btn-sm">10</button>
                    <button type="button" data-msg='{"type":"workspace","value":"11"}' class="btn btn-secondary btn-sm">11</button>
                    <button type="button" data-msg='{"type":"workspace","value":"12"}' class="btn btn-secondary btn-sm">12</button>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p class="legend">Software</p>
                </div>
                <div class="col-12">
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"keys","value":"win,d"},{"type":"text","value":"urxvt"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">urxvt</button>
                    <button type="button" data-msg='{"type":"keys","value":"win,d"}' class="btn btn-secondary">dmenu</button>
                </div>

                <div class="col-12">
                    <p class="legend">UI</p>
                </div>
                <div class="col-12">
                    <button type="button" data-msg='{"type":"keys","value":"win,z"}' class="btn btn-secondary">win+z</button>
                    <button type="button" data-msg='{"type":"keys","value":"win,x"}' class="btn btn-secondary">win+x</button>
                    <button type="button" data-msg='{"type":"keys","value":"win,c"}' class="btn btn-secondary">win+c</button>
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"zp"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">zp</button>
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"zm"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">zm</button>
                </div>
                <div class="line col-12"></div>
                <div class="col-12">
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"keys","value":"win,d"},{"type":"text","value":"no-screensaver"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">no-screensaver[on]</button>
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"keys","value":"win,d"},{"type":"text","value":"pkill no-screensaver"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">no-screensaver[off]</button>
                </div>

                <div class="col-12">
                    <p class="legend">Movie</p>
                </div>
                <div class="col-12">
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"v;mll"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">v;mll</button>
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"rt -l"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">rt -l</button>
                </div>
                <div class="line col-12"></div>
                <div class="col-12">
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"mug"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">mug</button>
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"mup"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">mup</button>
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"mug 1"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">mug 1</button>
                    <button type="button" data-msg='{"type":"messages","value":[{"type":"text","value":"mup 1"},{"type":"key","value":"enter"}]}' class="btn btn-secondary">mup 1</button>
                </div>
            </div>
        </div>

        <div class="row pane" id="pane-pointer">
            <div class="form-group col-12">
                <input type="text" class="form-control live-text" placeholder="Live text" name="text">
            </div/>
            <div id="scrollbar"></div>
            <div id="pointer"></div>
            <div id="pointer-buttons">
                <button type="button" data-msg='{"type":"pointer","click":"left"}' class="btn btn-primary no-radius col-5">&nbsp;</button><button type="button no-margin" data-msg='{"type":"pointer","click":"middle"}' class="btn btn-secondary no-radius col-2">&nbsp;</button><button type="button no-margin" data-msg='{"type":"pointer","click":"right"}' class="btn btn-primary no-radius col-5">&nbsp;</button>
            </div>
        </div>

        <div class="row pane" id="pane-media">
            <div class="col-12">
                <p class="legend">Spotify</p>
            </div>
            <div class="col-12">
                <button type="button" data-msg='{"type":"media","value":"playpause"}' class="btn btn-secondary">Play/Pause</button>
                <button type="button" data-msg='{"type":"media","value":"next"}' class="btn btn-secondary">Next</button>
                <button type="button" data-msg='{"type":"media","value":"prev"}' class="btn btn-secondary">Previous</button>
            </div>
            <div class="col-12">
                <p class="legend">Volume</p>
            </div>
            <div class="col-12">
                <button type="button" data-msg='{"type":"volume","value":"0"}' class="btn btn-secondary">0%</button>
                <button type="button" data-msg='{"type":"volume","value":"25"}' class="btn btn-secondary">25%</button>
                <button type="button" data-msg='{"type":"volume","value":"50"}' class="btn btn-secondary">50%</button>
                <button type="button" data-msg='{"type":"volume","value":"75"}' class="btn btn-secondary">75%</button>
                <button type="button" data-msg='{"type":"volume","value":"100"}' class="btn btn-secondary">100%</button>
            </div>
            <div class="line col-12"></div>
            <div class="col-12">
                <button type="button" data-msg='{"type":"volume","value":"down"}' class="btn btn-secondary">-</button>
                <button type="button" data-msg='{"type":"volume","value":"up"}' class="btn btn-secondary">+</button>
            </div>
        </div>
        <div class="row pane" id="pane-desktop">
            <div class="col-12">
                <p class="legend">Desktop</p>
            </div>
            <div class="col-12">
                <button type="button" data-msg='{"type":"screenshot","quality":"hq"}' class="btn btn-sm btn-secondary">Screenshot HQ</button>
                <button type="button" data-msg='{"type":"screenshot","quality":"lq"}' class="btn btn-sm btn-secondary">Screenshot LQ</button>
                <button type="button" id="live-hq" class="btn btn-sm btn-secondary">Live HQ</button>
                <button type="button" id="live-lq" class="btn btn-sm btn-secondary">Live LQ</button>
                <div id="screenshot"><img class="btn-fullscreen" data-target="#screenshot img" src="data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIJDjc3srQk8gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADElEQVQI12P48+cPAAXsAvVTWDc6AAAAAElFTkSuQmCC"></div>
            </div>
            <div class="col-12">
            </div>
        </div>
    </div>
{{end}}