{% extends "core/frontend/index.jinja" %}
{% block content %}
<h1>{{ sesh["username"] }}'s Account</h1>

<div class="card mb-3">
    <div class="card-body">
        <h3 class="card-title">Cards</h3>
        <!--<h4 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h4>-->
        <p class="card-text">All aime cards are listed here for the given user.</p>
        <a href="#" data-bs-toggle="modal" data-bs-target="#card-add" class="btn btn-primary mb-3">Add Card</a>
        {% if cards is defined and cards|length > 0 %}
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Access Code</th>
                                <th scope="col">Status</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for c in cards %}
                            <tr class="align-middle">
                                <th scope="row">{{ c.index }}</th>
                                <td>{{ c.access_code }}</td>
                                <td>
                                    {% if c.status == 'Active'%}
                                    <span class="badge rounded-pill text-bg-success">Active</span>
                                    {% elif c.status == 'Locked' %}
                                    <span class="badge rounded-pill text-bg-warning">Locked</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if c.status == 'Active'%}
                                    <button type="button" class="btn btn-warning btn-sm">Lock</i></button>
                                    {% elif c.status == 'Locked' %}
                                    <button type="button" class="btn btn-success btn-sm">Unlock</i></button>
                                    {% endif %}
                                    <button type="button" class="btn btn-danger btn-sm">Delete</i></button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% else %}
        <div class="alert alert-warning" role="alert">
            You have no cards registered to your account. Please add one.
        </div>
        {% endif %}
        <!--<a href="#" data-bs-toggle="modal" data-bs-target="#card-add" class="card-link">Add Card</a>-->
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h3 class="card-title">Arcades</h3>
        <!--<h4 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h4>-->
        <p class="card-text">All arcades connected to the given account are listed here.</p>
        {% if arcades is defined and arcades|length > 0 %}
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for a in arcades %}
                            <tr class="align-middle clickable-row" data-href=/arcade/{{ a.id }}>
                                <th scope="row">{{ a.index }}</th>
                                <td>{{ a.name }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% else %}
        <div class="alert alert-info" role="alert">
            You have no arcades connected to your account.
        </div>
        {% endif %}
    </div>
</div>

<div class="modal fade" id="card-add" tabindex="-1" aria-labelledby="card-add-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="card-add-label">Add Card</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h3 class="fs-5">How to:</h3>
                Scan your card on any networked game and press the "View Access Code" button (varies by game) and enter
                the 20
                digit code below.
                <hr>
                FOR AMUSE IC CARDS: DO NOT ENTER THE CODE SHOWN ON THE BACK OF THE CARD ITSELF OR IT WILL NOT WORK!
                <form>
                    <div class="form-floating mt-3">
                        <label for="access-code" class="col-form-label">Access Code</label>
                        <input maxlength="20" type="text" required pattern="[0-9]{20}" class="form-control"
                            id="access-code">
                    </div>
                </form>
            </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">Add</button>
            </div>
        </div>
    </div>
</div>

{% endblock content %}