{% extends "core/frontend/index.jinja" %}
{% block content %}
<h1 class="mb-3">頭文字D THE ARCADE</h1>

{% if sesh is defined and sesh["user_id"] > 0 %}
<div class="card mb-3">
    <div class="card-body">
        <div class="card-title">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center">
                <h3>{{ sesh["username"] }}'s Profile</h3>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group me-2">
                        <!--<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>-->
                        <button type="button" data-bs-toggle="modal" data-bs-target="#export"
                            class="btn btn-sm btn-outline-primary">Export</button>
                    </div>
                </div>
            </div>
        </div>
        <!--<h4 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h4>-->
        {% if profile is defined and profile is not none %}
        <div class="row d-flex justify-content-center h-100">
            <div class="col col-lg-3 col-12">
                <div class="card mb-3">
                    <div class="card-body p-4">
                        <h5>Information</h5>
                        <hr class="mt-0 mb-4">
                        <h6>Username</h6>
                        <p class="text-muted">{{ profile.username }}</p>
                        <h6>Grade</h6>
                        <h4>
                            {% set grade = rank.grade %}
                            {% if grade >= 1 and grade <= 72 %}
                                {% set grade_number = (grade - 1) // 9 %}
                                {% set grade_letters = ['E', 'D', 'C', 'B', 'A', 'S', 'SS', 'X'] %}
                                {{ grade_letters[grade_number] }}{{ 9 - ((grade-1) % 9) }}
                            {% else %}
                                Unknown
                            {% endif %}
                        </h6>
                    </div>
                </div>
            </div>
            <div class="col col-lg-9 col-12">
                <div class="card mb-3">

                    <div class="card-body p-4">
                        <h5>Statistics</h5>
                        <hr class="mt-0 mb-4">
                        <div class="row pt-1">
                            <div class="col-lg-4 col-md-6 mb-3">
                                <h6>Total Plays</h6>
                                <p class="text-muted">{{ profile.total_play }}</p>
                            </div>
                            <div class="col-lg-4 col-md-6 mb-3">
                                <h6>Last Played</h6>
                                <p class="text-muted">{{ profile.last_play_date }}</p>
                            </div>
                            <div class="col-lg-4 col-md-6 mb-3">
                                <h6>Mileage</h6>
                                <p class="text-muted">{{ profile.mileage }} m</p>
                            </div>
                        </div>
                        {% if tickets is defined and tickets|length > 0 %}
                        <h5>Tokens/Tickets</h5>
                        <hr class="mt-0 mb-4">
                        <div class="row pt-1">
                            <div class="col-lg-3 col-md-6 mb-3">
                                <h6>Avatar Tokens</h6>
                                <p class="text-muted">{{ tickets.avatar_points }}/30</p>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <h6>Car Dressup Tokens</h6>
                                <p class="text-muted">{{ tickets.car_dressup_points }}/30</p>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <h6>FullTune Tickets</h6>
                                <p class="text-muted">{{ tickets.full_tune_tickets }}/99</p>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <h6>FullTune Fragments</h6>
                                <p class="text-muted">{{ tickets.full_tune_fragments }}/10</p>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="alert alert-warning" role="alert">
            You need to play 頭文字D THE ARCADE first to view your profile.
        </div>
        {% endif %}
        <!--<a href="#" data-bs-toggle="modal" data-bs-target="#card-add" class="card-link">Add Card</a>-->
    </div>
</div>
{% else %}
<div class="alert alert-info" role="alert">
    You need to be logged in to view this page. <a href="/gate">Login</a></a>
</div>
{% endif %}

<div class="modal fade" id="export" tabindex="-1" aria-labelledby="export-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exort-label">Export Profile</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Download your profile as a <strong>.json</strong> file in order to import it into your local ARTEMiS
                database.
                <div class="alert alert-warning mt-3" role="alert">
                    {% if profile is defined and profile is not none %}
                    Are you sure you want to export your profile with the username {{ profile.username }}?
                    {% endif %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="exportBtn">Download Profile</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    {% include "titles/idac/frontend/js/idac_scripts.js" %}
</script>

{% endblock content %}