{% import "macros.jinja" as macros %}

<div id="stats-body" class="p-4">
    <div class="stat-group absolute-container">
        <h1 class="user-count text-center">{{stats['users'] | commafy}}</h1>
        <h2 class="text-center">active crabs</h2>
        <svg class="big-badge" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="729" height="729.593" viewBox="0 0 729 729.593" enable-background="new 0 0 1000 1000" xml:space="preserve">
            <path id="Rectangle_1_copy_3" data-name="Rectangle 1 copy 3" class="cls-1" d="M744.877,446.688L708.725,482.87l13.238,49.447a66.032,66.032,0,0,1-46.678,80.849L625.923,626.4l-13.239,49.447a65.968,65.968,0,0,1-80.817,46.66l-49.362-13.238-36.152,36.182a65.935,65.935,0,0,1-93.3,0L316.9,709.273l-49.362,13.238a65.968,65.968,0,0,1-80.817-46.66L173.484,626.4l-49.362-13.238a66.032,66.032,0,0,1-46.679-80.849L90.682,482.87,54.53,446.688a66.065,66.065,0,0,1,0-93.376L90.682,317.13,77.443,267.683a66.032,66.032,0,0,1,46.679-80.849L173.484,173.6l13.238-49.447A65.968,65.968,0,0,1,267.539,77.49L316.9,90.727l36.152-36.181a65.935,65.935,0,0,1,93.3,0l36.152,36.182L531.867,77.49a65.968,65.968,0,0,1,80.817,46.659L625.923,173.6l49.362,13.238a66.032,66.032,0,0,1,46.678,80.849L708.725,317.13l36.152,36.182A66.065,66.065,0,0,1,744.877,446.688Z" transform="translate(-35.219 -35.219)"/>
        </svg>
        <svg class="big-badge-back" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="729" height="729.593" viewBox="0 0 729 729.593" enable-background="new 0 0 1000 1000" xml:space="preserve">
            <path id="Rectangle_1_copy_3" data-name="Rectangle 1 copy 3" class="cls-1" d="M744.877,446.688L708.725,482.87l13.238,49.447a66.032,66.032,0,0,1-46.678,80.849L625.923,626.4l-13.239,49.447a65.968,65.968,0,0,1-80.817,46.66l-49.362-13.238-36.152,36.182a65.935,65.935,0,0,1-93.3,0L316.9,709.273l-49.362,13.238a65.968,65.968,0,0,1-80.817-46.66L173.484,626.4l-49.362-13.238a66.032,66.032,0,0,1-46.679-80.849L90.682,482.87,54.53,446.688a66.065,66.065,0,0,1,0-93.376L90.682,317.13,77.443,267.683a66.032,66.032,0,0,1,46.679-80.849L173.484,173.6l13.238-49.447A65.968,65.968,0,0,1,267.539,77.49L316.9,90.727l36.152-36.181a65.935,65.935,0,0,1,93.3,0l36.152,36.182L531.867,77.49a65.968,65.968,0,0,1,80.817,46.659L625.923,173.6l49.362,13.238a66.032,66.032,0,0,1,46.678,80.849L708.725,317.13l36.152,36.182A66.065,66.065,0,0,1,744.877,446.688Z" transform="translate(-35.219 -35.219)"/>
        </svg>
    </div>

    <div class="mt-5 p-3 rounded-media neue-card neue-card-media" id="trophies">
        <div class="d-flex flex-wrap justify-content-center">
            {% for stat in stats['mini_stats'] %}
                {% include "stat.html" %}
            {% endfor %}
            <div class="trophy-space-filler m-2" style="height: 0; width: 150px;"></div>
            <div class="trophy-space-filler m-2" style="height: 0; width: 150px;"></div>
        </div>
    </div>

    {% with king = stats['crab_king'][0] %}
    <div class="crab-king mt-5 w-100">
        <div class="crown-name absolute-container">
            <h1 class="text-center">
            {% if spooky_mode %}
                Ghoul King
            {% else %}
                Crab King
            {% endif %}
            </h1>
            <div class="horizontal-line"></div>
        </div>
        <p class="text-center text-muted stat-explanation">The most followed active user</p>
        <div class="king-profile neue-card neue-card-media p-4 row flex-row absolute-container">
            <div class="col-auto">
                <img class="profile-crown" src="https://cdn.crabber.net/img/crown.svg" alt="golden crown">
                <div class="rounded-circle profile-picture"
                    style="background-image: url('{{king.avatar}}');"
                    src="{{king.avatar}}">
                </div>
            </div>

            <div class="col">
                <div class="profile-box-names mt-2">
                    <h2 class="king-display-name">
                        {{king.display_name}}
                        {% if king.verified %}
                            <a title="This user is verified">{{macros.verified(30)}}</a>
                        {% endif %}
                    </h2>
                    <p class="text-muted mb-1">
                        @{{king.username}}
                        <span class="follow-count px-1 ml-1"><b>{{stats['crab_king'][1]}}</b> follower{{stats['crab_king'][1] | pluralize}}</span>
                    </p>
                </div>
            </div>
            <!-- Profile page link -->
            <a href="/user/{{king.username}}" class="absolute-fill" draggable="false"></a>
        </div>
    </div>
    {% endwith %}

    {% if stats['party_starter'] %}
    {% with party_starter = stats['party_starter'][0] %}
    <div class="crab-king mt-5 w-100">
        <div class="crown-name absolute-container">
            <h1 class="text-center">
            {% if spooky_mode %}
                Grim Reaper
            {% else %}
                Party Starter
            {% endif %}
            </h1>
            <div class="horizontal-line"></div>
        </div>
        <p class="text-center text-muted stat-explanation">The user who's referred the most people to Crabber</p>
        <div class="king-profile neue-card neue-card-media p-4 row flex-row absolute-container">
            <div class="col-auto">
                <div class="avatar-badge">

                    <svg class="avatar-badge-icon" width="20" height="20" data-jam="birthday-cake-f">
                        <use href="{{sprite_url}}?version={{server_start}}#birthday-cake-f"></use>
                    </svg>
                </div>
                <div class="rounded-circle profile-picture"
                    style="background-image: url('{{party_starter.avatar}}');"
                    src="{{party_starter.avatar}}">
                </div>
            </div>

            <div class="col">
                <div class="profile-box-names mt-2">
                    <h2 class="king-display-name">
                        {{party_starter.display_name}}
                        {% if party_starter.verified %}
                            <a title="This user is verified">{{macros.verified(30)}}</a>
                        {% endif %}
                    </h2>
                    <p class="text-muted mb-1">
                        @{{party_starter.username}}
                        <span class="follow-count px-1 ml-1"><b>{{stats['party_starter'][1]}}</b> referral{{stats['party_starter'][1] | pluralize}}</span>
                    </p>
                </div>
            </div>
            <!-- Profile page link -->
            <a href="/user/{{party_starter.username}}" class="absolute-fill" draggable="false"></a>
        </div>
    </div>
    {% endwith %}
    {% endif %}

    {% with baby = stats['baby_crab'] %}
    <div class="crab-king mt-5 w-100">
        <div class="crown-name absolute-container">
            <h1 class="text-center">
            {% if spooky_mode %}
                Baby Ghost
            {% else %}
                Baby Crab
            {% endif %}
            </h1>
            <div class="horizontal-line"></div>
        </div>
        <p class="text-center text-muted stat-explanation">Our newest member. Go say hello!</p>
        <div class="king-profile neue-card neue-card-media p-4 row flex-row absolute-container">
            <div class="col-auto">
                <div class="avatar-badge">

                    <svg class="avatar-badge-icon" width="20" height="20" data-jam="clock-f">
                        <use href="{{sprite_url}}?version={{server_start}}#clock-f"></use>
                    </svg>
                </div>
                <div class="rounded-circle profile-picture"
                    style="background-image: url('{{baby.avatar}}');"
                    src="{{baby.avatar}}">
                </div>
            </div>

            <div class="col">
                <div class="profile-box-names mt-2">
                    <h2 class="king-display-name">
                        {{baby.display_name}}
                        {% if baby.verified %}
                            <a title="This user is verified">{{macros.verified(30)}}</a>
                        {% endif %}
                    </h2>
                    <p class="text-muted mb-1">
                        @{{baby.username}}
                        <span class="follow-count px-1 ml-1">a member for <b>{{baby.days_active | commafy}}</b> day{{baby.days_active | pluralize}}</span>
                    </p>
                </div>
            </div>
            <!-- Profile page link -->
            <a href="/user/{{baby.username}}" class="absolute-fill" draggable="false"></a>
        </div>
    </div>
    {% endwith %}

    {% with molt = stats['best_molt'][0], hide_border=True %}
    <div class="crab-king mt-5 w-100">
        <div class="crown-name absolute-container">
            <h1 class="text-center">
            {% if spooky_mode %}
                Scariest Molt
            {% else %}
                Best Molt
            {% endif %}
            </h1>
            <div class="horizontal-line"></div>
        </div>
        <p class="text-center text-muted">The most liked Molt</p>
        <div class="neue-card neue-card-media p-1">
            {% if molt %}
                {% include 'molt.html' %}
            {% else %}
                <div class="d-inline-block w-100 p-5 text-muted text-molt text-center">
                    Nothing here.
                </div>
            {% endif %}
        </div>
    </div>
    {% endwith %}

    {% with molt = stats['talked_molt'], hide_border=True %}
    <div class="crab-king mt-5 w-100">
        <div class="crown-name absolute-container">
            <h1 class="text-center" style="width: 17rem;">
            {% if spooky_mode %}
                Wailed about
            {% else %}
                Talked About
            {% endif %}
            </h1>
            <div class="horizontal-line"></div>
        </div>
        <p class="text-center text-muted">The Molt that the most Crabs have replied to</p>
        <div class="neue-card neue-card-media p-1">
            {% if molt %}
                {% include 'molt.html' %}
            {% else %}
                <div class="d-inline-block w-100 p-5 text-muted text-molt text-center">
                    Nothing here.
                </div>
            {% endif %}
        </div>
    </div>
    {% endwith %}

    {% with tag = stats['trendy_tag'], tag_molts=stats['trendy_tag_molts'], hide_border=True %}
    <div class="crab-king mt-5 w-100">
        <div class="crown-name absolute-container">
            <h1 class="text-center" style="width: 17rem;">
            {% if spooky_mode %}
                Infectious
            {% else %}
                Trendy
            {% endif %}
            </h1>
            <div class="horizontal-line"></div>
        </div>
        <p class="text-center text-muted">The most used crabtag</p>
        {% if tag %}
            <div class="trendy-tag">
                <h2 class="text-primary text-center">%{{tag}}</h2>
            </div>
        {% endif %}
        <div class="trendy-tag-molts neue-card neue-card-media p-1">
            {% for molt in tag_molts %}
                {% include 'molt.html' %}
            {% else %}
                <div class="d-inline-block w-100 p-5 text-muted text-molt text-center">
                    Nothing here.
                </div>
            {% endfor %}
        </div>
    </div>
    {% endwith %}

    <!-- Spacer -->
    <div class="d-inline-block w-100 p-5 my-5 text-muted text-molt text-center">
    {% if spooky_mode %}
        thanks for keeping crabber spooky 👻
    {% else %}
        thanks for using crabber &lt;3
    {% endif %}
    </div>
</div>