{% 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 {% if loop.index == 1 %} active {% endif %}"
                                    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 {% if loop.index == 1 %} show active {% endif %}"
                                    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-8">
                                                            <h4 class="card-title">{{ cog['name'] }}</h4>
                                                            <p>{{ cog['desc'] }}</p>
                                                            <p>{{ (_('Author: {author}')).format(author=cog['author']) }}
                                                            </p>
                                                            <p>{{ (_('Repo: {repo}')).format(repo=cog['repo']) }}</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">
                                                    <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>
                                {%- 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 %}