<div id="profile" class="card card-body col-md-3 mt-4 align-items-center" style="margin-left: 10px; margin-right: 10px;">
    <div {% if False %}class="row"{% endif %}>
        <br />
        <div class="col-sm-auto col-4 text-center">
            <div class="avatar avatar-xl"><img src={% if guild.icon_animated %}"{{ guild.icon_url[:-3] + "png" }}" onmouseover='this.src = this.src.slice(0, -3) + "gif";' onmouseout='this.src = this.src.slice(0, -3) + "png";'{% else %}"{{ guild.icon_url }}"{% endif %} class="shadow-sm border-radius-lg" style="height: 170%; width: 170%;" /></div>
        </div>
        <div class="col-sm-auto col-8 my-auto">
            <div class="h-100">
                <h3 class="col mb-1 font-weight-bolder text-center">
                    {{ guild.name }}
                    <div class="dropdown" style="display: unset;">
                        <a class="nav-link text-lg" role="button" id="guild_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="display: unset; vertical-align: 2.6px; margin-left: 2px;">
                            <i class="fa fa-ellipsis-v"></i>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="guild_dropdown">
                            <li class="nav-link"><a class="nav-item dropdown-item" onclick='copyTextToClipboard("{{ guild.id }}")'><i class="fa fa-copy" style="width: 1.3em; vertical-align: 0.2px;"></i> {{ _("Copy ID") }}</a></li>
                            {% if leave_guild_form %}
                                <form action="" method="POST" role="form" enctype="multipart/form-data">
                                    {{ leave_guild_form.hidden_tag() }}
                                    {{ leave_guild_form.submit(class="nav-item dropdown-item text-danger", onclick="return confirmLeaveGuild(event);", style="display: none;") }}
                                    <li class="nav-link"><a class="nav-item dropdown-item text-danger" onclick='this.parentElement.parentElement.querySelector("#{{ leave_guild_form.submit.id }}").click();'><i class="fa fa-trash-o" style="width: 1.3em; vertical-align: 0.8px;"></i> {{ leave_guild_form.submit.label.text }}</a></li>
                                </form>
                            {% endif %}
                        </ul>
                    </div>
                </h3>
                <h5 class="mb-0 font-weight-bold text-lg text-center">{{ _("Owned by") }} {{ guild.owner }}</h5>
            </div>
        </div>
    </div>

    <div class="card-profile-stats d-flex justify-content-center">
        <div>
            <span class="heading">{{ number_to_text_with_suffix(guild.members_number) }}</span>
            <span class="description">{% if guild.members_number > 1 %}{{ _("Members") }}{% else %}{{ _("Member") }}{% endif %}</span>
        </div>
        <div>
            <span class="heading">{{ number_to_text_with_suffix(guild.channels_number) }}</span>
            <span class="description">{% if guild.channels_number > 1 %}{{ _("Channels") }}{% else %}{{ _("Channel") }}{% endif %}</span>
        </div>
        <div>
            <span class="heading">{{ number_to_text_with_suffix(guild.roles_number) }}</span>
            <span class="description">{% if guild.roles_number > 1 %}{{ _("Roles") }}{% else %}{{ _("Role") }}{% endif %}</span>
        </div>
    </div>
    <div class="d-flex align-items-center justify-content-between">
        <p><i class="fa fa-user-circle-o text-success" aria-hidden="true"></i> {{ guild.online_number }}<br /><i class="fa fa-user-circle-o text-warning" aria-hidden="true"></i> {{ guild.idle_number }}<br /><br /><i class="fa fa-hashtag text-secondary" aria-hidden="true"></i> {{ guild.text_channels_number }}</p>
        <p style="margin-left: 20px;"><i class="fa fa-user-circle-o text-danger" aria-hidden="true"></i> {{ guild.dnd_number }}<br /><i class="fa fa-user-circle-o text-secondary" aria-hidden="true"></i> {{ guild.offline_number }}<br /><br /><i class="fa fa-volume-up text-secondary" aria-hidden="true"></i> {{ guild.voice_channels_number }}</p>
    </div>

    <h6 class="text-secondary" style="margin-bottom: 0rem;">{{ _("Created at:") }} {{ moment(guild.created_at).format("Do MMMM YYYY") }}</h6>
    {% if guild.joined_at %}
        <h6 class="text-secondary">{{ _("Bot joined at:") }} {{ moment(guild.joined_at).format("Do MMMM YYYY") }}</h6>
    {% endif %}
</div>
            
{% block javascripts %}
    <script>
        async function confirmLeaveGuild(event) {
            if (confirmationDone) {
                return true;
            }
            let target_button = event.target;
            event.preventDefault();
            SwalAlert.fire({
                title: '{{ _("Are you sure you want me to leave this guild?") }}',
                text: '{{ _("You will always be able to invite me back to this server later, but you risk losing some settings.") }}',
                confirmButtonText: '{{ _("Yes, leave!") }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    confirmationDone = true;
                    target_button.click();
                }
            })
            return false;
        }
    </script>
{% endblock %}
