{% extends "core/templates/index.jinja" %}
{% block content %}
<style type="text/css">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
</style>
{% if sesh is defined and sesh["user_id"] > 0 %}
<br>
<br>
<br>

<div class="container">
    <div class="row">
        <h2> Profile </h2>
        <h3>Version: 
            <select name="version" id="version" onChange="changeVersion(this)">
            {% for ver in version_list %}
                <option value={{loop.index0}} {{ "selected" if loop.index0==version else "" }} >{{ver}}</option>
            {% endfor %}
            </select>
        </h3>
    <hr>
    </div>
    <div class="row">
     <div class="col">
        <h2> Name: {{ profile_data.userName if profile_data.userName is defined else "Profile not found" }}</h2>
     </div>
        <div class="col">
            <h4> ID: {{ profile_data.user if profile_data.user is defined else 'Profile not found' }}</h4>
        </div>
    </div>
    <hr>
    <div class="row">
        <h2> Rivals <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#rival_add">Add</button></h2>
    </div>
    <div class="row">
    <table class="table table-dark table-hover">
        <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>
            {% for rival in rival_info%}
            <tr id="{{rival.rivalUserId}}">
                <td>{{rival.rivalUserId}}</td>
                <td>{{rival.rivalUserName}}</td>
                <td><button class="btn-danger btn btn-sm" onclick="deleteRival({{rival.rivalUserId}})">Delete</button></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    <div class="modal fade" id="rival_add" tabindex="-1" aria-labelledby="card_add_label"  data-bs-theme="dark" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add rival</h5>
                </div>
                <div class="modal-body">
                    <form id="rival" action="/game/ongeki/rival.add" method="post" style="outline: 0;">
                        <label class="form-label" for="rivalUserId">Rival ID</label>
                        <input class="form-control" aria-describedby="rivalIdHelphelp" form="rival" id="rivalUserId" name="rivalUserId" maxlength="5" type="number" required>
                        <div id="rivalIdHelphelp" class="form-text">Please use the ID show next to your name in the profile page.</div>
                    </form>
                </div>
                <div class="modal-footer">
                    <input type=submit class="btn btn-primary" type="button" form="rival" value="Add">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
{% include 'titles/ongeki/templates/js/ongeki_scripts.js' %}
</script>
{% else %}
<h2>Not Currently Logged In</h2>
{% endif %}
{% endblock content %}