{% extends "layouts/base.html" %}

{% block title %}
  {{ _("Guild") }} {{ guild.name }}
{% endblock %}

{% block stylesheets %}{% endblock %}

{% block content %}
  <main class="main-content position-relative border-radius-lg">
    <div class="container-fluid">
        <div class="row">
            {% include "pages/guild_profile.html" %}

            <div id="guild-content" class="col-md-8 mt-4">
                <ul class="nav nav-pills position-relative end-0" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link {% if not page or page == "overview" %}show active{% endif %}" id="overview-tab" data-toggle="pill" href="#overview" role="tab" aria-controls="overview" aria-selected="true">
                            <i class="fa fa-map opacity-10" style="vertical-align: -1px;"></i> {{ _("Overview") }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if page and page == "settings" %}show active{% endif %}" id="settings-tab" data-toggle="pill" href="#settings" role="tab" aria-controls="settings" aria-selected="true">
                            <i class="ni ni-settings-gear-65 opacity-10" style="vertical-align: -1.5px;"></i> {{ _("Bot Settings") }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if page and page == "third-parties" %}show active{% endif %}" id="third-parties-tab" data-toggle="pill" href="#third-parties" role="tab" aria-controls="third-parties" aria-selected="true">
                            <i class="ni ni-diamond opacity-10" style="vertical-align: -1.5px;"></i> {{ number_to_text_with_suffix(third_parties|length) }} {% if third_parties|length != 1 %}{{ _("Third Parties") }}{% else %}{{ _("Third Party") }}{% endif %}
                        </a>
                    </li>
                </ul>
                <br />
                <div class="tab-content" id="guild-tabContent">

                    <div class="tab-pane fade {% if not page or page == "overview" %}show active{% endif %}" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                        <div class="card card-chart">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-12 text-left">
                                        <div class="d-flex justify-content-between mb-2">
                                            <h2 class="card-title">{{ _("Overview") }}</h2>
                                        </div>
                                    </div>
                                    <div class="mt-4">

                                        {% if aliases_form %}
                                            <div id="Alias" class="card">
                                                <div class="card-header" id="headingAlias">
                                                    <a class="btn btn-link mb-0" data-toggle="collapse" data-target="#collapseAlias" aria-expanded="true" aria-controls="collapseAlias" style="width: 100%;">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <h4 class="mb-0">{{ _("Alias") }}</h4>
                                                            <h4><i class="fa fa-arrow-circle-o-down"></i></h4>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div id="collapseAlias" class="collapse card-body" aria-labelledby="headingAlias">
                                                    <form action="" method="POST" role="form" enctype="multipart/form-data">
                                                        {{ aliases_form.hidden_tag() }}
                                                        {% for alias_form in aliases_form.aliases.default %}
                                                            <div class="row mb-3">
                                                                {% if loop.index0 > 0 %}
                                                                    <hr class="horizontal dark" />
                                                                {% endif %}
                                                                {{ alias_form.hidden_tag() }}
                                                                <div class="col-md-5">
                                                                    <div class="form-group">
                                                                        {{ alias_form.alias_name(class="form-control form-control-default", placeholder=_("Name")) }}
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-7">
                                                                    <div class="form-group">
                                                                        {{ alias_form.command(rows=4, disable_toolbar=True, class="form-control form-control-default", placeholder=_("Command")) }}
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12 d-flex justify-content-end align-items-center">
                                                                    <a href="javascript:void(0);" onclick="this.parentElement.parentNode.remove();" class="text-danger mr-3"><i class="fa fa-minus-circle"></i> {{ _("Delete Alias") }}</a>
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                        <a href="javascript:void(0);" onclick="createAlias(this);" class="text-success mr-3"><i class="fa fa-plus-circle"></i> {{ _("Create Alias") }}</a>
                                                        <div class="text-center">
                                                            {{ aliases_form.submit(class="btn mb-0 bg-gradient-" + variables["meta"]["color"] + " btn-md w-100 my-4") }}
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        {% endif %}

                                        {% if custom_commands_form %}
                                            <br />
                                            <div id="CustomCommands" class="card">
                                                <div class="card-header" id="headingCustomCommands">
                                                    <a class="btn btn-link mb-0" data-toggle="collapse" data-target="#collapseCustomCommands" aria-expanded="true" aria-controls="collapseCustomCommands" style="width: 100%;">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <h4 class="mb-0">{{ _("CustomCommands") }}</h4>
                                                            <h4><i class="fa fa-arrow-circle-o-down"></i></h4>
                                                        </div>
                                                    </a>
                                                </div>
                                                <div id="collapseCustomCommands" class="collapse card-body" aria-labelledby="headingCustomCommands">
                                                    <form action="" method="POST" role="form" enctype="multipart/form-data">
                                                        {{ custom_commands_form.hidden_tag() }}
                                                        {% for custom_command_form in custom_commands_form.custom_commands.default %}
                                                            <div class="row mb-3">
                                                                {% if loop.index0 > 0 %}
                                                                    <hr class="horizontal dark" />
                                                                {% endif %}
                                                                {{ custom_command_form.hidden_tag() }}
                                                                <div class="col-md-5">
                                                                    <div class="form-group">
                                                                        {{ custom_command_form.command(class="form-control form-control-default", placeholder=_("Command")) }}
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-7">
                                                                    {% for custom_command_response_form in custom_command_form.responses.default %}
                                                                        <div class="form-group">
                                                                            {{ custom_command_response_form.hidden_tag() }}
                                                                            {{ custom_command_response_form.response(rows=3, class="form-control form-control-default", placeholder=_("Response")) }}
                                                                            {% if loop.index0 != 0 %}
                                                                                <a href="javascript:void(0);" onclick="this.parentNode.remove();" class="text-danger mr-3">{{ _("Remove Response") }}</a>
                                                                            {% endif %}
                                                                        </div>
                                                                    {% endfor %}
                                                                </div>
                                                                <div class="col-md-12 d-flex justify-content-end align-items-center">
                                                                    <a href="javascript:void(0);" onclick="addCustomCommandResponse(this);" class="text-primary mr-3">{{ _("Add Response") }}</a>
                                                                </div>
                                                                <div class="col-md-12 d-flex justify-content-end align-items-center">
                                                                    <a href="javascript:void(0);" onclick="this.parentElement.parentNode.remove();" class="text-danger mr-3"><i class="fa fa-minus-circle"></i> {{ _("Delete Custom Command") }}</a>
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                        <a href="javascript:void(0);" onclick="createCustomCommand(this);" class="text-success mr-3"><i class="fa fa-plus-circle"></i> {{ _("Create Custom Command") }}</a>
                                                        <div class="text-center">
                                                            {{ custom_commands_form.submit(class="btn mb-0 bg-gradient-" + variables["meta"]["color"] + " btn-md w-100 my-4") }}
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        {% endif %}

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade {% if page and page == "settings" %}show active{% endif %}" id="settings" role="tabpanel" aria-labelledby="settings-tab">
                        <div class="card card-chart">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-12 text-left">
                                        <div class="d-flex justify-content-between mb-2">
                                            <h2 class="card-title">{{ _("Settings") }}</h2>
                                        </div>
                                    </div>
                                    <div class="mt-4">
                                        <form action="" method="POST" role="form" enctype="multipart/form-data">
                                            {{ guild_settings_form.hidden_tag() }}
                                            <div class="mb-3">
                                                <div class="form-group">
                                                    <label class="form-group-label">{{ guild_settings_form.bot_nickname.label.text }}</label>
                                                    {{ guild_settings_form.bot_nickname(class="form-control form-control-default") }}
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <div class="form-group">
                                                    <label class="form-group-label">{{ guild_settings_form.prefixes.label.text }}</label>
                                                    {{ guild_settings_form.prefixes(class="form-control form-control-default select-choices") }}
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <div class="form-group">
                                                    <label class="form-group-label">{{ guild_settings_form.admin_roles.label.text }}</label>
                                                    {{ guild_settings_form.admin_roles(class="form-control form-control-default") }}
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <div class="form-group">
                                                    <label class="form-group-label">{{ guild_settings_form.mod_roles.label.text }}</label>
                                                    {{ guild_settings_form.mod_roles(class="form-control form-control-default") }}
                                                </div>
                                            </div>
                                            <hr class="horizontal dark" />
                                            <div class="mb-3">
                                                <div class="form-check form-switch ps-0">
                                                    {{ guild_settings_form.ignored(class="form-check-input ms-0", type="checkbox") }}
                                                    <label class="form-check-label">{{ guild_settings_form.ignored.label.text }}</label>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <div class="form-group">
                                                    <label class="form-group-label">{{ guild_settings_form.disabled_commands.label.text }}</label>
                                                    {{ guild_settings_form.disabled_commands(class="form-control form-control-default") }}
                                                </div>
                                            </div>
                                            <hr class="horizontal dark" />
                                            <div class="row mb-1">
                                                <div class="col-sm-6">
                                                    <div class="form-check form-switch ps-0">
                                                        {{ guild_settings_form.embeds(class="form-check-input ms-0", type="checkbox") }}
                                                        <label class="form-check-label">{{ guild_settings_form.embeds.label.text }}</label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-check form-switch ps-0">
                                                        {{ guild_settings_form.use_bot_color(class="form-check-input ms-0", type="checkbox") }}
                                                        <label class="form-check-label">{{ guild_settings_form.use_bot_color.label.text }}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mb-1">
                                                <div class="col-sm-6">
                                                    <div class="form-check form-switch ps-0">
                                                        {{ guild_settings_form.fuzzy(class="form-check-input ms-0", type="checkbox") }}
                                                        <label class="form-check-label">{{ guild_settings_form.fuzzy.label.text }}</label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label class="form-group-label">{{ guild_settings_form.delete_delay.label.text }}</label>
                                                        {{ guild_settings_form.delete_delay(class="form-control form-control-default") }}
                                                    </div>
                                                </div>
                                            </div>
                                            <hr class="horizontal dark" />
                                            <div class="row mb-1">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label class="form-group-label">{{ guild_settings_form.locale.label.text }}</label>
                                                        {{ guild_settings_form.locale(class="form-control form-control-default") }}
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label class="form-group-label">{{ guild_settings_form.regional_format.label.text }}</label>
                                                        {{ guild_settings_form.regional_format(class="form-control form-control-default") }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-center">
                                                {{ guild_settings_form.submit(class="btn mb-0 bg-gradient-" + variables["meta"]["color"] + " btn-md w-100 my-4") }}
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade {% if page and page == "third-parties" %}show active{% endif %}" id="third-parties" role="tabpanel" aria-labelledby="third-parties-tab">
                        {% include "pages/third_parties/third_parties_list.html" %}
                    </div>

                </div>
            </div>
        </div>
    </div>
  </main>
{% endblock %}

{% block javascripts %}
    <script>
        function changePage(page) {
            var tab_nav_link = document.querySelector("#" + page + "-tab");
            if (tab_nav_link) {
                tab_nav_link.parentElement.parentElement.onmouseover(tab_nav_link);
                tab_nav_link.click();
            }
        }
        {% if page %}
            document.addEventListener("DOMContentLoaded", function() {
                changePage("{{ page }}");
            });
        {% endif %}
    </script>
    <script>
        window.onload = function() {
          resize_event = new Event("resize");
          window.dispatchEvent(resize_event);
        }
    </script>
    <script>
        function changePage(tab_name) {
            var tab_nav_link = document.querySelector("#" + tab_name + "-tab");
            if (tab_nav_link) {
            tab_nav_link.parentElement.parentElement.onmouseover(tab_nav_link);
            tab_nav_link.click();
            }
        }
        {% if tab_name %}
            document.addEventListener("DOMContentLoaded", function() {
            setTimeout(function() {
                changePage("{{ tab_name }}");
            }, 500);
            });
        {% endif %}
    </script>
    <script>
        $('#guild-content a[data-toggle="pill"]').on("shown.bs.tab", function (e) {
            var base_url = '{{ url_for("base_blueprint.dashboard_guild", guild_id=guild.id) }}';
            var target_id = e.target.id.slice(0, -4);
            if (target_id == "third-parties") {
                resize_event = new Event("resize");
                window.dispatchEvent(resize_event);
            }
            if (!["overview", "settings", "third-parties"].includes(target_id)) {
                target_id = "third-parties/" + target_id;
            }
            if (target_id == "overview") {
                var new_url = base_url;
            } else {
                var new_url = base_url + "/" + target_id;
            }
            if (!(window.location.pathname.startsWith(new_url)) || (target_id == "overview" && !(window.location.pathname == base_url))) {
                // window.location.pathname = new_url;
                window.history.pushState({}, "", new_url);
            }
        })
    </script>
    {% if aliases_form %}
        <script>
            var alias_index = {{ aliases_form.aliases.default|length }} - 1;
            function createAlias(element) {
                var newRow = document.createElement("div");
                newRow.classList.add("row", "mb-3");
                alias_index += 1;
                if (document.querySelectorAll("#collapseAlias .row").length != 0) {
                    var horizontal = '<hr class="horizontal dark" />\n';
                } else {
                    var horizontal = "";
                }
                newRow.innerHTML = horizontal + `
                    <input id="aliases_form_aliases-${alias_index}-csrf_token" name="aliases_form_aliases-${alias_index}-csrf_token" type="hidden" value="{{ csrf_token() }}">
                    <div class="col-md-5">
                        <div class="form-group">
                            <input class="form-control form-control-default" id="aliases_form_aliases-${alias_index}-alias_name" maxlength="300" name="aliases_form_aliases-${alias_index}-alias_name" required type="text" value="" placeholder="{{ _("Name") }}">
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="form-group">
                            <textarea class="form-control form-control-default markdown-text-area-field markdown-text-area-field-toolbar-disabled" id="aliases_form_aliases-${alias_index}-command" maxlength="1700" name="aliases_form_aliases-${alias_index}-command" required rows="4" placeholder="{{ _("Command") }}"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12 d-flex justify-content-end align-items-center">
                        <a href="javascript:void(0);" onclick="this.parentElement.parentNode.remove();" class="text-danger mr-3"><i class="fa fa-minus-circle"></i> {{ _("Delete Alias") }}</a>
                    </div>
                `
                element.parentNode.insertBefore(newRow, element);
                MarkdownField(document.getElementById(`aliases_form_aliases-${alias_index}-command`));
                document.getElementById(`aliases_form_aliases-${alias_index}-alias_name`).focus();
            }
        </script>
    {% endif %}
    {% if custom_commands_form %}
        <script>
            var custom_command_index = {{ custom_commands_form.custom_commands.default|length }} - 1;
            function createCustomCommand(element) {
                var newRow = document.createElement("div");
                newRow.classList.add("row", "mb-3");
                custom_command_index += 1;
                if (document.querySelectorAll("#collapseCustomCommands .row").length != 0) {
                    var horizontal = '<hr class="horizontal dark" />\n';
                } else {
                    var horizontal = "";
                }
                newRow.innerHTML = horizontal + `
                    <input id="custom_commands_form_custom_commands-${custom_command_index}-csrf_token" name="custom_commands_form_custom_commands-${custom_command_index}-csrf_token" type="hidden" value="{{ csrf_token() }}">
                    <div class="col-md-5">
                        <div class="form-group">
                            <input class="form-control form-control-default" id="custom_commands_form_custom_commands-${custom_command_index}-command" maxlength="300" name="custom_commands_form_custom_commands-${custom_command_index}-command" required type="text" value="" placeholder="{{ _("Command") }}">
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="form-group">
                            <input id="custom_commands_form_custom_commands-${custom_command_index}-responses-1-csrf_token" name="custom_commands_form_custom_commands-${custom_command_index}-responses-1-csrf_token" type="hidden" value="{{ csrf_token() }}">
                            <textarea class="form-control form-control-default markdown-text-area-field" id="custom_commands_form_custom_commands-${custom_command_index}-responses-1-response" maxlength="2000" name="custom_commands_form_custom_commands-${custom_command_index}-responses-1-response" required rows="3" placeholder="{{ _("Response") }}"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12 d-flex justify-content-end align-items-center">
                        <a href="javascript:void(0);" onclick="addCustomCommandResponse(this);" class="text-primary mr-3">{{ _("Add Response") }}</a>
                    </div>
                    <div class="col-md-12 d-flex justify-content-end align-items-center">
                        <a href="javascript:void(0);" onclick="this.parentElement.parentNode.remove();" class="text-danger mr-3"><i class="fa fa-minus-circle"></i> {{ _("Delete Custom Command") }}</a>
                    </div>
                `
                element.parentNode.insertBefore(newRow, element);
                MarkdownField(document.getElementById(`custom_commands_form_custom_commands-${custom_command_index}-responses-1-response`));
                document.getElementById(`custom_commands_form_custom_commands-${custom_command_index}-command`).focus();
            }
            function addCustomCommandResponse(element) {
                var custom_command_index = element.parentElement.parentElement.querySelector('input[type="hidden"]').id.split("-")[1];
                var responses = element.parentElement.parentElement.querySelectorAll('.col-md-7 input[type="hidden"]');
                var response_index = parseInt(responses[responses.length - 1].id.split("-")[3]) + 1;
                var newRow = document.createElement("div");
                newRow.classList.add("form-group");
                newRow.innerHTML = `
                    <input id="custom_commands_form_custom_commands-${custom_command_index}-responses-${response_index}-csrf_token" name="custom_commands_form_custom_commands-${custom_command_index}-responses-${response_index}-csrf_token" type="hidden" value="{{ csrf_token() }}">
                    <textarea class="form-control form-control-default markdown-text-area-field" id="custom_commands_form_custom_commands-${custom_command_index}-responses-${response_index}-response" maxlength="2000" name="custom_commands_form_custom_commands-${custom_command_index}-responses-${response_index}-response" required rows="3" placeholder="{{ _("Response") }}"></textarea>
                    <a href="javascript:void(0);" onclick="this.parentElement.remove();" class="text-danger mr-3">{{ _("Remove Response") }}</a>
                `
                element.parentElement.parentElement.querySelector(".col-md-7").appendChild(newRow);
                var addedElement = document.getElementById(`custom_commands_form_custom_commands-${custom_command_index}-responses-${response_index}-response`);
                MarkdownField(addedElement);
                addedElement.nextElementSibling.querySelector(".CodeMirror-code").focus();
            }
        </script>
    {% endif %}
{% endblock %}
