{% extends "base.html" %}
{% block title %}ADMIN PANEL{% endblock %}
{% block heading %}
    ADMIN PANEL
{% endblock %}
{% block body %}
<!-- Tab buttons -->
<div class="row mx-0">
    <div id="crabs-btn" class="profile-box-category mt-2 col active" onclick="switchTo('crabs');">
        <div class="py-2"><strong class="d-inline-block w-100 text-center">Crabs</strong></div>
    </div>
    <div id="reports-btn" class="profile-box-category mt-2 col" onclick="switchTo('reports');">
        <div class="py-2"><strong class="d-inline-block w-100 text-center">Reports</strong></div>
    </div>
</div>

<div id="crabs">
    {% for crab in crabs.items %}
        <div class="p-2 border-top border-bottom border-dark text-muted">
            Deleted status: <strong>{{"Deleted" if crab.deleted else "Active"}}</strong><br>
            Ban status: <strong>{{"Banned" if crab.banned else "Active"}}</strong>
        </div>
        {% include "mini_bio.html" %}
        <div class="border-bottom border-dark p-2">
            <form method="POST" onsubmit="return confirm('Are you sure?')">
                <input type="hidden" name="target" value="crab">
                <input type="hidden" name="crab_id" value="{{crab.id}}">
                <div class="d-flex flex-row justify-content-around">
                    <div class="input-group mx-2">
                        <input type="text" name="award_title" class="form-control bg-dark text-light" placeholder="Trophy Title" aria-label="Trophy Title"
                            aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button name="user_action" value="award" class="btn btn-info" type="submit">Award</button>
                        </div>
                    </div>
                    <button type="submit" name="user_action" value="verify" class="btn btn-success mx-2">Verify</button>
                    {% set del_action = "restore" if crab.deleted else "delete" %}
                    <button type="submit" name="user_action" value="{{del_action}}" class="text-dark btn btn-warning mx-2">{{del_action|title}}</button>
                    {% set ban_action = "unban" if crab.banned else "ban" %}
                    <button type="submit" name="user_action" value="{{ban_action}}" class="text-dark btn btn-warning mx-2">{{ban_action|title}}</button>
                </div>
            </form>
        </div>
        <div class="py-4 border-dark"></div>
    {% endfor %}
    <!-- Crab pagination controller -->
    <nav aria-label="Page navigation buttons" class="mt-4">
        <ul class="pagination justify-content-center">
            <li class="page-item {{'' if crabs.has_prev else 'disabled'}}">
                <a class="page-link h-100 p-0" href="{{url_for('tortimer', pc=crabs.prev_num)}}" tabindex="-1">

                    <svg class="absolute-center" width="24" height="24" data-jam="chevron-left">
                        <use href="{{sprite_url}}?version={{server_start}}#chevron-left"></use>
                    </svg>
                </a>
            </li>
            <li class="page-item {{'' if crab_page_n > 1 else 'disabled'}}"><a class="page-link" href="/tortimer">Home</a></li>
            <li class="page-item {{'' if crabs.has_next else 'disabled'}}">
                <a class="page-link h-100 p-0" href="{{url_for('tortimer', pc=crabs.next_num)}}">

                    <svg class="absolute-center" width="24" height="24" data-jam="chevron-right">
                        <use href="{{sprite_url}}?version={{server_start}}#chevron-right"></use>
                    </svg>
                </a>
            </li>
        </ul>
    </nav>
    <div class="d-inline-block w-100 p-5 my-5 text-muted text-molt text-center"></div>
</div>
<div id="reports" class="d-none">
    {% for molt in reports.items %}
        <div class="p-2 border-top border-bottom border-dark text-muted">
            Molt status:
            <strong>{{"Deleted" if molt.deleted else "Active"}}</strong>
            <br>
            Reports:
            <strong>{{molt.reports}}</strong>
        </div>
        {% with always_show=true %}
            {% include "molt.html" %}
        {% endwith %}
        <div class="border-bottom border-dark p-2">
            <form method="POST" onsubmit="return confirm('Are you sure?')">
                <input type="hidden" name="target" value="molt">
                <input type="hidden" name="molt_id" value="{{molt.id}}">
                <div class="d-flex flex-row justify-content-start">
                    <button type="submit" name="user_action" value="approve"
                        class="btn btn-success mr-3">Approve</button>
                    {% set del_action = "restore" if molt.deleted else "delete" %}
                    {% set del_color = "secondary" if molt.deleted else "danger" %}
                    <button type="submit" name="user_action" value="{{del_action}}"
                        class="btn btn-{{del_color}}">{{del_action|title}}</button>
                </div>
            </form>
        </div>
        <div class="py-4 border-dark"></div>
    {% endfor %}
    <!-- Molt pagination controller -->
    <nav aria-label="Page navigation buttons" class="mt-4">
        <ul class="pagination justify-content-center">
            <li class="page-item {{'' if reports.has_prev else 'disabled'}}">
                <a class="page-link h-100 p-0" href="{{url_for('tortimer', pm=reports.prev_num)}}" tabindex="-1">

                    <svg class="absolute-center" width="24" height="24" data-jam="chevron-left">
                        <use href="{{sprite_url}}?version={{server_start}}#chevron-left"></use>
                    </svg>
                </a>
            </li>
            <li class="page-item {{'' if molt_page_n > 1 else 'disabled'}}"><a class="page-link" href="/tortimer">Home</a></li>
            <li class="page-item {{'' if reports.has_next else 'disabled'}}">
                <a class="page-link h-100 p-0" href="{{url_for('tortimer', pm=reports.next_num)}}">

                    <svg class="absolute-center" width="24" height="24" data-jam="chevron-right">
                        <use href="{{sprite_url}}?version={{server_start}}#chevron-right"></use>
                    </svg>
                </a>
            </li>
        </ul>
    </nav>
    <div class="d-inline-block w-100 p-5 my-5 text-muted text-molt text-center"></div>
</div>
<script>
    function switchTo(tab) {
        var tabs = ['crabs', 'reports']
        // Reset all buttons to inactive and tabs to hidden
        tabs.forEach(tabName => {
            $(`#${tabName}-btn`).removeClass("active");
            $(`#${tabName}`).addClass("d-none");

        });

        // Switch active button
        $(`#${tab}-btn`).addClass("active");
        // Switch tab
        $(`#${tab}`).removeClass("d-none");
    }
</script>
{% endblock %}