{% extends 'settings/account/master.twig' %}

{% set mode = 'Ranks' %}

{% block description %}
    <p>Manage what ranks you're in and what is set as your main rank. Your main rank is highlighted. You get the permissions of all of the ranks you're in combined.</p>
{% endblock %}

{% block js %}
    <script>
        function yuunoRankProtected() {
            var confirm = new Sakura.Dialogue;
            confirm.Title = "Ranks";
            confirm.Text = "You aren't allowed to remove this rank from your account!";
            confirm.Display();
        }

        function yuunoRankSwitch(id, csrf) {
            // not really that much of an impactful action so just proxy
            yuunoRankDo(id, csrf, 'main');
        }

        function yuunoRankRemove(id, csrf, name) {
            var confirm = new Sakura.Dialogue;

            confirm.SetType(Sakura.DialogueType.ConfirmNegative);
            confirm.Title = "Ranks";
            confirm.Text = "You are about to remove the rank '" + name + "' from your account. Are you sure about this?";

            confirm.AddCallback(Sakura.DialogueButton.Yes, function () {
                this.Close();
                yuunoRankDo(id, csrf, 'remove');
            });

            confirm.Display();
        }

        function yuunoRankDo(id, csrf, mode) {
            var ajax = new Sakura.AJAX,
                formData = new FormData;

            formData.append('rank', id);
            formData.append('mode', mode);
            formData.append('session', csrf);

            ajax.SetUrl("{{ route('settings.account.ranks') }}");
            ajax.SetFormData(formData);

            ajax.AddCallback(200, function () {
                var result = ajax.JSON();

                if (result.error) {
                    var error = new Sakura.Dialogue;
                    error.Title = "Ranks";
                    error.Text = result.error;
                    error.SetType(Sakura.DialogueType.Info);
                    error.Display();
                } else if (mode === 'remove') {
                    Sakura.DOM.Remove(Sakura.DOM.ID('rank-' + id));
                } else if (mode === 'main') {
                    Sakura.DOM.RemoveClass(document.querySelector('.friend-box--active'), ['friend-box--active']);
                    Sakura.DOM.AddClass(Sakura.DOM.ID('rank-' + id), ['friend-box--active']);
                }
            });

            ajax.Start(Sakura.HTTPMethod.POST);
        }
    </script>
{% endblock %}

{% block settingsContent %}
    <div style="text-align: center">
        {% for rank in user.ranks %}
            <div class="friend-box {% if rank.id == user.mainRankId %}friend-box--active{% endif %}" id="rank-{{ rank.id }}">
                <button class="friend-box__container" onclick="yuunoRankSwitch({{ rank.id }}, '{{ session_id() }}')">
                    <div class="friend-box__name" style="color: {{ rank.colour }}">{{ rank.name }}</div>
                </button>
                <div class="friend-box__actions">
                    <button
                        title="{% if rank.id in locked %}You can't leave this rank{% else %}Leave rank{% endif %}"
                        class="friend-box__action friend-box__action--red fa fa-{% if rank.id in locked %}shield{% else %}remove{% endif %}"
                        name="mode"
                        value="remove"
                        onclick="{% if rank.id in locked %}yuunoRankProtected(){% else %}yuunoRankRemove({{ rank.id }}, '{{ session_id() }}', '{{ rank.name }}'){% endif %}"
                    ></button>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}