{% extends "base-site.html" %}

{% block title %} Commands {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}
    <div id="commandpane">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-profile">
                    <div class="card-header">
                        <h6 class="card-category text-gray">Commands</h6>
                    </div>
                    <div class="card-body">
                        {% if data %}
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="nav nav-pills flex-column" id="commandtabs" role="tablist" aria-orientation="vertical">
                                        {% for cog in cogs %}
                                            <a class="nav-link taboption" id="{{ cog }}-tab" data-toggle="pill" href="#{{ cog }}" role="tab" aria-controls="{{ cog }}" aria-selected="false">{{ cog }}</a>
                                        {% endfor %}
                                    </div>
                                </div>
                                <div class="col-md-10">
                                    <span id="topOfTabContent"></span>
                                    <div class="tab-content" id="myTabContent">
                                        {% for cog in data %}
                                            <div class="tab-pane fade" id="{{ cog['name'] }}" role="tabpanel" aria-labelledby="{{ cog['name'] }}-tab">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                <div class="row">
                                                                    <div class="col-sm-6">
                                                                        <h4 class="card-title">{{ cog['name'] }}</h4>
                                                                        <p>{{ cog['desc'] }}</p>
                                                                    </div>
                                                                    <div class="col-sm-6 text-left">
                                                                        <div class="dropdown float-right">
                                                                            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="prefixdrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                                Prefix
                                                                            </a>

                                                                            <div class="dropdown-menu dropdown-menu-right prefixdiv" aria-labelledby="prefixdrop">
                                                                                {% for p in prefixes %}
                                                                                    <a class="dropdown-item prefix-option {% if loop.index == 1 %} active {% endif %}">{{ p }}</a>
                                                                                {% endfor %}
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="card-body">
                                                                <div class="table-responsive">
                                                                    <table class="table tablesorter">
                                                                        <thead class="text-primary">
                                                                            <tr>
                                                                                <th>Command</th>
                                                                                <th>Description</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            {%- for command in cog['cmds'] recursive %}
                                                                                <tr>
                                                                                <th style="padding-left: {{ loop.depth0 * 40 + 7 }}px">
                                                                                        <code><span class="prefix">{{ prefixes[0] }}</span>{{ command.name }}</code>
                                                                                    </th>
                                                                                    <th>{{ command.desc }}</th>
                                                                                </tr>
                                                                                {%- if command.subs -%}
                                                                                    {{ loop(command.subs) }}
                                                                                {%- endif %}
                                                                            {%- endfor %}
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {%- endfor %}
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <h4 class="card-title">Loading data... Please wait a few seconds then reload</h4>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
    <script>
        $(".prefix-option").click(function() {
            var prefix = $(this).text()
            $('.prefix').text(prefix)

            // Change others to inactive, and the correct ones to active
            $('.prefix-option').removeClass('active')
            var index = $(this).index()
            $(".prefixdiv").each(function(someotherindexidontneed) {
                $(this).children().eq(index).addClass('active')
            })
        })
        $('.taboption').click(function() {
            if ($(document).width() >= 768) {
                var main_panel = document.getElementsByClassName("main-panel")[0]
                main_panel.scrollTop = 0
            } else {
                document.getElementById("topOfTabContent").scrollIntoView()
            }
        })
    </script>
{% endblock javascripts %}